From 52f5005cfd2f6b88da79025829bab133ef87e3dc Mon Sep 17 00:00:00 2001
From: Mlocik97 <Mlocik97@gmail.com>
Date: Tue, 19 Jul 2022 09:26:57 +0200
Subject: [PATCH 001/145] [docs] update port in "Svelte for new developers"
 blog. (#7697)

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 site/content/blog/2019-04-16-svelte-for-new-developers.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md
index 0a01474bbd..834e042138 100644
--- a/site/content/blog/2019-04-16-svelte-for-new-developers.md
+++ b/site/content/blog/2019-04-16-svelte-for-new-developers.md
@@ -61,7 +61,7 @@ We're going to use the [Svelte + Vite](https://github.com/vitejs/vite/tree/main/
 On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you'll develop better muscle memory if you get into the habit of writing each line out one at a time then running it):
 
 ```bash
-npm init vite my-svelte-project -- --template svelte
+npm create vite@latest my-svelte-project -- --template svelte
 cd my-svelte-project
 npm install
 ```
@@ -78,7 +78,7 @@ npm run dev
 
 Running the `dev` script starts a program called [Vite](https://vitejs.dev/). Vite's job is to take your application's source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.
 
-Speaking of which, open a browser and navigate to http://localhost:3000. This is your application running on a local *web server* (hence 'localhost') on port 3000.
+Speaking of which, open a browser and navigate to http://localhost:5173. This is your application running on a local *web server* (hence 'localhost') on port 5173.
 
 Try changing `src/App.svelte` and saving it. The application will update with your changes.
 

From 91b20b9c2eedc28b3989ac5b013857c64cc22e36 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 20 Jul 2022 00:01:08 +0800
Subject: [PATCH 002/145] [fix] error when using combinator incorrectly (#7650)

* error when using combinator incorrectly

* add new test case
---
 src/compiler/compile/compiler_errors.ts             |  4 ++++
 src/compiler/compile/css/Selector.ts                | 12 ++++++++++++
 .../css-invalid-combinator-selector-1/errors.json   |  9 +++++++++
 .../css-invalid-combinator-selector-1/input.svelte  | 13 +++++++++++++
 .../css-invalid-combinator-selector-2/errors.json   |  9 +++++++++
 .../css-invalid-combinator-selector-2/input.svelte  | 11 +++++++++++
 .../css-invalid-combinator-selector-3/errors.json   |  9 +++++++++
 .../css-invalid-combinator-selector-3/input.svelte  |  9 +++++++++
 .../css-invalid-combinator-selector-4/errors.json   |  9 +++++++++
 .../css-invalid-combinator-selector-4/input.svelte  |  7 +++++++
 10 files changed, 92 insertions(+)
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-1/errors.json
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-1/input.svelte
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-2/errors.json
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-2/input.svelte
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-3/errors.json
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-3/input.svelte
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-4/errors.json
 create mode 100644 test/validator/samples/css-invalid-combinator-selector-4/input.svelte

diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index ea95c8cbec..c1a7d8bc5c 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -234,6 +234,10 @@ export default {
 		code: 'css-invalid-global-selector',
 		message: ':global(...) must contain a single selector'
 	},
+	css_invalid_selector: (selector: string) => ({
+		code: 'css-invalid-selector',
+		message: `Invalid selector "${selector}"`
+	}),
 	duplicate_animation: {
 		code: 'duplicate-animation',
 		message: "An element can only have one 'animate' directive"
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index b00fbc5548..d61ba1f510 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -145,6 +145,7 @@ export default class Selector {
 		}
 
 		this.validate_global_with_multiple_selectors(component);
+		this.validate_invalid_combinator_without_selector(component);
 	}
 
 	validate_global_with_multiple_selectors(component: Component) {
@@ -163,6 +164,17 @@ export default class Selector {
 			}
 		}
 	}
+	validate_invalid_combinator_without_selector(component: Component) {
+		for (let i = 0; i < this.blocks.length; i++) {
+			const block = this.blocks[i];
+			if (block.combinator && block.selectors.length === 0) {
+				component.error(this.node, compiler_errors.css_invalid_selector(component.source.slice(this.node.start, this.node.end)));
+			}
+			if (!block.combinator && block.selectors.length === 0) {
+				component.error(this.node, compiler_errors.css_invalid_selector(component.source.slice(this.node.start, this.node.end)));
+			}
+		}
+	}
 
 	get_amount_class_specificity_increased() {
 		let count = 0;
diff --git a/test/validator/samples/css-invalid-combinator-selector-1/errors.json b/test/validator/samples/css-invalid-combinator-selector-1/errors.json
new file mode 100644
index 0000000000..b50fb678f0
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-1/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"> span\"",
+		"start": { "line": 10, "column": 1, "character": 88 },
+		"end": { "line": 10, "column": 7, "character": 94 },
+		"pos": 88
+	}
+]
diff --git a/test/validator/samples/css-invalid-combinator-selector-1/input.svelte b/test/validator/samples/css-invalid-combinator-selector-1/input.svelte
new file mode 100644
index 0000000000..614b9d932c
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-1/input.svelte
@@ -0,0 +1,13 @@
+<p><span /></p>
+
+<style>
+	p > span {
+		color: red;
+	}
+	:has(> span) {
+		color: red;
+	}
+	> span {
+		color: red;
+	}
+</style>
diff --git a/test/validator/samples/css-invalid-combinator-selector-2/errors.json b/test/validator/samples/css-invalid-combinator-selector-2/errors.json
new file mode 100644
index 0000000000..8c55da03c8
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"+ p\"",
+		"start": { "line": 8, "column": 1, "character": 68 },
+		"end": { "line": 8, "column": 4, "character": 71 },
+		"pos": 68
+	}
+]
diff --git a/test/validator/samples/css-invalid-combinator-selector-2/input.svelte b/test/validator/samples/css-invalid-combinator-selector-2/input.svelte
new file mode 100644
index 0000000000..9cc20ce817
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-2/input.svelte
@@ -0,0 +1,11 @@
+<p><span /></p>
+<p><span /></p>
+
+<style>
+	p + p {
+		color: red;
+	}
+	+ p {
+		color: red;
+	}
+</style>
diff --git a/test/validator/samples/css-invalid-combinator-selector-3/errors.json b/test/validator/samples/css-invalid-combinator-selector-3/errors.json
new file mode 100644
index 0000000000..869cc09c95
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-3/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"> span\"",
+		"start": { "line": 5, "column": 2, "character": 44 },
+		"end": { "line": 5, "column": 8, "character": 50 },
+		"pos": 44
+	}
+]
diff --git a/test/validator/samples/css-invalid-combinator-selector-3/input.svelte b/test/validator/samples/css-invalid-combinator-selector-3/input.svelte
new file mode 100644
index 0000000000..fdd4870921
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-3/input.svelte
@@ -0,0 +1,9 @@
+<p><span /></p>
+
+<style>
+	@media screen {
+		> span {
+			color: red;
+		}
+	}
+</style>
diff --git a/test/validator/samples/css-invalid-combinator-selector-4/errors.json b/test/validator/samples/css-invalid-combinator-selector-4/errors.json
new file mode 100644
index 0000000000..239704f48e
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-4/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"p >\"",
+		"start": { "line": 4, "column": 1, "character": 26 },
+		"end": { "line": 4, "column": 4, "character": 29 },
+		"pos": 26
+	}
+]
diff --git a/test/validator/samples/css-invalid-combinator-selector-4/input.svelte b/test/validator/samples/css-invalid-combinator-selector-4/input.svelte
new file mode 100644
index 0000000000..db04318f73
--- /dev/null
+++ b/test/validator/samples/css-invalid-combinator-selector-4/input.svelte
@@ -0,0 +1,7 @@
+<p><span /></p>
+
+<style>
+	p > {
+		color: red;
+	}
+</style>

From 01ba78a6fb7d3db12c0c1bf39e2d3308972df5d3 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 20 Jul 2022 00:02:40 +0800
Subject: [PATCH 003/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f85f615380..03aeeac579 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Add a11y warning `a11y-no-abstract-role` which checks ARIA roles must be non-abstract ARIA role ([#6241](https://github.com/sveltejs/svelte/pull/6241))
 * Add a11y warning `a11y-no-interactive-element-to-noninteractive-role` which checks for noninteractive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955))
 * Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
+* Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
 
 ## 3.49.0
 

From bb02a22d3e295bdd8eb8f291ab724616a106d45f Mon Sep 17 00:00:00 2001
From: Hofer Ivan <ivan.hofer@outlook.com>
Date: Mon, 25 Jul 2022 21:09:03 +0200
Subject: [PATCH 004/145] [feat] add convenience type for `ComponentEvents`
 (#7702)

---
 generate-type-definitions.js |  2 +-
 src/runtime/internal/dev.ts  | 26 ++++++++++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/generate-type-definitions.js b/generate-type-definitions.js
index 00b079eb5d..d8f6e9f826 100644
--- a/generate-type-definitions.js
+++ b/generate-type-definitions.js
@@ -16,7 +16,7 @@ function modify(path, modifyFn) {
 
 modify(
     'types/runtime/index.d.ts',
-    content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps')
+    content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents')
 );
 modify(
     'types/compiler/index.d.ts',
diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
index 5b00e7dc5b..df40f94230 100644
--- a/src/runtime/internal/dev.ts
+++ b/src/runtime/internal/dev.ts
@@ -264,18 +264,18 @@ export class SvelteComponentTyped<
 /**
  * Convenience type to get the type of a Svelte component. Useful for example in combination with
  * dynamic components using `<svelte:component>`.
- * 
+ *
  * Example:
  * ```html
  * <script lang="ts">
  * 	import type { ComponentType, SvelteComponentTyped } from 'svelte';
  * 	import Component1 from './Component1.svelte';
  * 	import Component2 from './Component2.svelte';
- * 
+ *
  * 	const component: ComponentType = someLogic() ? Component1 : Component2;
  * 	const componentOfCertainSubType: ComponentType<SvelteComponentTyped<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
  * </script>
- * 
+ *
  * <svelte:component this={component} />
  * <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />
  * ```
@@ -292,7 +292,7 @@ export type ComponentType<Component extends SvelteComponentTyped = SvelteCompone
  * <script lang="ts">
  * 	import type { ComponentProps } from 'svelte';
  * 	import Component from './Component.svelte';
- * 
+ *
  * 	const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
  * </script>
  * ```
@@ -301,6 +301,24 @@ export type ComponentProps<Component extends SvelteComponent> = Component extend
 	? Props
 	: never;
 
+/**
+ * Convenience type to get the events the given component expects. Example:
+ * ```html
+ * <script lang="ts">
+ *    import type { ComponentEvents } from 'svelte';
+ *    import Component from './Component.svelte';
+ *
+ *    function handleCloseEvent(event: ComponentEvents<Component>['close']) {
+ *       console.log(event.detail);
+ *    }
+ * </script>
+ *
+ * <Component on:close={handleCloseEvent} />
+ * ```
+ */
+export type ComponentEvents<Component extends SvelteComponent> =
+	Component extends SvelteComponentTyped<any, infer Events> ? Events : never;
+
 export function loop_guard(timeout) {
 	const start = Date.now();
 	return () => {

From 5a725713f7126e300928a0850a65cf18e50384a5 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 25 Jul 2022 21:10:13 +0200
Subject: [PATCH 005/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 03aeeac579..c9f06c5f72 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * Add a11y warning `a11y-no-interactive-element-to-noninteractive-role` which checks for noninteractive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955))
 * Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
 * Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
+* Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
 
 ## 3.49.0
 

From 9ad416be94d0b8cf1a78f7f3714a84badbc9329f Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Wed, 27 Jul 2022 16:56:37 +0800
Subject: [PATCH 006/145] [chore] upgrade source-map (#7729)

Fixes #7728
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 01e23422bb..dfff153e97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
         "periscopic": "^3.0.4",
         "puppeteer": "^2.0.0",
         "rollup": "^1.27.14",
-        "source-map": "^0.7.3",
+        "source-map": "^0.7.4",
         "source-map-support": "^0.5.13",
         "sourcemap-codec": "^1.4.8",
         "tiny-glob": "^0.2.6",
@@ -4047,9 +4047,9 @@
       }
     },
     "node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
       "dev": true,
       "engines": {
         "node": ">= 8"
@@ -7832,9 +7832,9 @@
       "dev": true
     },
     "source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
       "dev": true
     },
     "source-map-support": {
diff --git a/package.json b/package.json
index 9bdf7b3089..4a4d5266c3 100644
--- a/package.json
+++ b/package.json
@@ -148,7 +148,7 @@
     "periscopic": "^3.0.4",
     "puppeteer": "^2.0.0",
     "rollup": "^1.27.14",
-    "source-map": "^0.7.3",
+    "source-map": "^0.7.4",
     "source-map-support": "^0.5.13",
     "sourcemap-codec": "^1.4.8",
     "tiny-glob": "^0.2.6",

From 5dd703fe811a94ea90080edec220d7ee9a09d219 Mon Sep 17 00:00:00 2001
From: qinmu <magenta2127@gmail.com>
Date: Fri, 29 Jul 2022 00:02:15 +0800
Subject: [PATCH 007/145] [fix] handle arrow function on slot inside
 svelte:fragment (#7667)

Fixes #7485
---
 .../compile/nodes/shared/Expression.ts        |  2 +-
 .../Inner.svelte                              |  8 ++++++
 .../Outer.svelte                              | 12 +++++++++
 .../_config.js                                | 27 +++++++++++++++++++
 .../main.svelte                               | 12 +++++++++
 5 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/component-slot-let-inline-function/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-let-inline-function/Outer.svelte
 create mode 100644 test/runtime/samples/component-slot-let-inline-function/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-inline-function/main.svelte

diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index a773355e31..0603c15589 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -323,7 +323,7 @@ export default class Expression {
 
 							const func_expression = func_declaration[0];
 
-							if (node.type === 'InlineComponent') {
+							if (node.type === 'InlineComponent' || node.type === 'SlotTemplate') {
 								// <Comp let:data />
 								this.replace(func_expression);
 							} else {
diff --git a/test/runtime/samples/component-slot-let-inline-function/Inner.svelte b/test/runtime/samples/component-slot-let-inline-function/Inner.svelte
new file mode 100644
index 0000000000..5a30e1855b
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-inline-function/Inner.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let log;
+  export let b;
+  function innerCall(a) {
+    log(`a: ${a}, b: ${b}`);
+  }
+</script>
+<slot name="inner_slot" {innerCall} />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-inline-function/Outer.svelte b/test/runtime/samples/component-slot-let-inline-function/Outer.svelte
new file mode 100644
index 0000000000..40ed99ca63
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-inline-function/Outer.svelte
@@ -0,0 +1,12 @@
+<script>
+  import Inner from './Inner.svelte'
+  export let log;
+  export let a;
+	export let b;
+</script>
+
+<Inner {log} {b}>
+  <svelte:fragment let:innerCall slot="inner_slot">
+    <slot outerCall={() => innerCall(a)} />
+  </svelte:fragment>
+</Inner>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-inline-function/_config.js b/test/runtime/samples/component-slot-let-inline-function/_config.js
new file mode 100644
index 0000000000..55318efaea
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-inline-function/_config.js
@@ -0,0 +1,27 @@
+let logs;
+function log(value) {
+	logs.push(value);
+}
+
+export default {
+	html: '<button>click me</button>',
+	props: {
+		a: 'a',
+		b: 'b',
+		log
+	},
+	before_test() {
+		logs = [];
+	},
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.deepEqual(logs, ['a: a, b: b']);
+
+		component.a = '1'; 
+		component.b = '2';
+		await button.dispatchEvent(new window.MouseEvent('click'));
+		assert.deepEqual(logs, ['a: a, b: b', 'a: 1, b: 2']);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-inline-function/main.svelte b/test/runtime/samples/component-slot-let-inline-function/main.svelte
new file mode 100644
index 0000000000..6ea417d0f2
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-inline-function/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Outer from "./Outer.svelte";
+	export let log = [];
+	export let a;
+	export let b;
+</script>
+
+<Outer let:outerCall {log} {a} {b}>
+	<button on:click={outerCall}>
+		click me
+	</button>
+</Outer>

From 12cbaea9e56a6724acba9daf4d2ebf991dc7591e Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 28 Jul 2022 18:03:13 +0200
Subject: [PATCH 008/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9f06c5f72..43d74063e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 * Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
 * Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
 * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
+* Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
 
 ## 3.49.0
 

From 1198bae8351f1b9c3d9850a67617b0816f624988 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 28 Jul 2022 09:08:59 -0700
Subject: [PATCH 009/145] Bump svelte from 3.43.0 to 3.49.0 (#7689)

Bumps [svelte](https://github.com/sveltejs/svelte) from 3.43.0 to 3.49.0.
- [Release notes](https://github.com/sveltejs/svelte/releases)
- [Changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
- [Commits](https://github.com/sveltejs/svelte/compare/v3.43.0...v3.49.0)

---
updated-dependencies:
- dependency-name: svelte
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dfff153e97..0db7287a64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4248,9 +4248,9 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.43.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
-      "integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
       "dev": true,
       "peer": true,
       "engines": {
@@ -7988,9 +7988,9 @@
       "dev": true
     },
     "svelte": {
-      "version": "3.43.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
-      "integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
       "dev": true,
       "peer": true
     },

From 439bbf87e33e6cf22abb08689fea96fc58f9e9cb Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Mon, 1 Aug 2022 00:14:26 -0700
Subject: [PATCH 010/145] [feat] add SveltePreprocessor utility type (#7742)

---
 src/compiler/preprocess/types.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/compiler/preprocess/types.ts b/src/compiler/preprocess/types.ts
index b1e605238d..faef6c74ed 100644
--- a/src/compiler/preprocess/types.ts
+++ b/src/compiler/preprocess/types.ts
@@ -40,3 +40,10 @@ export interface PreprocessorGroup {
 	style?: Preprocessor;
 	script?: Preprocessor;
 }
+
+export interface SveltePreprocessor<
+	PreprocessorType extends keyof PreprocessorGroup,
+	Options = any
+> {
+	(options?: Options): Required<Pick<PreprocessorGroup, PreprocessorType>>;
+}

From 7a9b8d03ee80b06b174825962c1a1cd9788635db Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 1 Aug 2022 09:15:34 +0200
Subject: [PATCH 011/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43d74063e4..5df9239972 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 * Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
 * Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
 * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
+* Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742))
 * Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
 
 ## 3.49.0

From 474ed42b2483e24e3b9e93206994050fe71d1d97 Mon Sep 17 00:00:00 2001
From: Script Raccoon <54458975+ScriptRaccoon@users.noreply.github.com>
Date: Tue, 2 Aug 2022 07:45:45 +0200
Subject: [PATCH 012/145] [fix] typo in transition docs (#7739)

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

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index f2e71ecbe0..1094e25184 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -1006,7 +1006,7 @@ Like actions, transitions can have parameters.
 ```sv
 {#if visible}
 	<div transition:fade="{{ duration: 2000 }}">
-		flies in, fades out over two seconds
+		fades in and out over two seconds
 	</div>
 {/if}
 ```

From 8513e299ef3fb2581b21f61f7795bfd5eb582bd8 Mon Sep 17 00:00:00 2001
From: Daniel Sandoval <danielericsandoval@gmail.com>
Date: Tue, 2 Aug 2022 09:30:05 -0600
Subject: [PATCH 013/145] [docs] "What's new in Svelte" August newsletter
 (#7741)

---
 ...2-08-01-whats-new-in-svelte-august-2022.md | 119 ++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md

diff --git a/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md b/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md
new file mode 100644
index 0000000000..dfea1bcdd2
--- /dev/null
+++ b/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md
@@ -0,0 +1,119 @@
+---
+title: "What's new in Svelte: August 2022"
+description: "Changes to SvelteKit's `load` before 1.0 plus support for Vite 3 and `vite.config.js`!"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+There's a lot to cover this month... big changes are coming to SvelteKit's design before 1.0 can be completed. If you haven't already, check out Rich's Discussion, [Fixing `load`, and tightening up SvelteKit's design before 1.0 #5748](https://github.com/sveltejs/kit/discussions/5748).
+
+Also, [@dummdidumm](https://github.com/dummdidumm) (Simon H) [has joined Vercel to work on Svelte full-time](https://twitter.com/dummdidumm_/status/1549041206348222464) and [@tcc-sejohnson](https://github.com/tcc-sejohnson) has joined the group of SvelteKit maintainers! We're super excited to have additional maintainers now dedicated to working on Svelte and SvelteKit and have already been noticing their impact. July was the third largest month for SvelteKit changes since its inception!
+
+Now onto the rest of the updates...
+
+## What's new in SvelteKit
+- Dynamically imported styles are now included during SSR ([#5138](https://github.com/sveltejs/kit/pull/5138))
+- Improvements to routes and prop updates to prevent unnecessary rerendering ([#5654](https://github.com/sveltejs/kit/pull/5654), [#5671](https://github.com/sveltejs/kit/pull/5671))
+- Lots of improvements to error handling ([#4665](https://github.com/sveltejs/kit/pull/4665), [#5622](https://github.com/sveltejs/kit/pull/5622), [#5619](https://github.com/sveltejs/kit/pull/5619), [#5616](https://github.com/sveltejs/kit/pull/5616))
+- Custom Vite modes are now respected in SSR builds ([#5602](https://github.com/sveltejs/kit/pull/5602))
+- Custom Vite config locations are now supported ([#5705](https://github.com/sveltejs/kit/pull/5705))
+- Private environment variables (aka "secrets") are now much more secure. Now if you accidentally import them to client-side code, you'll see an error ([#5663](https://github.com/sveltejs/kit/pull/5663), [Docs](https://kit.svelte.dev/docs/configuration#env))
+- Vercel's v3 build output API is now being used in `adapter-vercel` ([#5514](https://github.com/sveltejs/kit/pull/5514))
+- `vite-plugin-svelte` has reached 1.0 and now supports Vite 3. You'll notice new default ports for `dev` (port 5173) and `preview` (port 4173) ([#5005](https://github.com/sveltejs/kit/pull/5005), [vite-plugin-svelte CHANGELOG](https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md))
+
+**Breaking changes:**
+- `mode`, `prod` and `server` are no longer available in `$app/env` ([#5602](https://github.com/sveltejs/kit/pull/5602))
+- `svelte-kit` CLI commands are now run using the `vite` command and `vite.config.js` is required. This will allow first-class support with other projects in the Vite ecosystem like Vitest and Storybook ([#5332](https://github.com/sveltejs/kit/pull/5332), [Docs](https://kit.svelte.dev/docs/project-structure#project-files-vite-config-js))
+- `endpointExtensions` is now `moduleExtensions` and can be used to filter param matchers ([#5085](https://github.com/sveltejs/kit/pull/5085), [Docs](https://kit.svelte.dev/docs/configuration#moduleextensions))
+- Node 16.9 is now the minimum version for SvelteKit ([#5395](https://github.com/sveltejs/kit/pull/5395))
+- %-encoded filenames are now allowed. If you had a `%` in your route, you must now encode it with `%25` ([#5056](https://github.com/sveltejs/kit/pull/5056))
+- Endpoint method names are now uppercased to match HTTP specifications ([#5513](https://github.com/sveltejs/kit/pull/5513), [Docs](https://kit.svelte.dev/docs/routing#endpoints))
+- `writeStatic` has been removed to align with Vite's config ([#5618](https://github.com/sveltejs/kit/pull/5618))
+- `transformPage` is now `transformPageChunk` ([#5657](https://github.com/sveltejs/kit/pull/5657), [Docs](https://kit.svelte.dev/docs/hooks#handle))
+- The `prepare` script is no longer needed in `package.json` ([#5760](https://github.com/sveltejs/kit/pull/5760))
+- `adapter-node` no longer does any compression while we wait for a [bug fix in the `compression` library](https://github.com/expressjs/compression/pull/183) ([#5560](https://github.com/sveltejs/kit/pull/5506))
+
+For a full list of changes, check out kit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
+
+
+## What's new in Svelte & Language Tools
+- The `@layer` [CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) is now supported in Svelte components (**3.49.0**, [PR](https://github.com/sveltejs/svelte/issues/7504))
+- The `inert` [HTML attribute](https://html.spec.whatwg.org/multipage/interaction.html#the-inert-attribute) is now supported in Svelte's language tools and plugins (**105.20.0**, [PR](https://github.com/sveltejs/language-tools/pull/1565))
+- The Svelte plugin will now use `SvelteComponentTyped` typings, if available (**105.19.0**, [PR](https://github.com/sveltejs/language-tools/pull/1548))
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [PocketBase](https://github.com/pocketbase/pocketbase) is an open source Go backend with a single file and an admin dashboard built with Svelte
+- [Hondo](https://www.playhondo.com/how-to-play) is a word guessing game with multiple rounds
+- [Hexapipes](https://github.com/gereleth/hexapipes) is a site for playing hexagonal pipes puzzle
+- [Mail Must Move](https://www.mordon.app/) is an email made for those who want to get more done
+- [Jot Down](https://github.com/brysonbw/vscode-jot-down) is a Visual Studio Code extension for quick and simple note taking
+- [Kadium](https://kadium.kasper.space/) is an app for staying on top of YouTube channels' uploads
+- [Samen zjin we #1metS10](https://1mets10.avrotros.nl/) is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish
+- [On Writing Code](https://onwritingcode.com/) is an interactive website to learn programming design patterns
+- [Svelte-In-Motion](https://github.com/novacbn/svelte-in-motion) lets you create Svelte-animated videos in your browser
+- [Svelte Terminal](https://github.com/Nico-Mayer/svelte-terminal) is a terminal-like website
+- [Bulletlist](https://bulletlist.com/) is a simple tool with a single purpose: making lists
+- [Remind Me Again](https://github.com/probablykasper/remind-me-again) is an app for toggleable reminders on Mac, Linux and Windows
+- [Heyweek](https://heyweek.com/) is a timetracking app built for freelancers craving that extra pizzazz
+
+**Learning Resources**
+
+_Starring the Svelte team_
+- [The Svelte Documentary is out!](https://www.svelteradio.com/episodes/the-svelte-documentary-is-out) on Svelte Radio
+- [Beginner SvelteKit](https://vercel.com/docs/beginner-sveltekit) by Vercel
+- [Challenge: Explore Svelte by Building a Bubble Popping Game](https://prismic.io/blog/try-svelte-build-game) by Brittney Postma
+- [Let's write a Client-side Routing Library with Svelte](https://www.youtube.com/watch?v=3foVDSknGEY) by lihautan
+- [Svelte Sirens July Talk - Testing in Svelte with Jess Sachs](https://sveltesirens.dev/event/testing-in-svelte)
+
+_To Watch_
+- [10 Awesome Svelte UI Component Libraries](https://www.youtube.com/watch?v=RkD88ARvucM) by LevelUpTuts
+- [Learn How SvelteKit Works](https://www.youtube.com/watch?v=VizuTy3uSNE) and [SvelteKit Endpoints](https://www.youtube.com/watch?v=XnVxDLTgCgo) by Joy of Code
+- [SvelteKit using TS, and Storybook setup](https://www.youtube.com/watch?v=L4F5dSu0FcQ) by Jarrod Kane
+- [Building Apps with Svelte!](https://www.youtube.com/watch?v=prsXVk1fdW4) by Simon Grimm
+- [SvelteKit authentication, the better way - Tutorial](https://www.youtube.com/watch?v=Y98KipzwVdM) by Pilcrow
+
+_To Read_
+- [Some assorted Svelte demos](https://geoffrich.net/posts/assorted-svelte-demos/) by Geoff Rich
+- [Three ways to bootstrap a Svelte project](https://maier.tech/posts/three-ways-to-bootstrap-a-svelte-project) by Thilo Maier
+- [Design & build an app with Svelte](https://bootcamp.uxdesign.cc/design-build-an-app-with-svelte-ecd7ed0729da) by Hugo
+- [Define routes via JS in SvelteKit](https://dev.to/maxcore/define-routes-via-js-in-sveltekit-27e9) by Max Core
+- [Integrating Telegram api with SvelteKit](https://dev.to/theether0/integrating-telegram-api-with-sveltekit-5gb) by Shivam Meena
+- [SvelteKit SSG: how to Prerender your SvelteKit Site](https://rodneylab.com/sveltekit-ssg/) by Rodney Lab
+- [ADEO Design System: Building a Web Component library with Svelte and Rollup](https://medium.com/adeo-tech/adeo-design-system-building-a-web-component-library-with-svelte-and-rollup-72d65de50163) by Mohamed Mokhtari
+- [The Svelte Handbook](https://thevalleyofcode.com/svelte/) by The Valley of Code
+- [Test Svelte Component Using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright) by David Peng
+- [Transitional Apps with Phoenix and Svelte](https://nathancahill.com/phoenix-svelte) by Nathan Cahill
+
+_Tech Demos_
+- [Bringing the best GraphQL experience to Svelte](https://www.the-guild.dev/blog/houdini-and-kitql) by The Guild
+- [Style your Svelte website faster with Stylify CSS](https://stylifycss.com/blog/style-your-svelte-website-faster-with-stylify-css/) by Stylify
+- [Revamped Auth Helpers for Supabase (with SvelteKit support)](https://supabase.com/blog/2022/07/13/supabase-auth-helpers-with-sveltekit-support) by Supabase
+
+
+**Libraries, Tools & Components**
+- [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
+- [Skeleton](https://github.com/Brain-Bones/skeleton) is a UI component library for use with Svelte + Tailwind
+- [pass-composer](https://pass-composer.vercel.app/) helps you compose your postprocessing passes for threlte scenes
+- [@crikey/stores-*](https://www.npmjs.com/package/@crikey/stores-base) is a collection of 8 libraries to extend Svelte stores for common use-cases
+- [Svelte Chrome Storage](https://github.com/shaun-wild/svelte-chrome-storage) is a lightweight abstraction between Svelte stores and Chrome extension storage
+- [Svelte Schema Form](https://github.com/restspace/svelte-schema-form) is a form generator for JSON schema
+- [svelte-gesture](https://github.com/wobsoriano/svelte-gesture) is a library that lets you bind richer mouse and touch events to any component or view
+- [Snap Layout](https://github.com/ThaUnknown/snap-layout) and [universal-title-bar](https://github.com/ThaUnknown/universal-title-bar) bring Windows 11 snap layout and title features to webapps and PWAs. Both can be imported as a `.svelte` module or as a web component
+- [svelte-adapter-bun](https://github.com/gornostay25/svelte-adapter-bun) is an adapter for SvelteKit apps that generates a standalone Bun server
+- [json2dir](https://www.npmjs.com/package/json2dir) converts JSON objects into directory trees
+- [Svelte Command Palette](https://github.com/rohitpotato/svelte-command-palette) is a drop-in command palette component
+- [svelte-use-drop-outside](https://github.com/untemps/svelte-use-drop-outside) is a Svelte action to drop an element outside an area
+- [PowerTable](https://github.com/muonw/powertable) is a JavaScript component that turns JSON data into an interactive HTML table
+- [svelte-slides](https://github.com/rajasegar/svelte-slides) is a slide show template for Svelte using Reveal.js
+- [Svelte Theme Light](https://marketplace.visualstudio.com/items?itemName=webmaek.svelte-theme-light) is a Visual Studio Code theme based on the Svelte REPL
+
+Did we miss anything? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
+
+Still looking for something to do in September? Come join us at the Svelte Summit in Stockholm! [Get your tickets now](https://www.sveltesummit.com/).
+
+See ya next month!

From 816409a27b07090fd6796f585121112e5bd71c88 Mon Sep 17 00:00:00 2001
From: Tal500 <tal_hd@hotmail.com>
Date: Sat, 6 Aug 2022 20:54:23 +0300
Subject: [PATCH 014/145] [fix] Use `Node.parentNode` instead
 `Node.parentElement` for legacy browser support (#7724)

---
 src/runtime/internal/dom.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 072506629c..8a7d3af6da 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -163,7 +163,7 @@ export function append_hydration(target: NodeEx, node: NodeEx) {
 	if (is_hydrating) {
 		init_hydrate(target);
 
-		if ((target.actual_end_child === undefined) || ((target.actual_end_child !== null) && (target.actual_end_child.parentElement !== target))) {
+		if ((target.actual_end_child === undefined) || ((target.actual_end_child !== null) && (target.actual_end_child.parentNode !== target))) {
 			target.actual_end_child = target.firstChild;
 		}
 

From 5b29124fbdf5df179fbd1aae7013774bf447fee8 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 7 Aug 2022 02:56:47 +0900
Subject: [PATCH 015/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5df9239972..72b7df838a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
 * Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742))
 * Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
+* Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
 
 ## 3.49.0
 

From 419641bb3eefb53b4c627005b3637882e5e5342f Mon Sep 17 00:00:00 2001
From: Niko Simonson <nsimonson1@gmail.com>
Date: Mon, 8 Aug 2022 09:01:54 -0700
Subject: [PATCH 016/145] Recursively check label children for input control
 (#5323)

* Recursively check label children for input control

* Add another test case

* Update snapshot

* clean up test

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/nodes/Element.ts         | 20 ++++++-
 .../input.svelte                              |  3 +
 .../warnings.json                             |  1 +
 .../input.svelte                              |  6 ++
 .../warnings.json                             | 60 +++++++++----------
 5 files changed, 58 insertions(+), 32 deletions(-)
 create mode 100644 test/validator/samples/a11y-label-has-associated-control-2/input.svelte
 create mode 100644 test/validator/samples/a11y-label-has-associated-control-2/warnings.json

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index e351a02499..119e187954 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -626,8 +626,24 @@ export default class Element extends Node {
 		}
 
 		if (this.name === 'label') {
-			const has_input_child = this.children.some(i => (i instanceof Element && a11y_labelable.has(i.name) ));
-			if (!attribute_map.has('for') && !has_input_child) {
+			const has_input_child = (children: INode[]) => {
+				if (children.some(child => (child instanceof Element && (a11y_labelable.has(child.name) || child.name === 'slot')))) {
+					return true;
+				}
+
+				for (const child of children) {
+					if (!('children' in child) || child.children.length === 0) {
+						continue;
+					}
+					if (has_input_child(child.children)) {
+						return true;
+					}
+				}
+
+				return false;
+			};
+
+			if (!attribute_map.has('for') && !has_input_child(this.children)) {
 				component.warn(this, compiler_warnings.a11y_label_has_associated_control);
 			}
 		}
diff --git a/test/validator/samples/a11y-label-has-associated-control-2/input.svelte b/test/validator/samples/a11y-label-has-associated-control-2/input.svelte
new file mode 100644
index 0000000000..de26d50782
--- /dev/null
+++ b/test/validator/samples/a11y-label-has-associated-control-2/input.svelte
@@ -0,0 +1,3 @@
+<label>
+  <slot />
+</label>
diff --git a/test/validator/samples/a11y-label-has-associated-control-2/warnings.json b/test/validator/samples/a11y-label-has-associated-control-2/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/a11y-label-has-associated-control-2/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/a11y-label-has-associated-control/input.svelte b/test/validator/samples/a11y-label-has-associated-control/input.svelte
index 43304689dc..124888c089 100644
--- a/test/validator/samples/a11y-label-has-associated-control/input.svelte
+++ b/test/validator/samples/a11y-label-has-associated-control/input.svelte
@@ -1,6 +1,12 @@
+<script>
+  import LabelComponent from './label.svelte'
+</script>
+
 <label>A</label>
 <label for="id">B</label>
 
 <label>C <input type="text" /></label>
 <label>D <button>D</button></label>
 <label>E <span></span></label>
+<label>F {#if true}<input type="text" />{/if}</label>
+<LabelComponent>G <input type="text" /></LabelComponent>
diff --git a/test/validator/samples/a11y-label-has-associated-control/warnings.json b/test/validator/samples/a11y-label-has-associated-control/warnings.json
index b70a1a47de..f618e16973 100644
--- a/test/validator/samples/a11y-label-has-associated-control/warnings.json
+++ b/test/validator/samples/a11y-label-has-associated-control/warnings.json
@@ -1,32 +1,32 @@
 [
-  {
-    "code": "a11y-label-has-associated-control",
-    "end": {
-      "character": 16,
-      "column": 16,
-      "line": 1
-    },
-    "message": "A11y: A form label must be associated with a control.",
-    "pos": 0,
-    "start": {
-      "character": 0,
-      "column": 0,
-      "line": 1
-    }
-  },
-  {
-    "code": "a11y-label-has-associated-control",
-    "end": {
-      "character": 149,
-      "column": 30,
-      "line": 6
-    },
-    "message": "A11y: A form label must be associated with a control.",
-    "pos": 119,
-    "start": {
-      "character": 119,
-      "column": 0,
-      "line": 6
-    }
-  }
+	{
+		"code": "a11y-label-has-associated-control",
+		"end": {
+			"character": 82,
+			"column": 16,
+			"line": 5
+		},
+		"message": "A11y: A form label must be associated with a control.",
+		"pos": 66,
+		"start": {
+			"character": 66,
+			"column": 0,
+			"line": 5
+		}
+	},
+	{
+		"code": "a11y-label-has-associated-control",
+		"end": {
+			"character": 215,
+			"column": 30,
+			"line": 10
+		},
+		"message": "A11y: A form label must be associated with a control.",
+		"pos": 185,
+		"start": {
+			"character": 185,
+			"column": 0,
+			"line": 10
+		}
+	}
 ]

From dc83d0b30dd981581229a3bb19eaf42bee15ea39 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 9 Aug 2022 00:03:25 +0800
Subject: [PATCH 017/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72b7df838a..313e104df3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742))
 * Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
 * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
+* Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
 
 ## 3.49.0
 

From 012d639b42f6562f1df42d5bc9f3c79dbc0fd899 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 9 Aug 2022 00:05:51 +0800
Subject: [PATCH 018/145] Update 05-accessibility-warnings.md

reorder a11y warnings
---
 .../content/docs/05-accessibility-warnings.md | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
index 495d0107c4..8143f43d09 100644
--- a/site/content/docs/05-accessibility-warnings.md
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -54,17 +54,6 @@ The following elements are visually distracting: `<marquee>` and `<blink>`.
 
 ---
 
-### `role-has-required-aria-props`
-
-Elements with ARIA roles must have all required attributes for that role.
-
-```sv
-<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
-<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
-```
-
----
-
 ### `a11y-hidden`
 
 Certain DOM elements are useful for screen reader navigation and should not be hidden.
@@ -272,6 +261,17 @@ Avoid positive `tabindex` property values. This will move elements out of the ex
 
 ---
 
+### `a11y-role-has-required-aria-props`
+
+Elements with ARIA roles must have all required attributes for that role.
+
+```sv
+<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
+<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
+```
+
+---
+
 ### `a11y-structure`
 
 Enforce that certain DOM elements have the correct structure.

From 3570a5361e2f9267891fb4c4c858d2a2cf8f49c8 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 14 Aug 2022 17:26:19 +0900
Subject: [PATCH 019/145] [fix] Apply class directive properly after half way
 transition (#7765)

---
 .../render_dom/wrappers/Element/index.ts      |  5 +++-
 .../class-shortcut-with-transition/_config.js | 30 +++++++++++++++++++
 .../main.svelte                               | 17 +++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/class-shortcut-with-transition/_config.js
 create mode 100644 test/runtime/samples/class-shortcut-with-transition/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index eed7c6f4ee..8e8e0d6706 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -1052,7 +1052,10 @@ export default class ElementWrapper extends Wrapper {
 				block.chunks.update.push(updater);
 			} else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
 				const all_dependencies = this.class_dependencies.concat(...dependencies);
-				const condition = block.renderer.dirty(all_dependencies);
+				let condition = block.renderer.dirty(all_dependencies);
+				if (block.has_outros) {
+					condition = x`!#current || ${condition}`;
+				}
 
 				// If all of the dependencies are non-dynamic (don't get updated) then there is no reason
 				// to add an updater for this.
diff --git a/test/runtime/samples/class-shortcut-with-transition/_config.js b/test/runtime/samples/class-shortcut-with-transition/_config.js
new file mode 100644
index 0000000000..80df51bd4a
--- /dev/null
+++ b/test/runtime/samples/class-shortcut-with-transition/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		open: false,
+		border: true
+	},
+	html: '<p>foo</p>',
+
+	test({ assert, component, target, raf }) {
+		component.open = true;
+		raf.tick(100);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="">bar</p>'
+		);
+
+		component.open = false;
+		raf.tick(150);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_1333973250_0 100ms linear 0ms 1 both;">bar</p>'
+		);
+
+		component.open = true;
+		raf.tick(250);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="">bar</p>'
+		);
+	}
+};
diff --git a/test/runtime/samples/class-shortcut-with-transition/main.svelte b/test/runtime/samples/class-shortcut-with-transition/main.svelte
new file mode 100644
index 0000000000..3291ec4a10
--- /dev/null
+++ b/test/runtime/samples/class-shortcut-with-transition/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { slide } from "svelte/transition";
+	export let open = false;
+	export let color = "red";
+	export let border = false;
+</script>
+
+<p>foo</p>
+{#if open}
+	<p class={color} class:border transition:slide|local={{ duration: 100 }}>bar</p>
+{/if}
+
+<style>
+	.border {
+		border: 4px solid black;
+	}
+</style>

From 040192dd59b82e9258738ebc8ac718727828c226 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 14 Aug 2022 17:27:10 +0900
Subject: [PATCH 020/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 313e104df3..a1dcc005fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
 * Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
 * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
 * Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
+* Fix class directive updates after half way transition [#7764](https://github.com/sveltejs/svelte/issues/7764)
 
 ## 3.49.0
 

From d5efa2e446d1f6a968ca8441936840da63a1a5d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=9F=E4=B8=96=E5=8D=9A?= <897205285@qq.com>
Date: Fri, 19 Aug 2022 12:30:22 +0800
Subject: [PATCH 021/145] [docs] Typescript -> TypeScript (#7797)

* [docs] fix spellings error

* fix ts
---
 .../blog/2020-12-01-whats-new-in-svelte-december-2020.md      | 2 +-
 .../blog/2021-02-01-whats-new-in-svelte-february-2021.md      | 2 +-
 .../content/blog/2021-03-01-whats-new-in-svelte-march-2021.md | 4 ++--
 .../blog/2021-09-01-whats-new-in-svelte-september-2021.md     | 2 +-
 .../blog/2021-10-01-whats-new-in-svelte-october-2021.md       | 4 ++--
 .../blog/2021-11-01-whats-new-in-svelte-november-2021.md      | 2 +-
 .../content/blog/2022-04-01-whats-new-in-svelte-april-2022.md | 4 ++--
 .../14-composition/04-optional-slots/app-a/App.svelte         | 2 +-
 .../14-composition/04-optional-slots/app-b/App.svelte         | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
index b8b1a9d13a..aac2c80f64 100644
--- a/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
+++ b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
@@ -53,7 +53,7 @@ For all the features and bugfixes see the CHANGELOGs for [Svelte](https://github
 
 **Components, Libraries & Tools**
 - [svelte-crossword](https://russellgoldenberg.github.io/svelte-crossword/) is a customizable crossword puzzle component for Svelte.
-- [svelte-cloudinary](https://github.com/cupcakearmy/svelte-cloudinary) makes it easy to integrate Cloudinary with Svelte (including Typescript and SSR support)
+- [svelte-cloudinary](https://github.com/cupcakearmy/svelte-cloudinary) makes it easy to integrate Cloudinary with Svelte (including TypeScript and SSR support)
 - [Svelte Nova](https://extensions.panic.com/extensions/sb.lao/sb.lao.svelte-nova/) extends the new Nova editor to support Svelte
 - [saos](https://github.com/shiryel/saos) is a small svelte component to animate your elements on scroll.
 - [Svelte-nStore](https://github.com/lacikawiz/svelte-nStore) is a general purpose store replacement that fulfills the Svelte store contract and adds getter and calculation features.
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 2d09a3c439..cb7bcb425e 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
@@ -70,7 +70,7 @@ New changes to the Svelte Society website include [a new cheat sheet](https://sv
 - [here-maps-svelte](https://github.com/peopledrivemecrazy/here-maps-svelte) makes it easy to include HERE maps in a Svelte app
 - [p5-svelte](https://github.com/tonyketcham/p5-svelte) is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project
 - [svelte-windicss-preprocess](https://github.com/voorjaar/svelte-windicss-preprocess) is a Svelte preprocessor to compile tailwindcss at build time based on windicss compiler
-- [MitzaCoder/svelte-boilerplate](https://github.com/MitzaCoder/svelte-boilerplate) features configurations for Typescript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules.
+- [MitzaCoder/svelte-boilerplate](https://github.com/MitzaCoder/svelte-boilerplate) features configurations for TypeScript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules.
 
 **Want to share your Svelte Component with the world?** Head over to the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
 
diff --git a/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
index 45a03444c7..ad32088dd3 100644
--- a/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
+++ b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
@@ -17,7 +17,7 @@ Let's dive into the news 🐬
 * Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0))
 * Custom elements will now call `onMount` functions when connecting and clean up when disconnecting (**3.33.0**, checkout [this PR](https://github.com/sveltejs/svelte/pull/4522) for an interesting conversation on how folks are using Svelte with Web Components)
 * A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://svelte.dev/docs#compile-time-svelte-compile))
-* Continued improvement to Typescript definitions
+* Continued improvement to TypeScript definitions
 
 For a complete list of changes, including bug fixes and links to PRs, check out [the CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
 
@@ -96,7 +96,7 @@ Haven't tried the language-tools yet? Check out [Svelte Extension for VSCode](ht
 - [Using Fauna's streaming feature to build a chat with Svelte](https://dev.to/fauna/using-fauna-s-streaming-feature-to-build-a-chat-with-svelte-1gkd) demonstrates how to setup and configure Fauna to build a real-time chat interface with Svelte
 - [Using TakeShape with Sapper](https://www.takeshape.io/articles/using-takeshape-with-sapper/) demonstrates how to connect the TakeShape CMS with Sapper
 - [YastPack](https://github.com/rodabt/yastpack) is Yet Another Snowpack-Svelte-TailwindCss-Routify Template Pack
-- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) is a Snowpack + Svelte + TailwindCSS + Typescript template
+- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) is a Snowpack + Svelte + TailwindCSS + TypeScript template
 - [tonyketcham/sapper-tailwind2-template](https://github.com/tonyketcham/sapper-tailwind2-template) is a Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier
 
 ## See you next month!
diff --git a/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md b/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md
index d4794b3c5e..46c483359a 100644
--- a/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md
+++ b/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md
@@ -44,7 +44,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
 - [macos-web](https://github.com/PuruVJ/macos-web) by @puruvjdev has been rebuilt with Svelte from the ground up. Check out all the details in this [Twitter thread](https://twitter.com/puruvjdev/status/1426267327687847939)
 - [Brave Search](https://search.brave.com/) is using Svelte
 - [exatorrent](https://github.com/varbhat/exatorrent) is a self-hostable, easy-to-use, lightweight and feature-rich torrent client written in Go and Svelte
-- [json2TsTypes](https://github.com/jatinhemnani01/json2TsTypes) is a simple tool which will convert your JSON to Typescript Types/Interfaces
+- [json2TsTypes](https://github.com/jatinhemnani01/json2TsTypes) is a simple tool which will convert your JSON to TypeScript Types/Interfaces
 - [Histogram.dev](https://histogram.dev/) generates histograms for each feature in a CSV
 - [cybernetic.dev](https://cybernetic.dev/) is a collection of data-centric UI experiments made while learning Svelte
 - [LunaNotes](https://chrome.google.com/webstore/detail/lunanotes-youtube-video-n/oehoffnnkgcdacmbkhmlbjedinpampak?hl=en) is a Chrome extension to help with taking YouTube video notes
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 4b5b65d6f0..706b4907e0 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
@@ -52,7 +52,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
 - [hirehive](https://www.hirehive.com/) is a candidate and job tracking site
 - [Microsocial](https://microsocial.xyz/) is an experimental Peer-to-Peer Social Platform 
 - [Dylan Ipsum](https://www.dylanlyrics.app/) is a random text generator to replace lorem ipsum with Bob Dylan lyrics
-- [Chip8 Svelte](https://github.com/mikeyhogarth/chip8-svelte) is a CHIP-8 emulator frontend, built on top of CHIP8 Typescript
+- [Chip8 Svelte](https://github.com/mikeyhogarth/chip8-svelte) is a CHIP-8 emulator frontend, built on top of CHIP8 TypeScript
 
 **Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
 
@@ -74,7 +74,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
 
 **Libraries, Tools & Components**
 - [sveltekit-netlify-cms](https://github.com/buhrmi/sveltekit-netlify-cms) is a SvelteKit skeleton app configured for use with Netlify CMS
-- [SvelteFireTS](https://github.com/jacobbowdoin/sveltefirets) is a SvelteKit + Typescript + Firebase library inspired by Fireship.io 
+- [SvelteFireTS](https://github.com/jacobbowdoin/sveltefirets) is a SvelteKit + TypeScript + Firebase library inspired by Fireship.io 
 - [stores-x](https://github.com/Anyass3/stores-x) lets you use Svelte stores just like vueX
 - [sveltekit-snippets](https://github.com/stordahl/sveltekit-snippets) is a VSCode extension that provides snippets for common patterns in SvelteKit & Vanilla Svelte
 - [svelte-xactor](https://github.com/wobsoriano/svelte-xactor) is a middleware that allows you to easily convert your xactor machines into a global store that implements the store contract
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 12a89a639c..0b2d82c199 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
@@ -72,7 +72,7 @@ To see all updates to Svelte and SvelteKit, check out the [Svelte](https://githu
 - [date-picker-svelte](https://github.com/probablykasper/date-picker-svelte) is a date and time picker for Svelte
 - [TwelveUI](https://twelveui.readme.io/reference/what-is-twelveui) is a Svelte component library with accessibility built-in
 - [svelte-outclick](https://github.com/babakfp/svelte-outclick/) is a Svelte component that allows you to listen for clicks outside of an element, by providing you an outclick event
-- [svelte-zero-api](https://github.com/ymzuiku/svelte-zero-api) lets you use SvelteKit APIs like client functions - with support for Typescript
+- [svelte-zero-api](https://github.com/ymzuiku/svelte-zero-api) lets you use SvelteKit APIs like client functions - with support for TypeScript
 - [svelte-recaptcha-v2](https://github.com/basaran/svelte-recaptcha-v2) is a Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
 - [Svelte Body](https://github.com/ghostdevv/svelte-body) lets you apply styles to the body in routes - designed to work with SvelteKit and Routify.
 - [svelte-debug-console](https://github.com/basaran/svelte-debug-console) is a debug.js implementation for Svelte SPA, SSR and sveltekit static sites that lets you see your debug statements in the browser.
diff --git a/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md b/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md
index 2f9db93580..3858168008 100644
--- a/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md
+++ b/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md
@@ -41,7 +41,7 @@ More on that, and what else is new in Svelte, as we dive in...
 
 **Apps & Sites built with Svelte**
 - [Launcher](https://launcher.team/) is an open-source app launcher powered by SvelteKit, Prisma, and Tailwind
-- [Paaster](https://paaster.io/) is a secure by default end to end encrypted pastebin built with Svelte, Vite, Typescript, Python, Starlette, rclone & Docker.
+- [Paaster](https://paaster.io/) is a secure by default end to end encrypted pastebin built with Svelte, Vite, TypeScript, Python, Starlette, rclone & Docker.
 - [Simple AF Video Converter](https://github.com/berlyozzy/Simple-AF-Video-Converter) is an Electron wrapper around ffmpeg.wasm to make converting videos between formats easier
 - [Streamchaser](https://github.com/streamchaser/streamchaser) seeks to simplify movie, series and documentary search through a centralized entertainment technology platform
 - [Svelte Color Picker](https://github.com/V-Py/svelte-material-color-picker) is a simple color picker made with Svelte
@@ -89,7 +89,7 @@ _To Watch_
 
 **Libraries, Tools & Components**
 - [SvelTable](https://sveltable.io/) is a feature rich, data table component built with Svelte
-- [svelte-cyberComp](https://github.com/Cybersteam00/svelte-cyberComp) is a powerful, lightweight component library written in Svelte and Typescript
+- [svelte-cyberComp](https://github.com/Cybersteam00/svelte-cyberComp) is a powerful, lightweight component library written in Svelte and TypeScript
 - [Flowbite Svelte](https://github.com/shinokada/flowbite-svelte) is an unofficial Flowbite component library for Svelte
 - [Svelte-Tide-Project](https://github.com/jbertovic/svelte-tide-project) is a starter template for Svelte frontend apps with Rust Tide backend server
 - [Fetch Inject](https://github.com/vhscom/fetch-inject#sveltekit) implements a performance optimization technique for managing asynchronous JavaScript dependencies - now with Svelte support
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
index 19537cb4b3..3dd126be75 100755
--- a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
@@ -10,7 +10,7 @@
 <ul>
 	<li>
 		<Project
-			title="Add Typescript support"
+			title="Add TypeScript support"
 			tasksCompleted={25}
 			totalTasks={57}
 		>
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
index 19537cb4b3..3dd126be75 100755
--- a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
@@ -10,7 +10,7 @@
 <ul>
 	<li>
 		<Project
-			title="Add Typescript support"
+			title="Add TypeScript support"
 			tasksCompleted={25}
 			totalTasks={57}
 		>

From 8d26b4a19d2b92a8334eaf2e030168e4bfcdda89 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Tue, 23 Aug 2022 11:20:46 +0900
Subject: [PATCH 022/145] [chore] improve performance by using `trimRight()`
 instead of regex replace (#7706)

---
 src/compiler/compile/render_ssr/index.ts | 2 +-
 src/compiler/parse/index.ts              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/compiler/compile/render_ssr/index.ts b/src/compiler/compile/render_ssr/index.ts
index 9d2c1cc60b..e256ba78fb 100644
--- a/src/compiler/compile/render_ssr/index.ts
+++ b/src/compiler/compile/render_ssr/index.ts
@@ -237,7 +237,7 @@ function trim(nodes: TemplateNode[]) {
 		const node = nodes[end - 1] as Text;
 		if (node.type !== 'Text') break;
 
-		node.data = node.data.replace(/\s+$/, '');
+		node.data = node.data.trimRight();
 		if (node.data) break;
 	}
 
diff --git a/src/compiler/parse/index.ts b/src/compiler/parse/index.ts
index 836fb670cf..e5e2260bc0 100644
--- a/src/compiler/parse/index.ts
+++ b/src/compiler/parse/index.ts
@@ -34,7 +34,7 @@ export class Parser {
 			throw new TypeError('Template must be a string');
 		}
 
-		this.template = template.replace(/\s+$/, '');
+		this.template = template.trimRight();
 		this.filename = options.filename;
 		this.customElement = options.customElement;
 

From 8238ac46dc27ae15a46c2ff1cc5222298304eccc Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 22 Aug 2022 19:22:04 -0700
Subject: [PATCH 023/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a1dcc005fa..5fee76add2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
 * Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
 * Fix class directive updates after half way transition [#7764](https://github.com/sveltejs/svelte/issues/7764)
+* Improve parsing speed when encountering large blocks of whitespace [#7675](https://github.com/sveltejs/svelte/issues/7675)
 
 ## 3.49.0
 

From a8616701e7b3c4efe48d1f3cc795d47782c85335 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 29 Aug 2022 12:47:20 -0700
Subject: [PATCH 024/145] [docs] clarify reactivity rules (#7802)

---
 site/content/docs/01-component-format.md | 28 ++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index 1c64094002..23508b5c7b 100644
--- a/site/content/docs/01-component-format.md
+++ b/site/content/docs/01-component-format.md
@@ -55,9 +55,7 @@ In development mode (see the [compiler options](/docs#compile-time-svelte-compil
 
 ---
 
-If you export a `const`, `class` or `function`, it is readonly from outside the component. Function *expressions* are valid props, however.
-
-Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs#template-syntax-component-directives-bind-this).
+If you export a `const`, `class` or `function`, it is readonly from outside the component. Functions are valid prop values, however, as shown below.
 
 ```sv
 <script>
@@ -73,6 +71,8 @@ Readonly props can be accessed as properties on the element, tied to the compone
 </script>
 ```
 
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs#template-syntax-component-directives-bind-this).
+
 ---
 
 You can use reserved words as prop names.
@@ -125,15 +125,29 @@ Because Svelte's reactivity is based on assignments, using array methods like `.
 </script>
 ```
 
+---
+
+Svelte's `<script>` blocks are run only when the component is created, so assignments within a `<script>` block are not automatically run again when a prop updates. If you'd like to track changes to a prop, see the next example in the following section.
+
+```sv
+<script>
+	export let person;
+	// this will only set `name` on component creation
+	// it will not update when `person` does
+	let { name } = person;
+</script>
+```
+
 #### 3. `$:` marks a statement as reactive
 
 ---
 
-Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` [JS label syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Reactive statements run immediately before the component updates, whenever the values that they depend on have changed.
+Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` [JS label syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Reactive statements run after other script code and before the component markup is rendered, whenever the values that they depend on have changed.
 
 ```sv
 <script>
 	export let title;
+	export let person
 
 	// this will update `document.title` whenever
 	// the `title` prop changes
@@ -143,6 +157,12 @@ Any top-level statement (i.e. not inside a block or a function) can be made reac
 		console.log(`multiple statements can be combined`);
 		console.log(`the current title is ${title}`);
 	}
+
+	// this will update `name` when 'person' changes
+	$: ({ name } = person);
+
+	// don't do this. it will run before the previous line
+	let name2 = name;
 </script>
 ```
 

From 0ed453dc11133e5dab902f7f44c807624d6d4c1f Mon Sep 17 00:00:00 2001
From: Daniel Sandoval <daniel@desandoval.net>
Date: Thu, 1 Sep 2022 16:42:09 -0600
Subject: [PATCH 025/145] [docs] "What's new in Svelte" September newsletter
 (#7814)

---
 ...2-08-01-whats-new-in-svelte-august-2022.md |   2 +-
 ...9-01-whats-new-in-svelte-september-2022.md | 105 ++++++++++++++++++
 2 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md

diff --git a/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md b/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md
index dfea1bcdd2..7757fab9ec 100644
--- a/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md
+++ b/site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md
@@ -99,7 +99,7 @@ _Tech Demos_
 - [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
 - [Skeleton](https://github.com/Brain-Bones/skeleton) is a UI component library for use with Svelte + Tailwind
 - [pass-composer](https://pass-composer.vercel.app/) helps you compose your postprocessing passes for threlte scenes
-- [@crikey/stores-*](https://www.npmjs.com/package/@crikey/stores-base) is a collection of 8 libraries to extend Svelte stores for common use-cases
+- [@crikey/stores-*](https://whenderson.github.io/stores-mono/) is a collection of libraries to extend Svelte stores for common use-cases
 - [Svelte Chrome Storage](https://github.com/shaun-wild/svelte-chrome-storage) is a lightweight abstraction between Svelte stores and Chrome extension storage
 - [Svelte Schema Form](https://github.com/restspace/svelte-schema-form) is a form generator for JSON schema
 - [svelte-gesture](https://github.com/wobsoriano/svelte-gesture) is a library that lets you bind richer mouse and touch events to any component or view
diff --git a/site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md b/site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md
new file mode 100644
index 0000000000..a4a8ecfd04
--- /dev/null
+++ b/site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md
@@ -0,0 +1,105 @@
+---
+title: "What's new in Svelte: September 2022"
+description: "Migrating to SvelteKit's new filesystem-based router"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Still looking for something to do this month? It's your last chance to get tickets to Svelte Summit, Stockholm! [Join us on Sept 8-9th](https://www.sveltesummit.com/) 🎉
+
+With the redesign of SvelteKit's filesystem-based router merging early last month, there's lots to cover this month - from the [migration script](https://github.com/sveltejs/kit/discussions/5774) to a number of new blog posts, videos and tutorials.
+
+But the new routing isn't the only new feature in SvelteKit...
+
+## What's new in SvelteKit
+- `Link` is now supported as an HTTP header and works out of the box with Cloudflare's [Automatic Early Hints](https://github.com/sveltejs/kit/issues/5455) (**1.0.0-next.405**, [PR](https://github.com/sveltejs/kit/pull/5735))
+- `$env/static/*` are now virtual to prevent writing sensitive values to disk (**1.0.0-next.413**, [PR](https://github.com/sveltejs/kit/pull/5825))
+- `$app/stores` can now be used from anywhere on the browser (**1.0.0-next.428**, [PR](https://github.com/sveltejs/kit/pull/6100))
+- `config.kit.env.dir` is a new config that sets the directory to search for `.env` files (**1.0.0-next.430**, [PR](https://github.com/sveltejs/kit/pull/6175))
+
+**Breaking changes:**
+- The filesystem-based router and `load` API improves the way routes are managed. **Before installing version `@sveltejs/kit@1.0.0-next.406` or later, [follow this migration guide](https://github.com/sveltejs/kit/discussions/5774)** ([PR](https://github.com/sveltejs/kit/pull/5778), [Issue](https://github.com/sveltejs/kit/discussions/5748))
+- `event.session` has been removed from `load` along with the `session` store and `getSession`. Use `event.locals` instead (**1.0.0-next.415**, [PR](https://github.com/sveltejs/kit/pull/5946))
+- Named layouts have been removed in favor of `(groups)` (**1.0.0-next.432**, [Docs](https://kit.svelte.dev/docs/advanced-routing#advanced-layouts), [PR & Migration Instructions](https://github.com/sveltejs/kit/pull/6174))
+- `event.clientAddress` is now `event.getClientAddress()` (**1.0.0-next.438**, [PR](https://github.com/sveltejs/kit/pull/6237))
+- `$app/env` has been renamed to `$app/environment`, to disambiguate with `$env/...` (**1.0.0-next.445**, [PR](https://github.com/sveltejs/kit/pull/6334))
+
+For a full list of changes, check out kit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
+
+**Updates to language tools**
+- TypeScript doesn't resolve imports to SvelteKit's $types very well, the latest version of Svelte's language tools makes it better (**105.21.0**, [#1592](https://github.com/sveltejs/language-tools/pull/1592))
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [canno](https://twitter.com/a_warnes/status/1556724034959818754?s=20&t=RyKWALPByqMT5A_PkLtUew) is a simple interactive 3d physics game with adjustable gravity, cannon power, and debug visualizer - made with threlte
+- [straw.page](https://straw.page/) is an extremely simple website builder that lets you create unique websites straight from your phone
+- [Patra](https://patra.webjeda.com/) lets you share short notes just with a link. No database. No storage
+- [promptoMANIA](https://promptomania.com/) is an AI art community with an online prompt builder
+- [Album by Mood](https://www.albumbymood.com/) lets you listen to music based on your mood
+- [Daily Sumeiro](https://digivaux.com/sumeiro/daily/) is a daily game to test your math and logic skills
+- [Lofi and Games](https://www.lofiandgames.com/) - play relaxing, casual games right from your browser
+- [Pitch Pipe](https://github.com/joelgibson/pitch-pipe) is a digital pitch pipe with a frequency analyser and just-intonation intervals
+- [classes.wtf](https://github.com/ekzhang/classes.wtf) is a custom, distributed search engine written in Go and Svelte to make searching for Harvard courses much quicker than the standard course catalog
+- [Scrumpack](https://scrumpack.io/) is a set of tools to help agile/scrum teams with their ceremonies like Planning Poker and Retrospectives
+
+**Learning Resources**
+
+_Starring the Svelte team_
+- [Supper Club × Rich Harris, Author of Svelte — Syntax Podcast 499](https://syntax.fm/show/499/supper-club-rich-harris-author-of-svelte)
+- [Let's talk routing with Rich Harris on Svelte Radio](https://www.svelteradio.com/episodes/lets-talk-routing-with-rich-harris)
+- [2.17 - Building the Future of Svelte at Vercel with Rich Harris](https://www.youtube.com/watch?v=F1sSUDVoij4)
+- [1.15 - What's Up With SvelteKit with Shawn Wang (swyx)](https://www.youtube.com/watch?v=xLhuUShkYkM)
+- [Adding Notion Tailwindcss and DaisyUI to Svelte App](https://www.youtube.com/watch?v=l4sbqrY0XGk)
+- [Svelte 101 Session](https://www.youtube.com/watch?v=IIeBERpyxx4)
+- [Astro and Svelte](https://www.youtube.com/watch?v=iYKKg-50Gm4)
+- [Storyblok in Svelte](https://www.youtube.com/watch?v=xXHFRzqUxoE)
+- [Svelte London August Recording](https://www.youtube.com/watch?v=ua6gE2zPulw)
+
+_Learning the new SvelteKit routing_
+- [Migrating Breaking Changes in SvelteKit](https://www.netlify.com/blog/migrating-breaking-changes-in-sveltekit/) by Brittney Postma (Netlify)
+- [Major Svelte Kit API Change - Fixing `load`, and tightening up SvelteKit's design before 1.0](https://www.youtube.com/watch?v=OUGn7VifUCg) - Video by LevelUpTuts
+- [SvelteKit Is Never Going To Be The Same](https://www.youtube.com/watch?v=eVFcGA-15LA) - Video by Joy of Code
+- [Let's learn SvelteKit by building a static Markdown blog from scratch](https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog) by Josh Collinsworth (updated Aug 26th to keep up with the new changes)
+
+_To Watch_
+- [Svelte Guide For React Developers](https://www.youtube.com/watch?v=uWDBEUkTRGk) and [Svelte State Management Guide](https://www.youtube.com/watch?v=4dDjQiOVrOo) by Joy of Code
+- [What Is Bookit? The Svelte Kit Storybook Killer](https://www.youtube.com/watch?v=aOBGhvggsq0) and [What Is @type{import In Svelte Kit - JSDoc Syntax](https://www.youtube.com/watch?v=y0DvJTVO65M) by LevelUpTuts
+- [TWF Yet another JS Framework... or not? Svelte!](https://www.youtube.com/watch?app=desktop&v=nT8QtDBIKZA) by TWF meetup
+
+
+_To Read_
+- [Creating a Figma Plugin with Svelte](https://www.lekoarts.de/javascript/creating-a-figma-plugin-with-svelte) by Lennart
+- [Svelte Video Blog: Vlog with Mux from your own SvelteKit Site](https://plus.rodneylab.com/tutorials/svelte-video-blog) and [Svelte Shy Header: Peekaboo Sticky Header with CSS](https://rodneylab.com/svelte-shy-header/) by Rodney Lab
+
+
+**Libraries, Tools & Components**
+- [@svelte-plugins/tooltips](https://github.com/svelte-plugins/tooltips) is a simple tooltip action and component designed for Svelte
+- [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple authentication library for SvelteKit that connects your SvelteKit app to your database
+- [remix-router-svelte](https://github.com/brophdawg11/remix-routers/tree/main/packages/svelte) is a Svelte implementation of the `react-router-dom` API (driven by `@remix-run/router`)
+- [MKRT](https://github.com/j4w8n/mkrt) is a CLI to help you create SvelteKit routes, fast
+- [Histoire](https://histoire.dev/guide/) is a tool to generate stories applications - scenarios where you showcase components for specific use cases
+- [sveltekit-flash-message](https://www.npmjs.com/package/sveltekit-flash-message) is a Sveltekit library that passes temporary data to the next request, usually from endpoints
+- [svelte-particles](https://github.com/matteobruni/tsparticles#svelte) is a lightweight TypeScript library for creating particles
+- [svelte-claps](https://github.com/bufgix/svelte-claps) adds clap button (like Medium) to any page for your SvelteKit apps
+- [Neon Flicker](https://svelte.dev/repl/fd5e3b2be7da42fe8afddf89661af7d7?version=3.49.0) is a Svelte component to make your text flicker in a cyberpunk style
+- [ComboBox](https://svelte.dev/repl/144f22d18c6943abb1fdd00f13e23fde?version=3.49.0) is a search input to help users select from a large list of items
+- [@svelte-put](https://github.com/vnphanquang/svelte-put) is useful svelte stuff to put in your projects
+- [vite-plugin-svelte-bridge](https://github.com/joshnuss/vite-plugin-svelte-bridge) lets you write Svelte components and use them from React & Vue
+
+_UI Kits and Starters_
+- [Svelte-spectre](https://github.com/basf/svelte-spectre) is a UI-kit based on spectre.css and powered by Svelte
+- [Skeleton](https://skeleton.brainandbonesllc.com/) allows you to build fast and reactive web UI using the power of Svelte + Tailwind
+- [iconsax-svelte](https://www.npmjs.com/package/iconsax-svelte) brings the popular icon kit to Svelte
+- [laravel-vite-svelte-spa-template](https://github.com/NukeJS/laravel-vite-svelte-spa-template) is a Laravel 9, Vite, Svelte SPA, Tailwind CSS (w/ Forms Plugin & Aspect Ratio Plugin), Axios, & TypeScript starter template
+- [neutralino-svelte-boilerplate-js](https://github.com/Raffaele/neutralino-svelte-boilerplate-js) is a cross platform desktop template for Neutralino and Svelte 
+- [figma-plugin-svelte-vite](https://github.com/candidosales/figma-plugin-svelte-vite) is a boilerplate for creating Figma plugins using Svelte, Vite and Typescript
+- [Urara](https://github.com/importantimport/urara) is a sweet & powerful SvelteKit blog starter
+- [SvelteKit Commerce](https://vercel.com/templates/svelte/sveltekit-commerce) is an all-in-one starter kit for high-performance e-commerce sites built with SvelteKit by Vercel
+
+Did we miss anything? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
+
+See ya next month!

From bddd795746c2cdfe04e8256d7a50f4d38ef09238 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 2 Sep 2022 13:21:28 +0200
Subject: [PATCH 026/145] [feat] enhance action typings (#7805)

Allows a way to tell language tools which additional attributes and events the action brings to the HTML element
Related https://github.com/sveltejs/language-tools/pull/1553
---
 src/runtime/action/index.ts | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/runtime/action/index.ts b/src/runtime/action/index.ts
index d7cbf04b12..388f6f040e 100644
--- a/src/runtime/action/index.ts
+++ b/src/runtime/action/index.ts
@@ -4,9 +4,17 @@
  *   immediately after Svelte has applied updates to the markup.
  * - destroy: Method that is called after the element is unmounted
  *
+ * Additionally, you can specify which additional attributes and events the action enables on the applied element.
+ * This applies to TypeScript typings only and has no effect at runtime.
+ *
  * Example usage:
  * ```ts
- * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter> {
+ * interface Attributes {
+ * 	newprop?: string;
+ *	'on:event': (e: CustomEvent<boolean>) => void;
+ * }
+ *
+ * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
  *   // ...
  *   return {
  *     update: (updatedParameter) => {...},
@@ -17,9 +25,15 @@
  *
  * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action
  */
-export interface ActionReturn<Parameter = any> {
+export interface ActionReturn<Parameter = any, Attributes extends Record<string, any> = Record<never, any>> {
 	update?: (parameter: Parameter) => void;
 	destroy?: () => void;
+	/**
+	 * ### DO NOT USE THIS
+	 * This exists solely for type-checking and has no effect at runtime.
+	 * Set this through the `Attributes` generic instead.
+	 */
+	$$_attributes?: Attributes;
 }
 
 /**
@@ -32,11 +46,11 @@ export interface ActionReturn<Parameter = any> {
  *   // ...
  * }
  * ```
- * You can return an object with methods `update` and `destroy` from the function.
+ * You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
  * See interface `ActionReturn` for more details.
  *
  * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action
  */
-export interface Action<Element = HTMLElement, Parameter = any> {
-	<Node extends Element>(node: Node, parameter?: Parameter): void | ActionReturn<Parameter>;
+export interface Action<Element = HTMLElement, Parameter = any, Attributes extends Record<string, any> = Record<never, any>> {
+	<Node extends Element>(node: Node, parameter?: Parameter): void | ActionReturn<Parameter, Attributes>;
 }

From af64ad94836a26a3868aa7e00fba89cf42ef2eda Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 2 Sep 2022 13:32:19 +0200
Subject: [PATCH 027/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fee76add2..456d65b699 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 * Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
 * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
 * Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742))
+* Enhance action typings ([#7805](https://github.com/sveltejs/svelte/pull/7805))
 * Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
 * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
 * Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))

From efe1df0e23a650b458d0c79f9d9ac382378380a9 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 2 Sep 2022 13:48:40 +0200
Subject: [PATCH 028/145] [fix] Only show lowercase component warning for
 non-html/svg elements (#7826)

Fixes #5712
---
 CHANGELOG.md                                        |  1 +
 src/compiler/compile/nodes/Element.ts               | 12 +++++-------
 src/shared/utils/names.ts                           | 13 +++++++++++++
 .../samples/component-name-lowercase/input.svelte   |  5 ++++-
 .../samples/component-name-lowercase/warnings.json  | 10 +++++-----
 5 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 456d65b699..407c868d53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
 * Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
 * Fix class directive updates after half way transition [#7764](https://github.com/sveltejs/svelte/issues/7764)
 * Improve parsing speed when encountering large blocks of whitespace [#7675](https://github.com/sveltejs/svelte/issues/7675)
+* Only show lowercase component warning for non-html/svg elements [#5712](https://github.com/sveltejs/svelte/issues/5712)
 
 ## 3.49.0
 
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 119e187954..df0e649122 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -1,4 +1,4 @@
-import { is_void } from '../../../shared/utils/names';
+import { is_html, is_svg, is_void } from '../../../shared/utils/names';
 import Node from './shared/Node';
 import Attribute from './Attribute';
 import Binding from './Binding';
@@ -26,8 +26,6 @@ import compiler_errors from '../compiler_errors';
 import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
 import { is_interactive_element, is_non_interactive_roles, is_presentation_role } from '../utils/a11y';
 
-const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
-
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const aria_attribute_set = new Set(aria_attributes);
 
@@ -166,13 +164,13 @@ function get_namespace(parent: Element, element: Element, explicit_namespace: st
 	const parent_element = parent.find_nearest(/^Element/);
 
 	if (!parent_element) {
-		return explicit_namespace || (svg.test(element.name)
+		return explicit_namespace || (is_svg(element.name)
 			? namespaces.svg
 			: null);
 	}
 
 	if (parent_element.namespace !== namespaces.foreign) {
-		if (svg.test(element.name.toLowerCase())) return namespaces.svg;
+		if (is_svg(element.name.toLowerCase())) return namespaces.svg;
 		if (parent_element.name.toLowerCase() === 'foreignobject') return null;
 	}
 
@@ -373,7 +371,7 @@ export default class Element extends Node {
 	}
 
 	validate() {
-		if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported) {
+		if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported && !is_svg(this.name) && !is_html(this.name)) {
 			this.component.warn(this, compiler_warnings.component_name_lowercase(this.name));
 		}
 
@@ -827,7 +825,7 @@ export default class Element extends Node {
 			} else if (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 (svg.test(this.name)) {
+				} else if (is_svg(this.name)) {
 					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, 'SVG elements'));
 				} else if (is_void(this.name)) {
 					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `void elements like <${this.name}>. Use a wrapper element instead`));
diff --git a/src/shared/utils/names.ts b/src/shared/utils/names.ts
index 5e13e6cd87..7c7cf07cff 100644
--- a/src/shared/utils/names.ts
+++ b/src/shared/utils/names.ts
@@ -1,5 +1,18 @@
+/** regex of all html void element names */
 const void_element_names = /^(?:area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/;
+/** regex of all html element names. svg and math are omitted because they belong to the svg elements namespace */
+const html_element_names = /^(?:a|abbr|address|area|article|aside|audio|b|base|bdi|bdo|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|head|header|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|main|map|mark|meta|meter|nav|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strong|style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|u|ul|var|video|wbr)$/;
+/** regex of all svg element names */
+const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
 export function is_void(name: string) {
 	return void_element_names.test(name) || name.toLowerCase() === '!doctype';
 }
+
+export function is_html(name: string) {
+	return html_element_names.test(name);
+}
+
+export function is_svg(name: string) {
+	return svg.test(name);
+}
diff --git a/test/validator/samples/component-name-lowercase/input.svelte b/test/validator/samples/component-name-lowercase/input.svelte
index ebd7cf3481..bfca8cc471 100644
--- a/test/validator/samples/component-name-lowercase/input.svelte
+++ b/test/validator/samples/component-name-lowercase/input.svelte
@@ -1,7 +1,10 @@
 <script>
 	import thisShouldWarnMe from './MyComponent.svelte';
+	import { form } from './form';
 	let i;
+	form;
 </script>
 
 <thisShouldWarnMe />
-<i />
\ No newline at end of file
+<i />
+<form />
diff --git a/test/validator/samples/component-name-lowercase/warnings.json b/test/validator/samples/component-name-lowercase/warnings.json
index 37765b423d..57aac0c2a5 100644
--- a/test/validator/samples/component-name-lowercase/warnings.json
+++ b/test/validator/samples/component-name-lowercase/warnings.json
@@ -2,16 +2,16 @@
 	{
 		"code": "component-name-lowercase",
 		"message": "<thisShouldWarnMe> will be treated as an HTML element unless it begins with a capital letter",
-		"pos": 82,
+		"pos": 121,
 		"start": {
-			"character": 82,
+			"character": 121,
 			"column": 0,
-			"line": 6
+			"line": 8
 		},
 		"end": {
-			"character": 102,
+			"character": 141,
 			"column": 20,
-			"line": 6
+			"line": 8
 		}
 	}
 ]

From 46990652c00542c13044219991f9a1149a37cc52 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Fri, 2 Sep 2022 08:12:22 -0400
Subject: [PATCH 029/145] -> v3.50.0

---
 CHANGELOG.md      | 25 +++++++++++++------------
 package-lock.json |  2 +-
 package.json      |  2 +-
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 407c868d53..4b150bb169 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,22 +1,23 @@
 # Svelte changelog
 
-## Unreleased
+## 3.50.0
 
-* Add a11y warning `a11y-role-has-required-aria-props` which checks that elements with `role` attribute has all required attributes for that role. ([#5852](https://github.com/sveltejs/svelte/pull/5852))
-* Add a11y warning `aria-proptypes` which checks ARIA state and property values ([#6978](https://github.com/sveltejs/svelte/pull/6978))
-* Add a11y warning `a11y-no-abstract-role` which checks ARIA roles must be non-abstract ARIA role ([#6241](https://github.com/sveltejs/svelte/pull/6241))
-* Add a11y warning `a11y-no-interactive-element-to-noninteractive-role` which checks for noninteractive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955))
-* Remove of empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
-* Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
+* Add a11y warnings:
+	* `a11y-incorrect-aria-attribute-type`: check ARIA state and property values ([#6978](https://github.com/sveltejs/svelte/pull/6978))
+	* `a11y-no-abstract-role`: check that ARIA roles are non-abstract ([#6241](https://github.com/sveltejs/svelte/pull/6241))
+	* `a11y-no-interactive-element-to-noninteractive-role`: check for non-interactive roles used on interactive elements ([#5955](https://github.com/sveltejs/svelte/pull/5955))
+	* `a11y-role-has-required-aria-props`: check that elements with `role` attribute have all required attributes for that role ([#5852](https://github.com/sveltejs/svelte/pull/5852))
 * Add `ComponentEvents` convenience type ([#7702](https://github.com/sveltejs/svelte/pull/7702))
 * Add `SveltePreprocessor` utility type ([#7742](https://github.com/sveltejs/svelte/pull/7742))
 * Enhance action typings ([#7805](https://github.com/sveltejs/svelte/pull/7805))
-* Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
+* Remove empty stylesheets created from transitions ([#4801](https://github.com/sveltejs/svelte/issues/4801), [#7164](https://github.com/sveltejs/svelte/issues/7164))
+* Make `a11y-label-has-associated-control` warning check all descendants for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
+* Only show lowercase component name warnings for non-HTML/SVG elements ([#5712](https://github.com/sveltejs/svelte/issues/5712))
+* Disallow invalid CSS selectors starting with a combinator ([#7643](https://github.com/sveltejs/svelte/issues/7643))
 * Use `Node.parentNode` instead of `Node.parentElement` for legacy browser support ([#7723](https://github.com/sveltejs/svelte/issues/7723))
-* Improve a11y `label-has-associated-control` check to recusively check for input control ([#5528](https://github.com/sveltejs/svelte/issues/5528))
-* Fix class directive updates after half way transition [#7764](https://github.com/sveltejs/svelte/issues/7764)
-* Improve parsing speed when encountering large blocks of whitespace [#7675](https://github.com/sveltejs/svelte/issues/7675)
-* Only show lowercase component warning for non-html/svg elements [#5712](https://github.com/sveltejs/svelte/issues/5712)
+* Handle arrow function on `<slot>` inside `<svelte:fragment>` ([#7485](https://github.com/sveltejs/svelte/issues/7485))
+* Improve parsing speed when encountering large blocks of whitespace ([#7675](https://github.com/sveltejs/svelte/issues/7675))
+* Fix `class:` directive updates in aborted/restarted transitions ([#7764](https://github.com/sveltejs/svelte/issues/7764))
 
 ## 3.49.0
 
diff --git a/package-lock.json b/package-lock.json
index 0db7287a64..8beef8470a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.49.0",
+  "version": "3.50.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 4a4d5266c3..3e22d8b627 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.49.0",
+  "version": "3.50.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From f3f3d074c59c79836a42f53ecd0cece3a916ef61 Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Sat, 3 Sep 2022 18:06:57 +0200
Subject: [PATCH 030/145] [docs] use KeyboardEvent.code (#7809)

---
 .../16-special-elements/04-svelte-window/app-a/App.svelte | 8 ++++----
 .../16-special-elements/04-svelte-window/app-b/App.svelte | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
index 24c9a6368a..47f3d8a87f 100644
--- a/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
@@ -1,10 +1,10 @@
 <script>
 	let key;
-	let keyCode;
+	let code;
 
 	function handleKeydown(event) {
 		key = event.key;
-		keyCode = event.keyCode;
+		code = event.code;
 	}
 </script>
 
@@ -13,7 +13,7 @@
 <div style="text-align: center">
 	{#if key}
 		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{keyCode}</p>
+		<p>{code}</p>
 	{:else}
 		<p>Focus this window and press any key</p>
 	{/if}
@@ -39,4 +39,4 @@
 		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
 		color: #555;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
index 026dfa94f7..c4b5ae53b3 100644
--- a/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
@@ -1,10 +1,10 @@
 <script>
 	let key;
-	let keyCode;
+	let code;
 
 	function handleKeydown(event) {
 		key = event.key;
-		keyCode = event.keyCode;
+		code = event.code;
 	}
 </script>
 
@@ -13,7 +13,7 @@
 <div style="text-align: center">
 	{#if key}
 		<kbd>{key === ' ' ? 'Space' : key}</kbd>
-		<p>{keyCode}</p>
+		<p>{code}</p>
 	{:else}
 		<p>Focus this window and press any key</p>
 	{/if}

From feb8dfce61212affedfede786fd571dbd55905cb Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 4 Sep 2022 13:13:55 +0900
Subject: [PATCH 031/145] [fix] add all global objects / functions (#7786)

---
 CHANGELOG.md                      |   4 +
 scripts/globals-extractor.mjs     |  91 ++++
 src/compiler/compile/Component.ts |   3 +-
 src/compiler/utils/globals.ts     | 840 ++++++++++++++++++++++++++++++
 src/compiler/utils/names.ts       |  65 ---
 5 files changed, 937 insertions(+), 66 deletions(-)
 create mode 100644 scripts/globals-extractor.mjs
 create mode 100644 src/compiler/utils/globals.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b150bb169..92155c0be8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Add all global objects / functions ([#3805](https://github.com/sveltejs/svelte/issue/3805), [#7223](https://github.com/sveltejs/svelte/issue/7223), [#7240](https://github.com/sveltejs/svelte/issue/7240))
+
 ## 3.50.0
 
 * Add a11y warnings:
diff --git a/scripts/globals-extractor.mjs b/scripts/globals-extractor.mjs
new file mode 100644
index 0000000000..1c4274a024
--- /dev/null
+++ b/scripts/globals-extractor.mjs
@@ -0,0 +1,91 @@
+/** ----------------------------------------------------------------------
+This script gets a list of global objects/functions of browser.
+This process is simple for now, so it is handled without AST parser.
+Please run `node scripts/globals-extractor.mjs` at the project root.
+
+see: https://github.com/microsoft/TypeScript/tree/main/lib
+ ---------------------------------------------------------------------- */
+
+import http from 'https';
+import fs from 'fs';
+
+const GLOBAL_TS_PATH = './src/compiler/utils/globals.ts';
+
+// MEMO: add additional objects/functions which existed in `src/compiler/utils/names.ts`
+//       before this script was introduced but could not be retrieved by this process.
+const SPECIALS = ['global', 'globalThis', 'InternalError', 'process', 'undefined'];
+
+const get_url = (name) => `https://raw.githubusercontent.com/microsoft/TypeScript/main/lib/lib.${name}.d.ts`;
+const extract_name = (split) => split.match(/^[a-zA-Z0-9_$]+/)[0];
+
+const extract_functions_and_references = (name, data) => {
+	const functions = [];
+	const references = [];
+	data.split('\n').forEach(line => {
+		const trimmed = line.trim();
+		const split = trimmed.replace(/[\s+]/, ' ').split(' ');
+		if (split[0] === 'declare' && split[1] !== 'type') {
+			functions.push(extract_name(split[2]));
+		} else if (trimmed.startsWith('/// <reference')) {
+			const matched = trimmed.match(/ lib="(.+)"/);
+			const reference = matched && matched[1];
+			if (reference) references.push(reference);
+		}
+	});
+	return { functions, references };
+};
+
+const do_get = (url) => new Promise((resolve, reject) => {
+	http.get(url, (res) => {
+		let body = '';
+		res.setEncoding('utf8');
+		res.on('data', (chunk) => body += chunk);
+		res.on('end', () => resolve(body));
+	}).on('error', (e) => {
+		console.error(e.message);
+		reject(e);
+	});
+});
+
+const fetched_names = new Set();
+const get_functions = async (name) => {
+	const res = [];
+	if (fetched_names.has(name)) return res;
+	fetched_names.add(name);
+	const body = await do_get(get_url(name));
+	const { functions, references } = extract_functions_and_references(name, body);
+	res.push(...functions);
+	const chile_functions = await Promise.all(references.map(get_functions));
+	chile_functions.forEach(i => res.push(...i));
+	return res;
+};
+
+const build_output = (functions) => {
+	const sorted = Array.from(new Set(functions.sort()));
+	return `\
+/** ----------------------------------------------------------------------
+This file is automatically generated by \`scripts/globals-extractor.mjs\`.
+Generated At: ${new Date().toISOString()}
+---------------------------------------------------------------------- */
+
+export default new Set([
+${sorted.map((i) => `\t'${i}'`).join(',\n')}
+]);
+`;
+};
+
+const get_exists_globals = () => {
+	const regexp = /^\s*["'](.+)["'],?\s*$/;
+	return fs.readFileSync(GLOBAL_TS_PATH, 'utf8')
+		.split('\n')
+		.filter(line => line.match(regexp))
+		.map(line => line.match(regexp)[1]);
+};
+
+(async () => {
+	const globals = get_exists_globals();
+	const new_globals = await get_functions('es2021.full');
+	globals.forEach((g) => new_globals.push(g));
+	SPECIALS.forEach((g) => new_globals.push(g));
+	fs.writeFileSync(GLOBAL_TS_PATH, build_output(new_globals));
+})();
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 63c62a256a..2f8874de7a 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -1,7 +1,8 @@
 import { walk } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import Stats from '../Stats';
-import { globals, reserved, is_valid } from '../utils/names';
+import { reserved, is_valid } from '../utils/names';
+import globals from '../utils/globals';
 import { namespaces, valid_namespaces } from '../utils/namespaces';
 import create_module from './create_module';
 import {
diff --git a/src/compiler/utils/globals.ts b/src/compiler/utils/globals.ts
new file mode 100644
index 0000000000..ee43af3b91
--- /dev/null
+++ b/src/compiler/utils/globals.ts
@@ -0,0 +1,840 @@
+/** ----------------------------------------------------------------------
+This file is automatically generated by `scripts/globals-extractor.mjs`.
+Generated At: 2022-09-03T15:22:37.415Z
+---------------------------------------------------------------------- */
+
+export default new Set([
+	'AbortController',
+	'AbortSignal',
+	'AbstractRange',
+	'ActiveXObject',
+	'AggregateError',
+	'AnalyserNode',
+	'Animation',
+	'AnimationEffect',
+	'AnimationEvent',
+	'AnimationPlaybackEvent',
+	'AnimationTimeline',
+	'Array',
+	'ArrayBuffer',
+	'Atomics',
+	'Attr',
+	'Audio',
+	'AudioBuffer',
+	'AudioBufferSourceNode',
+	'AudioContext',
+	'AudioDestinationNode',
+	'AudioListener',
+	'AudioNode',
+	'AudioParam',
+	'AudioParamMap',
+	'AudioProcessingEvent',
+	'AudioScheduledSourceNode',
+	'AudioWorklet',
+	'AudioWorkletNode',
+	'AuthenticatorAssertionResponse',
+	'AuthenticatorAttestationResponse',
+	'AuthenticatorResponse',
+	'BarProp',
+	'BaseAudioContext',
+	'BeforeUnloadEvent',
+	'BigInt',
+	'BigInt64Array',
+	'BigUint64Array',
+	'BiquadFilterNode',
+	'Blob',
+	'BlobEvent',
+	'Boolean',
+	'BroadcastChannel',
+	'ByteLengthQueuingStrategy',
+	'CDATASection',
+	'CSS',
+	'CSSAnimation',
+	'CSSConditionRule',
+	'CSSCounterStyleRule',
+	'CSSFontFaceRule',
+	'CSSGroupingRule',
+	'CSSImportRule',
+	'CSSKeyframeRule',
+	'CSSKeyframesRule',
+	'CSSMediaRule',
+	'CSSNamespaceRule',
+	'CSSPageRule',
+	'CSSRule',
+	'CSSRuleList',
+	'CSSStyleDeclaration',
+	'CSSStyleRule',
+	'CSSStyleSheet',
+	'CSSSupportsRule',
+	'CSSTransition',
+	'Cache',
+	'CacheStorage',
+	'CanvasCaptureMediaStreamTrack',
+	'CanvasGradient',
+	'CanvasPattern',
+	'CanvasRenderingContext2D',
+	'ChannelMergerNode',
+	'ChannelSplitterNode',
+	'CharacterData',
+	'ClientRect',
+	'Clipboard',
+	'ClipboardEvent',
+	'ClipboardItem',
+	'CloseEvent',
+	'Comment',
+	'CompositionEvent',
+	'ConstantSourceNode',
+	'ConvolverNode',
+	'CountQueuingStrategy',
+	'Credential',
+	'CredentialsContainer',
+	'Crypto',
+	'CryptoKey',
+	'CustomElementRegistry',
+	'CustomEvent',
+	'DOMException',
+	'DOMImplementation',
+	'DOMMatrix',
+	'DOMMatrixReadOnly',
+	'DOMParser',
+	'DOMPoint',
+	'DOMPointReadOnly',
+	'DOMQuad',
+	'DOMRect',
+	'DOMRectList',
+	'DOMRectReadOnly',
+	'DOMStringList',
+	'DOMStringMap',
+	'DOMTokenList',
+	'DataTransfer',
+	'DataTransferItem',
+	'DataTransferItemList',
+	'DataView',
+	'Date',
+	'DelayNode',
+	'DeviceMotionEvent',
+	'DeviceOrientationEvent',
+	'Document',
+	'DocumentFragment',
+	'DocumentTimeline',
+	'DocumentType',
+	'DragEvent',
+	'DynamicsCompressorNode',
+	'Element',
+	'ElementInternals',
+	'Enumerator',
+	'Error',
+	'ErrorEvent',
+	'EvalError',
+	'Event',
+	'EventCounts',
+	'EventSource',
+	'EventTarget',
+	'External',
+	'File',
+	'FileList',
+	'FileReader',
+	'FileSystem',
+	'FileSystemDirectoryEntry',
+	'FileSystemDirectoryHandle',
+	'FileSystemDirectoryReader',
+	'FileSystemEntry',
+	'FileSystemFileEntry',
+	'FileSystemFileHandle',
+	'FileSystemHandle',
+	'FinalizationRegistry',
+	'Float32Array',
+	'Float64Array',
+	'FocusEvent',
+	'FontFace',
+	'FontFaceSet',
+	'FontFaceSetLoadEvent',
+	'FormData',
+	'FormDataEvent',
+	'Function',
+	'GainNode',
+	'Gamepad',
+	'GamepadButton',
+	'GamepadEvent',
+	'GamepadHapticActuator',
+	'Geolocation',
+	'GeolocationCoordinates',
+	'GeolocationPosition',
+	'GeolocationPositionError',
+	'HTMLAllCollection',
+	'HTMLAnchorElement',
+	'HTMLAreaElement',
+	'HTMLAudioElement',
+	'HTMLBRElement',
+	'HTMLBaseElement',
+	'HTMLBodyElement',
+	'HTMLButtonElement',
+	'HTMLCanvasElement',
+	'HTMLCollection',
+	'HTMLDListElement',
+	'HTMLDataElement',
+	'HTMLDataListElement',
+	'HTMLDetailsElement',
+	'HTMLDialogElement',
+	'HTMLDirectoryElement',
+	'HTMLDivElement',
+	'HTMLDocument',
+	'HTMLElement',
+	'HTMLEmbedElement',
+	'HTMLFieldSetElement',
+	'HTMLFontElement',
+	'HTMLFormControlsCollection',
+	'HTMLFormElement',
+	'HTMLFrameElement',
+	'HTMLFrameSetElement',
+	'HTMLHRElement',
+	'HTMLHeadElement',
+	'HTMLHeadingElement',
+	'HTMLHtmlElement',
+	'HTMLIFrameElement',
+	'HTMLImageElement',
+	'HTMLInputElement',
+	'HTMLLIElement',
+	'HTMLLabelElement',
+	'HTMLLegendElement',
+	'HTMLLinkElement',
+	'HTMLMapElement',
+	'HTMLMarqueeElement',
+	'HTMLMediaElement',
+	'HTMLMenuElement',
+	'HTMLMetaElement',
+	'HTMLMeterElement',
+	'HTMLModElement',
+	'HTMLOListElement',
+	'HTMLObjectElement',
+	'HTMLOptGroupElement',
+	'HTMLOptionElement',
+	'HTMLOptionsCollection',
+	'HTMLOutputElement',
+	'HTMLParagraphElement',
+	'HTMLParamElement',
+	'HTMLPictureElement',
+	'HTMLPreElement',
+	'HTMLProgressElement',
+	'HTMLQuoteElement',
+	'HTMLScriptElement',
+	'HTMLSelectElement',
+	'HTMLSlotElement',
+	'HTMLSourceElement',
+	'HTMLSpanElement',
+	'HTMLStyleElement',
+	'HTMLTableCaptionElement',
+	'HTMLTableCellElement',
+	'HTMLTableColElement',
+	'HTMLTableElement',
+	'HTMLTableRowElement',
+	'HTMLTableSectionElement',
+	'HTMLTemplateElement',
+	'HTMLTextAreaElement',
+	'HTMLTimeElement',
+	'HTMLTitleElement',
+	'HTMLTrackElement',
+	'HTMLUListElement',
+	'HTMLUnknownElement',
+	'HTMLVideoElement',
+	'HashChangeEvent',
+	'Headers',
+	'History',
+	'IDBCursor',
+	'IDBCursorWithValue',
+	'IDBDatabase',
+	'IDBFactory',
+	'IDBIndex',
+	'IDBKeyRange',
+	'IDBObjectStore',
+	'IDBOpenDBRequest',
+	'IDBRequest',
+	'IDBTransaction',
+	'IDBVersionChangeEvent',
+	'IIRFilterNode',
+	'IdleDeadline',
+	'Image',
+	'ImageBitmap',
+	'ImageBitmapRenderingContext',
+	'ImageData',
+	'Infinity',
+	'InputDeviceInfo',
+	'InputEvent',
+	'Int16Array',
+	'Int32Array',
+	'Int8Array',
+	'InternalError',
+	'IntersectionObserver',
+	'IntersectionObserverEntry',
+	'Intl',
+	'JSON',
+	'KeyboardEvent',
+	'KeyframeEffect',
+	'Location',
+	'Lock',
+	'LockManager',
+	'Map',
+	'Math',
+	'MathMLElement',
+	'MediaCapabilities',
+	'MediaDeviceInfo',
+	'MediaDevices',
+	'MediaElementAudioSourceNode',
+	'MediaEncryptedEvent',
+	'MediaError',
+	'MediaKeyMessageEvent',
+	'MediaKeySession',
+	'MediaKeyStatusMap',
+	'MediaKeySystemAccess',
+	'MediaKeys',
+	'MediaList',
+	'MediaMetadata',
+	'MediaQueryList',
+	'MediaQueryListEvent',
+	'MediaRecorder',
+	'MediaRecorderErrorEvent',
+	'MediaSession',
+	'MediaSource',
+	'MediaStream',
+	'MediaStreamAudioDestinationNode',
+	'MediaStreamAudioSourceNode',
+	'MediaStreamTrack',
+	'MediaStreamTrackEvent',
+	'MessageChannel',
+	'MessageEvent',
+	'MessagePort',
+	'MimeType',
+	'MimeTypeArray',
+	'MouseEvent',
+	'MutationEvent',
+	'MutationObserver',
+	'MutationRecord',
+	'NaN',
+	'NamedNodeMap',
+	'NavigationPreloadManager',
+	'Navigator',
+	'NetworkInformation',
+	'Node',
+	'NodeFilter',
+	'NodeIterator',
+	'NodeList',
+	'Notification',
+	'Number',
+	'Object',
+	'OfflineAudioCompletionEvent',
+	'OfflineAudioContext',
+	'Option',
+	'OscillatorNode',
+	'OverconstrainedError',
+	'PageTransitionEvent',
+	'PannerNode',
+	'Path2D',
+	'PaymentAddress',
+	'PaymentMethodChangeEvent',
+	'PaymentRequest',
+	'PaymentRequestUpdateEvent',
+	'PaymentResponse',
+	'Performance',
+	'PerformanceEntry',
+	'PerformanceEventTiming',
+	'PerformanceMark',
+	'PerformanceMeasure',
+	'PerformanceNavigation',
+	'PerformanceNavigationTiming',
+	'PerformanceObserver',
+	'PerformanceObserverEntryList',
+	'PerformancePaintTiming',
+	'PerformanceResourceTiming',
+	'PerformanceServerTiming',
+	'PerformanceTiming',
+	'PeriodicWave',
+	'PermissionStatus',
+	'Permissions',
+	'PictureInPictureWindow',
+	'Plugin',
+	'PluginArray',
+	'PointerEvent',
+	'PopStateEvent',
+	'ProcessingInstruction',
+	'ProgressEvent',
+	'Promise',
+	'PromiseRejectionEvent',
+	'Proxy',
+	'PublicKeyCredential',
+	'PushManager',
+	'PushSubscription',
+	'PushSubscriptionOptions',
+	'RTCCertificate',
+	'RTCDTMFSender',
+	'RTCDTMFToneChangeEvent',
+	'RTCDataChannel',
+	'RTCDataChannelEvent',
+	'RTCDtlsTransport',
+	'RTCEncodedAudioFrame',
+	'RTCEncodedVideoFrame',
+	'RTCError',
+	'RTCErrorEvent',
+	'RTCIceCandidate',
+	'RTCIceTransport',
+	'RTCPeerConnection',
+	'RTCPeerConnectionIceErrorEvent',
+	'RTCPeerConnectionIceEvent',
+	'RTCRtpReceiver',
+	'RTCRtpSender',
+	'RTCRtpTransceiver',
+	'RTCSctpTransport',
+	'RTCSessionDescription',
+	'RTCStatsReport',
+	'RTCTrackEvent',
+	'RadioNodeList',
+	'Range',
+	'RangeError',
+	'ReadableByteStreamController',
+	'ReadableStream',
+	'ReadableStreamBYOBReader',
+	'ReadableStreamBYOBRequest',
+	'ReadableStreamDefaultController',
+	'ReadableStreamDefaultReader',
+	'ReferenceError',
+	'Reflect',
+	'RegExp',
+	'RemotePlayback',
+	'Request',
+	'ResizeObserver',
+	'ResizeObserverEntry',
+	'ResizeObserverSize',
+	'Response',
+	'SVGAElement',
+	'SVGAngle',
+	'SVGAnimateElement',
+	'SVGAnimateMotionElement',
+	'SVGAnimateTransformElement',
+	'SVGAnimatedAngle',
+	'SVGAnimatedBoolean',
+	'SVGAnimatedEnumeration',
+	'SVGAnimatedInteger',
+	'SVGAnimatedLength',
+	'SVGAnimatedLengthList',
+	'SVGAnimatedNumber',
+	'SVGAnimatedNumberList',
+	'SVGAnimatedPreserveAspectRatio',
+	'SVGAnimatedRect',
+	'SVGAnimatedString',
+	'SVGAnimatedTransformList',
+	'SVGAnimationElement',
+	'SVGCircleElement',
+	'SVGClipPathElement',
+	'SVGComponentTransferFunctionElement',
+	'SVGCursorElement',
+	'SVGDefsElement',
+	'SVGDescElement',
+	'SVGElement',
+	'SVGEllipseElement',
+	'SVGFEBlendElement',
+	'SVGFEColorMatrixElement',
+	'SVGFEComponentTransferElement',
+	'SVGFECompositeElement',
+	'SVGFEConvolveMatrixElement',
+	'SVGFEDiffuseLightingElement',
+	'SVGFEDisplacementMapElement',
+	'SVGFEDistantLightElement',
+	'SVGFEDropShadowElement',
+	'SVGFEFloodElement',
+	'SVGFEFuncAElement',
+	'SVGFEFuncBElement',
+	'SVGFEFuncGElement',
+	'SVGFEFuncRElement',
+	'SVGFEGaussianBlurElement',
+	'SVGFEImageElement',
+	'SVGFEMergeElement',
+	'SVGFEMergeNodeElement',
+	'SVGFEMorphologyElement',
+	'SVGFEOffsetElement',
+	'SVGFEPointLightElement',
+	'SVGFESpecularLightingElement',
+	'SVGFESpotLightElement',
+	'SVGFETileElement',
+	'SVGFETurbulenceElement',
+	'SVGFilterElement',
+	'SVGForeignObjectElement',
+	'SVGGElement',
+	'SVGGeometryElement',
+	'SVGGradientElement',
+	'SVGGraphicsElement',
+	'SVGImageElement',
+	'SVGLength',
+	'SVGLengthList',
+	'SVGLineElement',
+	'SVGLinearGradientElement',
+	'SVGMPathElement',
+	'SVGMarkerElement',
+	'SVGMaskElement',
+	'SVGMatrix',
+	'SVGMetadataElement',
+	'SVGNumber',
+	'SVGNumberList',
+	'SVGPathElement',
+	'SVGPatternElement',
+	'SVGPoint',
+	'SVGPointList',
+	'SVGPolygonElement',
+	'SVGPolylineElement',
+	'SVGPreserveAspectRatio',
+	'SVGRadialGradientElement',
+	'SVGRect',
+	'SVGRectElement',
+	'SVGSVGElement',
+	'SVGScriptElement',
+	'SVGSetElement',
+	'SVGStopElement',
+	'SVGStringList',
+	'SVGStyleElement',
+	'SVGSwitchElement',
+	'SVGSymbolElement',
+	'SVGTSpanElement',
+	'SVGTextContentElement',
+	'SVGTextElement',
+	'SVGTextPathElement',
+	'SVGTextPositioningElement',
+	'SVGTitleElement',
+	'SVGTransform',
+	'SVGTransformList',
+	'SVGUnitTypes',
+	'SVGUseElement',
+	'SVGViewElement',
+	'SafeArray',
+	'Screen',
+	'ScreenOrientation',
+	'ScriptProcessorNode',
+	'SecurityPolicyViolationEvent',
+	'Selection',
+	'ServiceWorker',
+	'ServiceWorkerContainer',
+	'ServiceWorkerRegistration',
+	'Set',
+	'ShadowRoot',
+	'SharedArrayBuffer',
+	'SharedWorker',
+	'SourceBuffer',
+	'SourceBufferList',
+	'SpeechRecognitionAlternative',
+	'SpeechRecognitionErrorEvent',
+	'SpeechRecognitionResult',
+	'SpeechRecognitionResultList',
+	'SpeechSynthesis',
+	'SpeechSynthesisErrorEvent',
+	'SpeechSynthesisEvent',
+	'SpeechSynthesisUtterance',
+	'SpeechSynthesisVoice',
+	'StaticRange',
+	'StereoPannerNode',
+	'Storage',
+	'StorageEvent',
+	'StorageManager',
+	'String',
+	'StyleMedia',
+	'StyleSheet',
+	'StyleSheetList',
+	'SubmitEvent',
+	'SubtleCrypto',
+	'Symbol',
+	'SyntaxError',
+	'Text',
+	'TextDecoder',
+	'TextDecoderStream',
+	'TextEncoder',
+	'TextEncoderStream',
+	'TextMetrics',
+	'TextTrack',
+	'TextTrackCue',
+	'TextTrackCueList',
+	'TextTrackList',
+	'TimeRanges',
+	'Touch',
+	'TouchEvent',
+	'TouchList',
+	'TrackEvent',
+	'TransformStream',
+	'TransformStreamDefaultController',
+	'TransitionEvent',
+	'TreeWalker',
+	'TypeError',
+	'UIEvent',
+	'URIError',
+	'URL',
+	'URLSearchParams',
+	'Uint16Array',
+	'Uint32Array',
+	'Uint8Array',
+	'Uint8ClampedArray',
+	'VBArray',
+	'VTTCue',
+	'VTTRegion',
+	'ValidityState',
+	'VarDate',
+	'VideoColorSpace',
+	'VideoPlaybackQuality',
+	'VisualViewport',
+	'WSH',
+	'WScript',
+	'WaveShaperNode',
+	'WeakMap',
+	'WeakRef',
+	'WeakSet',
+	'WebAssembly',
+	'WebGL2RenderingContext',
+	'WebGLActiveInfo',
+	'WebGLBuffer',
+	'WebGLContextEvent',
+	'WebGLFramebuffer',
+	'WebGLProgram',
+	'WebGLQuery',
+	'WebGLRenderbuffer',
+	'WebGLRenderingContext',
+	'WebGLSampler',
+	'WebGLShader',
+	'WebGLShaderPrecisionFormat',
+	'WebGLSync',
+	'WebGLTexture',
+	'WebGLTransformFeedback',
+	'WebGLUniformLocation',
+	'WebGLVertexArrayObject',
+	'WebKitCSSMatrix',
+	'WebSocket',
+	'WheelEvent',
+	'Window',
+	'Worker',
+	'Worklet',
+	'WritableStream',
+	'WritableStreamDefaultController',
+	'WritableStreamDefaultWriter',
+	'XMLDocument',
+	'XMLHttpRequest',
+	'XMLHttpRequestEventTarget',
+	'XMLHttpRequestUpload',
+	'XMLSerializer',
+	'XPathEvaluator',
+	'XPathExpression',
+	'XPathResult',
+	'XSLTProcessor',
+	'addEventListener',
+	'alert',
+	'atob',
+	'blur',
+	'btoa',
+	'caches',
+	'cancelAnimationFrame',
+	'cancelIdleCallback',
+	'captureEvents',
+	'clearInterval',
+	'clearTimeout',
+	'clientInformation',
+	'close',
+	'closed',
+	'confirm',
+	'console',
+	'createImageBitmap',
+	'crossOriginIsolated',
+	'crypto',
+	'customElements',
+	'decodeURI',
+	'decodeURIComponent',
+	'devicePixelRatio',
+	'dispatchEvent',
+	'document',
+	'encodeURI',
+	'encodeURIComponent',
+	'escape',
+	'eval',
+	'event',
+	'external',
+	'fetch',
+	'focus',
+	'frameElement',
+	'frames',
+	'getComputedStyle',
+	'getSelection',
+	'global',
+	'globalThis',
+	'history',
+	'importScripts',
+	'indexedDB',
+	'innerHeight',
+	'innerWidth',
+	'isFinite',
+	'isNaN',
+	'isSecureContext',
+	'length',
+	'localStorage',
+	'location',
+	'locationbar',
+	'matchMedia',
+	'menubar',
+	'moveBy',
+	'moveTo',
+	'name',
+	'navigator',
+	'onabort',
+	'onafterprint',
+	'onanimationcancel',
+	'onanimationend',
+	'onanimationiteration',
+	'onanimationstart',
+	'onauxclick',
+	'onbeforeprint',
+	'onbeforeunload',
+	'onblur',
+	'oncanplay',
+	'oncanplaythrough',
+	'onchange',
+	'onclick',
+	'onclose',
+	'oncontextmenu',
+	'oncuechange',
+	'ondblclick',
+	'ondevicemotion',
+	'ondeviceorientation',
+	'ondrag',
+	'ondragend',
+	'ondragenter',
+	'ondragleave',
+	'ondragover',
+	'ondragstart',
+	'ondrop',
+	'ondurationchange',
+	'onemptied',
+	'onended',
+	'onerror',
+	'onfocus',
+	'onformdata',
+	'ongamepadconnected',
+	'ongamepaddisconnected',
+	'ongotpointercapture',
+	'onhashchange',
+	'oninput',
+	'oninvalid',
+	'onkeydown',
+	'onkeypress',
+	'onkeyup',
+	'onlanguagechange',
+	'onload',
+	'onloadeddata',
+	'onloadedmetadata',
+	'onloadstart',
+	'onlostpointercapture',
+	'onmessage',
+	'onmessageerror',
+	'onmousedown',
+	'onmouseenter',
+	'onmouseleave',
+	'onmousemove',
+	'onmouseout',
+	'onmouseover',
+	'onmouseup',
+	'onoffline',
+	'ononline',
+	'onorientationchange',
+	'onpagehide',
+	'onpageshow',
+	'onpause',
+	'onplay',
+	'onplaying',
+	'onpointercancel',
+	'onpointerdown',
+	'onpointerenter',
+	'onpointerleave',
+	'onpointermove',
+	'onpointerout',
+	'onpointerover',
+	'onpointerup',
+	'onpopstate',
+	'onprogress',
+	'onratechange',
+	'onrejectionhandled',
+	'onreset',
+	'onresize',
+	'onscroll',
+	'onsecuritypolicyviolation',
+	'onseeked',
+	'onseeking',
+	'onselect',
+	'onselectionchange',
+	'onselectstart',
+	'onslotchange',
+	'onstalled',
+	'onstorage',
+	'onsubmit',
+	'onsuspend',
+	'ontimeupdate',
+	'ontoggle',
+	'ontouchcancel',
+	'ontouchend',
+	'ontouchmove',
+	'ontouchstart',
+	'ontransitioncancel',
+	'ontransitionend',
+	'ontransitionrun',
+	'ontransitionstart',
+	'onunhandledrejection',
+	'onunload',
+	'onvolumechange',
+	'onwaiting',
+	'onwebkitanimationend',
+	'onwebkitanimationiteration',
+	'onwebkitanimationstart',
+	'onwebkittransitionend',
+	'onwheel',
+	'open',
+	'opener',
+	'orientation',
+	'origin',
+	'outerHeight',
+	'outerWidth',
+	'pageXOffset',
+	'pageYOffset',
+	'parent',
+	'parseFloat',
+	'parseInt',
+	'performance',
+	'personalbar',
+	'postMessage',
+	'print',
+	'process',
+	'prompt',
+	'queueMicrotask',
+	'releaseEvents',
+	'removeEventListener',
+	'reportError',
+	'requestAnimationFrame',
+	'requestIdleCallback',
+	'resizeBy',
+	'resizeTo',
+	'screen',
+	'screenLeft',
+	'screenTop',
+	'screenX',
+	'screenY',
+	'scroll',
+	'scrollBy',
+	'scrollTo',
+	'scrollX',
+	'scrollY',
+	'scrollbars',
+	'self',
+	'sessionStorage',
+	'setInterval',
+	'setTimeout',
+	'speechSynthesis',
+	'status',
+	'statusbar',
+	'stop',
+	'structuredClone',
+	'toString',
+	'toolbar',
+	'top',
+	'undefined',
+	'unescape',
+	'visualViewport',
+	'webkitURL',
+	'window'
+]);
diff --git a/src/compiler/utils/names.ts b/src/compiler/utils/names.ts
index e091edb19e..9d5b78fceb 100644
--- a/src/compiler/utils/names.ts
+++ b/src/compiler/utils/names.ts
@@ -1,71 +1,6 @@
 import { isIdentifierStart, isIdentifierChar } from 'acorn';
 import full_char_code_at from './full_char_code_at';
 
-export const globals = new Set([
-	'alert',
-	'Array',
-	'BigInt',
-	'Boolean',
-	'clearInterval',
-	'clearTimeout',
-	'confirm',
-	'console',
-	'Date',
-	'decodeURI',
-	'decodeURIComponent',
-	'document',
-	'Element',
-	'encodeURI',
-	'encodeURIComponent',
-	'Error',
-	'EvalError',
-	'Event',
-	'EventSource',
-	'fetch',
-	'FormData',
-	'global',
-	'globalThis',
-	'history',
-	'HTMLElement',
-	'Infinity',
-	'InternalError',
-	'Intl',
-	'isFinite',
-	'isNaN',
-	'JSON',
-	'localStorage',
-	'location',
-	'Map',
-	'Math',
-	'NaN',
-	'navigator',
-	'Node',
-	'Number',
-	'Object',
-	'parseFloat',
-	'parseInt',
-	'process',
-	'Promise',
-	'prompt',
-	'RangeError',
-	'ReferenceError',
-	'RegExp',
-	'sessionStorage',
-	'Set',
-	'setInterval',
-	'setTimeout',
-	'String',
-	'SVGElement',
-	'Symbol',
-	'SyntaxError',
-	'TypeError',
-	'undefined',
-	'URIError',
-	'URL',
-	'URLSearchParams',
-	'window'
-]);
-
 export const reserved = new Set([
 	'arguments',
 	'await',

From ed078e31fe1d3594c105a17f7fb6def769b386f6 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 4 Sep 2022 19:08:46 +0900
Subject: [PATCH 032/145] update changelog (#7835)

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92155c0be8..18c0b63d06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-* Add all global objects / functions ([#3805](https://github.com/sveltejs/svelte/issue/3805), [#7223](https://github.com/sveltejs/svelte/issue/7223), [#7240](https://github.com/sveltejs/svelte/issue/7240))
+* Add all global objects / functions ([#3805](https://github.com/sveltejs/svelte/issues/3805), [#7223](https://github.com/sveltejs/svelte/issues/7223))
 
 ## 3.50.0
 

From 07d6d179abb7fb86f45cd5175820bbb1c5cbf0e9 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Fri, 9 Sep 2022 05:49:57 +0900
Subject: [PATCH 033/145] [fix] style manager transition regression (#7831)

---
 src/runtime/internal/dom.ts                   |  8 +++++++-
 src/runtime/internal/style_manager.ts         | 16 +++++++--------
 test/runtime-puppeteer/index.ts               | 17 ++++++++++++++--
 .../samples/style_manager-cleanup/_config.js  | 17 ++++++++++++++++
 .../samples/style_manager-cleanup/main.svelte | 16 +++++++++++++++
 .../samples/transition-css-out-in/_config.js  | 14 +++++++++++++
 .../samples/transition-css-out-in/main.svelte | 20 +++++++++++++++++++
 .../samples/style_manager-cleanup/_config.js  | 14 -------------
 .../samples/style_manager-cleanup/main.svelte | 14 -------------
 9 files changed, 97 insertions(+), 39 deletions(-)
 create mode 100644 test/runtime-puppeteer/samples/style_manager-cleanup/_config.js
 create mode 100644 test/runtime-puppeteer/samples/style_manager-cleanup/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/transition-css-out-in/_config.js
 create mode 100644 test/runtime-puppeteer/samples/transition-css-out-in/main.svelte
 delete mode 100644 test/runtime/samples/style_manager-cleanup/_config.js
 delete mode 100644 test/runtime/samples/style_manager-cleanup/main.svelte

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 8a7d3af6da..e678481a5f 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -154,7 +154,13 @@ export function get_root_for_style(node: Node): ShadowRoot | Document {
 	return node.ownerDocument;
 }
 
-export function append_stylesheet(node: ShadowRoot | Document, style: HTMLStyleElement) {
+export function append_empty_stylesheet(node: Node) {
+	const style_element = element('style') as HTMLStyleElement;
+	append_stylesheet(get_root_for_style(node), style_element);
+	return style_element.sheet as CSSStyleSheet;
+}
+
+function append_stylesheet(node: ShadowRoot | Document, style: HTMLStyleElement) {
 	append((node as Document).head || node, style);
 	return style.sheet as CSSStyleSheet;
 }
diff --git a/src/runtime/internal/style_manager.ts b/src/runtime/internal/style_manager.ts
index 67236cabab..36dc1e6044 100644
--- a/src/runtime/internal/style_manager.ts
+++ b/src/runtime/internal/style_manager.ts
@@ -1,8 +1,8 @@
-import { append_stylesheet, detach, element, get_root_for_style } from './dom';
+import { append_empty_stylesheet, detach, get_root_for_style } from './dom';
 import { raf } from './environment';
 
 interface StyleInformation {
-	style_element: HTMLStyleElement;
+	stylesheet: CSSStyleSheet;
 	rules: Record<string, true>;
 }
 
@@ -20,8 +20,8 @@ function hash(str: string) {
 	return hash >>> 0;
 }
 
-function create_style_information(doc: Document | ShadowRoot) {
-	const info = { style_element: element('style'), rules: {} };
+function create_style_information(doc: Document | ShadowRoot, node: Element & ElementCSSInlineStyle) {
+	const info = { stylesheet: append_empty_stylesheet(node), rules: {} };
 	managed_styles.set(doc, info);
 	return info;
 }
@@ -39,10 +39,9 @@ export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b:
 	const name = `__svelte_${hash(rule)}_${uid}`;
 	const doc = get_root_for_style(node);
 
-	const { style_element, rules } = managed_styles.get(doc) || create_style_information(doc);
+	const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node);
 
 	if (!rules[name]) {
-		const stylesheet = append_stylesheet(doc, style_element);
 		rules[name] = true;
 		stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
 	}
@@ -72,8 +71,9 @@ export function clear_rules() {
 	raf(() => {
 		if (active) return;
 		managed_styles.forEach(info => {
-			const { style_element } = info;
-			detach(style_element);
+			const { ownerNode } = info.stylesheet;
+			// there is no ownerNode if it runs on jsdom.
+			if (ownerNode) detach(ownerNode);
 		});
 		managed_styles.clear();
 	});
diff --git a/test/runtime-puppeteer/index.ts b/test/runtime-puppeteer/index.ts
index 8e6f813de4..62952ad9f7 100644
--- a/test/runtime-puppeteer/index.ts
+++ b/test/runtime-puppeteer/index.ts
@@ -117,8 +117,12 @@ describe('runtime (puppeteer)', function() {
 						load(id) {
 							if (id === 'main') {
 								return `
-									import SvelteComponent from ${JSON.stringify(path.join(__dirname, 'samples', dir, 'main.svelte'))};
-									import config from ${JSON.stringify(path.join(__dirname, 'samples', dir, '_config.js'))};
+									import SvelteComponent from ${JSON.stringify(
+										path.join(__dirname, 'samples', dir, 'main.svelte')
+									)};
+									import config from ${JSON.stringify(
+										path.join(__dirname, 'samples', dir, '_config.js')
+									)};
 									import * as assert from 'assert';
 
 									export default async function (target) {
@@ -140,6 +144,14 @@ describe('runtime (puppeteer)', function() {
 
 											const component = new SvelteComponent(options);
 
+											const waitUntil = async (fn, ms = 500) => {
+												const start = new Date().getTime();
+												do {
+													if (fn()) return;
+													await new Promise(resolve => window.setTimeout(resolve, 1));
+												} while (new Date().getTime() <= start + ms);
+											};
+
 											if (config.html) {
 												assert.htmlEqual(target.innerHTML, config.html);
 											}
@@ -150,6 +162,7 @@ describe('runtime (puppeteer)', function() {
 													component,
 													target,
 													window,
+													waitUntil,
 												});
 
 												component.$destroy();
diff --git a/test/runtime-puppeteer/samples/style_manager-cleanup/_config.js b/test/runtime-puppeteer/samples/style_manager-cleanup/_config.js
new file mode 100644
index 0000000000..b3a5a97e45
--- /dev/null
+++ b/test/runtime-puppeteer/samples/style_manager-cleanup/_config.js
@@ -0,0 +1,17 @@
+export default {
+	skip_if_ssr: true,
+	skip_if_hydrate: true,
+	skip_if_hydrate_from_ssr: true,
+	test: async ({ component, assert, window, waitUntil }) => {
+		assert.htmlEqual(window.document.head.innerHTML, '');
+		component.visible = true;
+		assert.htmlEqual(window.document.head.innerHTML, '<style></style>');
+		await waitUntil(() => window.document.head.innerHTML === '');
+		assert.htmlEqual(window.document.head.innerHTML, '');
+
+		component.visible = false;
+		assert.htmlEqual(window.document.head.innerHTML, '<style></style>');
+		await waitUntil(() => window.document.head.innerHTML === '');
+		assert.htmlEqual(window.document.head.innerHTML, '');
+	}
+};
diff --git a/test/runtime-puppeteer/samples/style_manager-cleanup/main.svelte b/test/runtime-puppeteer/samples/style_manager-cleanup/main.svelte
new file mode 100644
index 0000000000..ab13073b1e
--- /dev/null
+++ b/test/runtime-puppeteer/samples/style_manager-cleanup/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 10,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
diff --git a/test/runtime-puppeteer/samples/transition-css-out-in/_config.js b/test/runtime-puppeteer/samples/transition-css-out-in/_config.js
new file mode 100644
index 0000000000..a50d28b257
--- /dev/null
+++ b/test/runtime-puppeteer/samples/transition-css-out-in/_config.js
@@ -0,0 +1,14 @@
+export default {
+	test: async ({ assert, component, window, waitUntil }) => {
+		component.visible = true;
+		await waitUntil(() => window.document.head.querySelector('style').sheet.rules.length === 2);
+		assert.equal(window.document.head.querySelector('style').sheet.rules.length, 2);
+		await waitUntil(() => window.document.head.querySelector('style') === null);
+		assert.equal(window.document.head.querySelector('style'), null);
+		component.visible = false;
+		await waitUntil(() => window.document.head.querySelector('style').sheet.rules.length === 2);
+		assert.equal(window.document.head.querySelector('style').sheet.rules.length, 2);
+		await waitUntil(() => window.document.head.querySelector('style') === null);
+		assert.equal(window.document.head.querySelector('style'), null);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/transition-css-out-in/main.svelte b/test/runtime-puppeteer/samples/transition-css-out-in/main.svelte
new file mode 100644
index 0000000000..3ee93f0b55
--- /dev/null
+++ b/test/runtime-puppeteer/samples/transition-css-out-in/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 10,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
+
+{#if !visible}
+	<div transition:foo></div>
+{/if}
diff --git a/test/runtime/samples/style_manager-cleanup/_config.js b/test/runtime/samples/style_manager-cleanup/_config.js
deleted file mode 100644
index 7609d76cf2..0000000000
--- a/test/runtime/samples/style_manager-cleanup/_config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export default {
-	skip_if_ssr: true,
-	skip_if_hydrate: true,
-	skip_if_hydrate_from_ssr: true,
-	test({ raf, assert, component, window }) {
-		component.visible = true;
-		raf.tick(100);
-		component.visible = false;
-		raf.tick(200);
-		raf.tick(0);
-
-		assert.htmlEqual(window.document.head.innerHTML, '');
-	}
-};
diff --git a/test/runtime/samples/style_manager-cleanup/main.svelte b/test/runtime/samples/style_manager-cleanup/main.svelte
deleted file mode 100644
index c2ccdc7c09..0000000000
--- a/test/runtime/samples/style_manager-cleanup/main.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-    export let visible = false;
-    
-    function foo() {
-        return {
-            duration: 100,
-            css: () => ''
-        };
-    }
-    </script>
-    
-    {#if visible}
-        <div transition:foo></div>
-    {/if}
\ No newline at end of file

From 24aff3032d7af26162fb6a319b07131d21739e9c Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 8 Sep 2022 16:52:21 -0400
Subject: [PATCH 034/145] -> v3.50.1

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18c0b63d06..a90eb4aa3d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,8 +1,9 @@
 # Svelte changelog
 
-## Unreleased
+## 3.50.1
 
-* Add all global objects / functions ([#3805](https://github.com/sveltejs/svelte/issues/3805), [#7223](https://github.com/sveltejs/svelte/issues/7223))
+* Add all global objects and functions as known globals ([#3805](https://github.com/sveltejs/svelte/issues/3805), [#7223](https://github.com/sveltejs/svelte/issues/7223))
+* Fix regression with style manager ([#7828](https://github.com/sveltejs/svelte/issues/7828))
 
 ## 3.50.0
 
diff --git a/package-lock.json b/package-lock.json
index 8beef8470a..23ccc6b66f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.50.0",
+  "version": "3.50.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 3e22d8b627..836fa33267 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.50.0",
+  "version": "3.50.1",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From 7ac3854613ebad0b30a1d1b8dc0a2a34542a8de5 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Sat, 10 Sep 2022 14:00:50 -0700
Subject: [PATCH 035/145] [docs] remove beta label from SvelteKit mention
 (#7853)

---
 site/content/faq/900-is-there-a-router.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/faq/900-is-there-a-router.md b/site/content/faq/900-is-there-a-router.md
index 9d50bbe490..2f11e0e626 100644
--- a/site/content/faq/900-is-there-a-router.md
+++ b/site/content/faq/900-is-there-a-router.md
@@ -2,7 +2,7 @@
 question: Is there a router?
 ---
 
-The official routing library is [SvelteKit](https://kit.svelte.dev/), which is currently in beta. SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.
+The official routing library is [SvelteKit](https://kit.svelte.dev/). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.
 
 However, you can use any router lib you want. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar. And [universal-router](https://github.com/kriasoft/universal-router), which is isomorphic with child routes, but without built-in history support.
 

From 8ffc8fd77bf667fdf41bb1f08ed4d1da6641320f Mon Sep 17 00:00:00 2001
From: Maximiliano Ruani <maxi.ruani@hotmail.com>
Date: Sun, 11 Sep 2022 15:35:17 -0300
Subject: [PATCH 036/145] [fix] Fix hydration duplicate `svelte:head` tag issue
 with `@html` expressions and nested components (#7745)

* Fix hydration duplicate `svelte:head` tag issue with `@html` and nested components #7444 #6463

* - Changed comment style to HEAD_${head_id}_START and HEAD_${head_id}_END
- Improved claim logic
- Changed tests accordingly
---
 .../compile/render_dom/wrappers/Head.ts       |  2 +-
 .../compile/render_ssr/handlers/Element.ts    |  4 ----
 .../compile/render_ssr/handlers/Head.ts       |  2 +-
 src/runtime/internal/dom.ts                   | 21 +++++++++++++++++++
 .../head-html-and-component/HeadNested.svelte |  2 ++
 .../head-html-and-component/Nested.svelte     |  5 +++++
 .../head-html-and-component/_after.html       |  0
 .../head-html-and-component/_after_head.html  | 12 +++++++++++
 .../head-html-and-component/_before.html      |  0
 .../head-html-and-component/_before_head.html | 11 ++++++++++
 .../head-html-and-component/main.svelte       | 12 +++++++++++
 .../_after_head.html                          |  8 ++++---
 .../_before_head.html                         |  8 ++++---
 .../head-html-and-component/HeadNested.svelte |  2 ++
 .../head-html-and-component/Nested.svelte     |  5 +++++
 .../_expected-head.html                       | 11 ++++++++++
 .../head-html-and-component/_expected.html    |  0
 .../head-html-and-component/main.svelte       | 12 +++++++++++
 .../_expected-head.html                       |  8 ++++---
 19 files changed, 110 insertions(+), 15 deletions(-)
 create mode 100644 test/hydration/samples/head-html-and-component/HeadNested.svelte
 create mode 100644 test/hydration/samples/head-html-and-component/Nested.svelte
 create mode 100644 test/hydration/samples/head-html-and-component/_after.html
 create mode 100644 test/hydration/samples/head-html-and-component/_after_head.html
 create mode 100644 test/hydration/samples/head-html-and-component/_before.html
 create mode 100644 test/hydration/samples/head-html-and-component/_before_head.html
 create mode 100644 test/hydration/samples/head-html-and-component/main.svelte
 create mode 100644 test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte
 create mode 100644 test/server-side-rendering/samples/head-html-and-component/Nested.svelte
 create mode 100644 test/server-side-rendering/samples/head-html-and-component/_expected-head.html
 create mode 100644 test/server-side-rendering/samples/head-html-and-component/_expected.html
 create mode 100644 test/server-side-rendering/samples/head-html-and-component/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Head.ts b/src/compiler/compile/render_dom/wrappers/Head.ts
index e0b723d6dd..3869994ae4 100644
--- a/src/compiler/compile/render_dom/wrappers/Head.ts
+++ b/src/compiler/compile/render_dom/wrappers/Head.ts
@@ -36,7 +36,7 @@ export default class HeadWrapper extends Wrapper {
 		let nodes;
 		if (this.renderer.options.hydratable && this.fragment.nodes.length) {
 			nodes = block.get_unique_name('head_nodes');
-			block.chunks.claim.push(b`const ${nodes} = @query_selector_all('[data-svelte="${this.node.id}"]', @_document.head);`);
+			block.chunks.claim.push(b`const ${nodes} = @head_selector('${this.node.id}', @_document.head);`);
 		}
 
 		this.fragment.render(block, x`@_document.head` as unknown as Identifier, nodes);
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index 7f7672349e..2af0343b2a 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -157,10 +157,6 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 		}
 	});
 
-	if (options.hydratable && options.head_id) {
-		renderer.add_string(` data-svelte="${options.head_id}"`);
-	}
-
 	renderer.add_string('>');
 
 	if (node_contents !== undefined) {
diff --git a/src/compiler/compile/render_ssr/handlers/Head.ts b/src/compiler/compile/render_ssr/handlers/Head.ts
index cf1e6bd555..f4bb3fa118 100644
--- a/src/compiler/compile/render_ssr/handlers/Head.ts
+++ b/src/compiler/compile/render_ssr/handlers/Head.ts
@@ -12,5 +12,5 @@ export default function(node: Head, renderer: Renderer, options: RenderOptions)
 	renderer.render(node.children, head_options);
 	const result = renderer.pop();
 
-	renderer.add_expression(x`$$result.head += ${result}, ""`);
+	renderer.add_expression(x`$$result.head += '<!-- HEAD_${node.id}_START -->' + ${result} + '<!-- HEAD_${node.id}_END -->', ""`);
 }
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index e678481a5f..090b8925e1 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -646,6 +646,27 @@ export function query_selector_all(selector: string, parent: HTMLElement = docum
 	return Array.from(parent.querySelectorAll(selector)) as ChildNodeArray;
 }
 
+export function head_selector(nodeId: string, head: HTMLElement) {
+	const result = [];
+	let started = 0;
+
+	for (const node of head.childNodes) {
+		if (node.nodeType === 8 /* comment node */) {
+			const comment = node.textContent.trim();
+			if (comment === `HEAD_${nodeId}_END`) {
+				started -= 1;
+				result.push(node);
+			} else if (comment === `HEAD_${nodeId}_START`) {
+				started += 1;
+				result.push(node);
+			}
+		} else if (started > 0) {
+			result.push(node);
+		}
+	}
+	return result;
+}
+
 export class HtmlTag {
 	private is_svg = false;
 	// parent for creating node
diff --git a/test/hydration/samples/head-html-and-component/HeadNested.svelte b/test/hydration/samples/head-html-and-component/HeadNested.svelte
new file mode 100644
index 0000000000..33bbdd1fd1
--- /dev/null
+++ b/test/hydration/samples/head-html-and-component/HeadNested.svelte
@@ -0,0 +1,2 @@
+{@html '<meta name="head_nested_html" content="head_nested_html">'}
+<meta name="head_nested" content="head_nested">
diff --git a/test/hydration/samples/head-html-and-component/Nested.svelte b/test/hydration/samples/head-html-and-component/Nested.svelte
new file mode 100644
index 0000000000..28f5371910
--- /dev/null
+++ b/test/hydration/samples/head-html-and-component/Nested.svelte
@@ -0,0 +1,5 @@
+
+<svelte:head>
+	{@html '<meta name="nested_html" content="nested_html">'}
+	<meta name="nested" content="nested">
+</svelte:head>
diff --git a/test/hydration/samples/head-html-and-component/_after.html b/test/hydration/samples/head-html-and-component/_after.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/hydration/samples/head-html-and-component/_after_head.html b/test/hydration/samples/head-html-and-component/_after_head.html
new file mode 100644
index 0000000000..d7f94eda1b
--- /dev/null
+++ b/test/hydration/samples/head-html-and-component/_after_head.html
@@ -0,0 +1,12 @@
+<!-- HEAD_svelte-17ibcve_START -->
+<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
+<meta name="main" content="main">
+<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
+<meta name="head_nested" content="head_nested">
+<!-- HEAD_svelte-17ibcve_END -->
+
+<!-- HEAD_svelte-1gqzvnn_START -->
+<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
+<meta name="nested" content="nested">
+<!-- HEAD_svelte-1gqzvnn_END -->
+
diff --git a/test/hydration/samples/head-html-and-component/_before.html b/test/hydration/samples/head-html-and-component/_before.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/hydration/samples/head-html-and-component/_before_head.html b/test/hydration/samples/head-html-and-component/_before_head.html
new file mode 100644
index 0000000000..da265f414d
--- /dev/null
+++ b/test/hydration/samples/head-html-and-component/_before_head.html
@@ -0,0 +1,11 @@
+<!-- HEAD_svelte-17ibcve_START -->
+<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
+<meta name="main" content="main">
+<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
+<meta name="head_nested" content="head_nested">
+<!-- HEAD_svelte-17ibcve_END -->
+
+<!-- HEAD_svelte-1gqzvnn_START -->
+<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
+<meta name="nested" content="nested">
+<!-- HEAD_svelte-1gqzvnn_END -->
diff --git a/test/hydration/samples/head-html-and-component/main.svelte b/test/hydration/samples/head-html-and-component/main.svelte
new file mode 100644
index 0000000000..188ecace6b
--- /dev/null
+++ b/test/hydration/samples/head-html-and-component/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import HeadNested from './HeadNested.svelte';
+	import Nested from './Nested.svelte';
+</script>
+
+<svelte:head>
+	{@html '<meta name="main_html" content="main_html">'}
+	<meta name="main" content="main">
+	<HeadNested />
+</svelte:head>
+
+<Nested/>
diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html b/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html
index be7a01ba4f..bdd08c32f5 100644
--- a/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html
+++ b/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html
@@ -1,4 +1,6 @@
 <title>Some Title</title>
-<link href="/" rel="canonical">
-<meta content="some description" name="description">
-<meta content="some keywords" name="keywords">
+<!-- HEAD_svelte-1s8aodm_START -->
+<link rel="canonical" href="/">
+<meta name="description" content="some description">
+<meta name="keywords" content="some keywords">
+<!-- HEAD_svelte-1s8aodm_END -->
diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html b/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
index 107753cdd0..bdd08c32f5 100644
--- a/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
+++ b/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
@@ -1,4 +1,6 @@
 <title>Some Title</title>
-<link rel="canonical" href="/" data-svelte="svelte-1s8aodm">
-<meta name="description" content="some description" data-svelte="svelte-1s8aodm">
-<meta name="keywords" content="some keywords" data-svelte="svelte-1s8aodm">
\ No newline at end of file
+<!-- HEAD_svelte-1s8aodm_START -->
+<link rel="canonical" href="/">
+<meta name="description" content="some description">
+<meta name="keywords" content="some keywords">
+<!-- HEAD_svelte-1s8aodm_END -->
diff --git a/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte b/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte
new file mode 100644
index 0000000000..33bbdd1fd1
--- /dev/null
+++ b/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte
@@ -0,0 +1,2 @@
+{@html '<meta name="head_nested_html" content="head_nested_html">'}
+<meta name="head_nested" content="head_nested">
diff --git a/test/server-side-rendering/samples/head-html-and-component/Nested.svelte b/test/server-side-rendering/samples/head-html-and-component/Nested.svelte
new file mode 100644
index 0000000000..28f5371910
--- /dev/null
+++ b/test/server-side-rendering/samples/head-html-and-component/Nested.svelte
@@ -0,0 +1,5 @@
+
+<svelte:head>
+	{@html '<meta name="nested_html" content="nested_html">'}
+	<meta name="nested" content="nested">
+</svelte:head>
diff --git a/test/server-side-rendering/samples/head-html-and-component/_expected-head.html b/test/server-side-rendering/samples/head-html-and-component/_expected-head.html
new file mode 100644
index 0000000000..da265f414d
--- /dev/null
+++ b/test/server-side-rendering/samples/head-html-and-component/_expected-head.html
@@ -0,0 +1,11 @@
+<!-- HEAD_svelte-17ibcve_START -->
+<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
+<meta name="main" content="main">
+<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
+<meta name="head_nested" content="head_nested">
+<!-- HEAD_svelte-17ibcve_END -->
+
+<!-- HEAD_svelte-1gqzvnn_START -->
+<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
+<meta name="nested" content="nested">
+<!-- HEAD_svelte-1gqzvnn_END -->
diff --git a/test/server-side-rendering/samples/head-html-and-component/_expected.html b/test/server-side-rendering/samples/head-html-and-component/_expected.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/server-side-rendering/samples/head-html-and-component/main.svelte b/test/server-side-rendering/samples/head-html-and-component/main.svelte
new file mode 100644
index 0000000000..188ecace6b
--- /dev/null
+++ b/test/server-side-rendering/samples/head-html-and-component/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import HeadNested from './HeadNested.svelte';
+	import Nested from './Nested.svelte';
+</script>
+
+<svelte:head>
+	{@html '<meta name="main_html" content="main_html">'}
+	<meta name="main" content="main">
+	<HeadNested />
+</svelte:head>
+
+<Nested/>
diff --git a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html
index 107753cdd0..bdd08c32f5 100644
--- a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html
+++ b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html
@@ -1,4 +1,6 @@
 <title>Some Title</title>
-<link rel="canonical" href="/" data-svelte="svelte-1s8aodm">
-<meta name="description" content="some description" data-svelte="svelte-1s8aodm">
-<meta name="keywords" content="some keywords" data-svelte="svelte-1s8aodm">
\ No newline at end of file
+<!-- HEAD_svelte-1s8aodm_START -->
+<link rel="canonical" href="/">
+<meta name="description" content="some description">
+<meta name="keywords" content="some keywords">
+<!-- HEAD_svelte-1s8aodm_END -->

From adcaa3c0503cacd7b61129bfebba8972cc49b661 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 02:41:18 +0800
Subject: [PATCH 037/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a90eb4aa3d..9612c8c53f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* 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))
+
 ## 3.50.1
 
 * Add all global objects and functions as known globals ([#3805](https://github.com/sveltejs/svelte/issues/3805), [#7223](https://github.com/sveltejs/svelte/issues/7223))

From 1e2a55c88e753cefc6acc668c83fee6cdbc70f31 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Mon, 12 Sep 2022 03:48:13 +0900
Subject: [PATCH 038/145] throw warning instead of error (#7834)

---
 src/runtime/internal/dev.ts                            |  4 +++-
 .../dynamic-element-void-with-content-1/_config.js     |  2 +-
 .../dynamic-element-void-with-content-2/_config.js     |  2 +-
 .../dynamic-element-void-with-content-3/_config.js     |  2 +-
 .../dynamic-element-void-with-content-5/_config.js     |  6 ++++++
 .../dynamic-element-void-with-content-5/main.svelte    | 10 ++++++++++
 6 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-5/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-5/main.svelte

diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
index df40f94230..02677172fa 100644
--- a/src/runtime/internal/dev.ts
+++ b/src/runtime/internal/dev.ts
@@ -117,7 +117,9 @@ export function validate_dynamic_element(tag: unknown) {
 
 export function validate_void_dynamic_element(tag: undefined | string) {
 	if (tag && is_void(tag)) {
-		throw new Error(`<svelte:element this="${tag}"> is self-closing and cannot have content.`);
+		console.warn(
+			`<svelte:element this="${tag}"> is self-closing and cannot have content.`
+		);
 	}
 }
 
diff --git a/test/runtime/samples/dynamic-element-void-with-content-1/_config.js b/test/runtime/samples/dynamic-element-void-with-content-1/_config.js
index 4016725e21..2888a8437b 100644
--- a/test/runtime/samples/dynamic-element-void-with-content-1/_config.js
+++ b/test/runtime/samples/dynamic-element-void-with-content-1/_config.js
@@ -5,5 +5,5 @@ export default {
 	props: {
 		tag: 'br'
 	},
-	error: '<svelte:element this="br"> is self-closing and cannot have content.'
+	warnings: ['<svelte:element this="br"> is self-closing and cannot have content.']
 };
diff --git a/test/runtime/samples/dynamic-element-void-with-content-2/_config.js b/test/runtime/samples/dynamic-element-void-with-content-2/_config.js
index 4016725e21..2888a8437b 100644
--- a/test/runtime/samples/dynamic-element-void-with-content-2/_config.js
+++ b/test/runtime/samples/dynamic-element-void-with-content-2/_config.js
@@ -5,5 +5,5 @@ export default {
 	props: {
 		tag: 'br'
 	},
-	error: '<svelte:element this="br"> is self-closing and cannot have content.'
+	warnings: ['<svelte:element this="br"> is self-closing and cannot have content.']
 };
diff --git a/test/runtime/samples/dynamic-element-void-with-content-3/_config.js b/test/runtime/samples/dynamic-element-void-with-content-3/_config.js
index 4016725e21..2888a8437b 100644
--- a/test/runtime/samples/dynamic-element-void-with-content-3/_config.js
+++ b/test/runtime/samples/dynamic-element-void-with-content-3/_config.js
@@ -5,5 +5,5 @@ export default {
 	props: {
 		tag: 'br'
 	},
-	error: '<svelte:element this="br"> is self-closing and cannot have content.'
+	warnings: ['<svelte:element this="br"> is self-closing and cannot have content.']
 };
diff --git a/test/runtime/samples/dynamic-element-void-with-content-5/_config.js b/test/runtime/samples/dynamic-element-void-with-content-5/_config.js
new file mode 100644
index 0000000000..6e56f6bdba
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-5/_config.js
@@ -0,0 +1,6 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	warnings: ['<svelte:element this="input"> is self-closing and cannot have content.']
+};
diff --git a/test/runtime/samples/dynamic-element-void-with-content-5/main.svelte b/test/runtime/samples/dynamic-element-void-with-content-5/main.svelte
new file mode 100644
index 0000000000..990772b1e6
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-5/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	const tags = [{ t: 'div', content: 'hello world' }, { t: 'input' }];
+</script>
+
+{#each tags as tag}
+	{tag.t} <br />
+	<svelte:element this={tag.t}>
+		{#if tag.t !== 'input'}{tag.content}{/if}
+	</svelte:element>
+{/each}

From 2f6afefab053a52b8dac31aee35635df837c8f61 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 02:49:22 +0800
Subject: [PATCH 039/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9612c8c53f..1d8ad6f630 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,8 @@
 ## Unreleased
 
 * 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))
+
 
 ## 3.50.1
 

From a5ca0ad65be5b79c51c9653f1ec16e84fbabba24 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Mon, 12 Sep 2022 04:03:02 +0900
Subject: [PATCH 040/145] [fix] added support for inert (remove duplicated
 code) (#7785)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: added support for inert

* remove duplicated boolean_attributes

Co-authored-by: Gautier Ben Aïm <48261497+GauBen@users.noreply.github.com>
---
 .../render_dom/wrappers/Element/Attribute.ts  | 32 ++-----------------
 src/shared/boolean_attributes.ts              |  2 ++
 2 files changed, 4 insertions(+), 30 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index 7b6aed0d5a..21a44ab92a 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -9,6 +9,7 @@ import Text from '../../../nodes/Text';
 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';
 
 const non_textlike_input_types = new Set([
 	'button',
@@ -255,7 +256,7 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 
 	get_value(block) {
 		if (this.node.is_true) {
-			if (this.metadata && boolean_attribute.has(this.metadata.property_name.toLowerCase())) {
+			if (this.metadata && boolean_attributes.has(this.metadata.property_name.toLowerCase())) {
 				return x`true`;
 			}
 			return x`""`;
@@ -376,35 +377,6 @@ Object.keys(attribute_lookup).forEach(name => {
 	if (!metadata.property_name) metadata.property_name = name;
 });
 
-// source: https://html.spec.whatwg.org/multipage/indices.html
-const boolean_attribute = new Set([
-	'allowfullscreen',
-	'allowpaymentrequest',
-	'async',
-	'autofocus',
-	'autoplay',
-	'checked',
-	'controls',
-	'default',
-	'defer',
-	'disabled',
-	'formnovalidate',
-	'hidden',
-	'ismap',
-	'itemscope',
-	'loop',
-	'multiple',
-	'muted',
-	'nomodule',
-	'novalidate',
-	'open',
-	'playsinline',
-	'readonly',
-	'required',
-	'reversed',
-	'selected'
-]);
-
 function should_cache(attribute: AttributeWrapper) {
 	return attribute.is_src || attribute.node.should_cache();
 }
diff --git a/src/shared/boolean_attributes.ts b/src/shared/boolean_attributes.ts
index 4520a2064e..e29f921e32 100644
--- a/src/shared/boolean_attributes.ts
+++ b/src/shared/boolean_attributes.ts
@@ -12,7 +12,9 @@ export const boolean_attributes = new Set([
 	'disabled',
 	'formnovalidate',
 	'hidden',
+	'inert',
 	'ismap',
+	'itemscope',
 	'loop',
 	'multiple',
 	'muted',

From 78a249be36b1fa75a59755452554a531d0d4194a Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 03:04:47 +0800
Subject: [PATCH 041/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d8ad6f630..711e8a3d90 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * 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))
 
 
 ## 3.50.1

From e2ef2b8731a897b36d81d130c78cd4a9019aa41f Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sun, 11 Sep 2022 21:14:47 +0200
Subject: [PATCH 042/145] apply class for dynamic elements (#7652)

---
 src/compiler/compile/css/Selector.ts          |  2 +-
 .../samples/dynamic-element-tag/_config.js    |  3 ++
 .../samples/dynamic-element-tag/expected.css  |  1 +
 .../samples/dynamic-element-tag/expected.html |  4 +++
 .../samples/dynamic-element-tag/input.svelte  | 32 +++++++++++++++++++
 5 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 test/css/samples/dynamic-element-tag/_config.js
 create mode 100644 test/css/samples/dynamic-element-tag/expected.css
 create mode 100644 test/css/samples/dynamic-element-tag/expected.html
 create mode 100644 test/css/samples/dynamic-element-tag/input.svelte

diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index d61ba1f510..17302c4abd 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -311,7 +311,7 @@ function block_might_apply_to_node(block: Block, node: Element): BlockAppliesToN
 				return BlockAppliesToNode.NotPossible;
 			}
 		} else if (selector.type === 'TypeSelector') {
-			if (node.name.toLowerCase() !== name.toLowerCase() && name !== '*') return BlockAppliesToNode.NotPossible;
+			if (node.name.toLowerCase() !== name.toLowerCase() && name !== '*' && !node.is_dynamic_element) return BlockAppliesToNode.NotPossible;
 		} else {
 			return BlockAppliesToNode.UnknownSelectorType;
 		}
diff --git a/test/css/samples/dynamic-element-tag/_config.js b/test/css/samples/dynamic-element-tag/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/dynamic-element-tag/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/dynamic-element-tag/expected.css b/test/css/samples/dynamic-element-tag/expected.css
new file mode 100644
index 0000000000..6af254e948
--- /dev/null
+++ b/test/css/samples/dynamic-element-tag/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz>p.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz span.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz>span.svelte-xyz>b.svelte-xyz{color:red}h2.svelte-xyz span b.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz b.svelte-xyz.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/dynamic-element-tag/expected.html b/test/css/samples/dynamic-element-tag/expected.html
new file mode 100644
index 0000000000..509ad1d839
--- /dev/null
+++ b/test/css/samples/dynamic-element-tag/expected.html
@@ -0,0 +1,4 @@
+<div class="svelte-xyz"></div>
+<h2 class="svelte-xyz">
+	<div class="svelte-xyz"><b class="svelte-xyz">text</b></div>
+</h2>
diff --git a/test/css/samples/dynamic-element-tag/input.svelte b/test/css/samples/dynamic-element-tag/input.svelte
new file mode 100644
index 0000000000..6e8851b3f9
--- /dev/null
+++ b/test/css/samples/dynamic-element-tag/input.svelte
@@ -0,0 +1,32 @@
+<script>
+	export let element = 'div';
+</script>
+
+<svelte:element this={element} />
+
+<h2>
+	<svelte:element this={element}>
+		<b>text</b>
+	</svelte:element>
+</h2>
+
+<style>
+	div {
+		color: red;
+	}
+	h2 > p {
+		color: red;
+	}
+	h2 span {
+		color: red;
+	}
+	h2 > span > b {
+		color: red;
+	}
+	h2 span b {
+		color: red;
+	}
+	h2 b {
+		color: red;
+	}
+</style>

From 1afcfd2b5f30216164c582d703eb29a6ad4bd831 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 03:15:45 +0800
Subject: [PATCH 043/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 711e8a3d90..25d819449d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * 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))
 
 
 ## 3.50.1

From 6ec8ecf7999ad74ce8cf735a98adca630f9de105 Mon Sep 17 00:00:00 2001
From: Mathias Picker <48158184+MathiasWP@users.noreply.github.com>
Date: Sun, 11 Sep 2022 21:22:17 +0200
Subject: [PATCH 044/145] [fix] render of svg elements when using
 svelte:element (#7695)

* fixed render statement for svg when using  svelte:element

* removed unecessary stuff in test
---
 .../render_dom/wrappers/Element/index.ts      |   4 +-
 .../js/samples/svelte-element-svg/expected.js | 111 ++++++++++++++++++
 .../samples/svelte-element-svg/input.svelte   |   3 +
 3 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 test/js/samples/svelte-element-svg/expected.js
 create mode 100644 test/js/samples/svelte-element-svg/input.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 8e8e0d6706..531208c476 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -504,9 +504,10 @@ export default class ElementWrapper extends Wrapper {
 
 	get_render_statement(block: Block) {
 		const { name, namespace, tag_expr } = this.node;
+		const reference = tag_expr.manipulate(block);
 
 		if (namespace === namespaces.svg) {
-			return x`@svg_element("${name}")`;
+			return x`@svg_element(${reference})`;
 		}
 
 		if (namespace) {
@@ -518,7 +519,6 @@ export default class ElementWrapper extends Wrapper {
 			return x`@element_is("${name}", ${is.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`)})`;
 		}
 
-		const reference = tag_expr.manipulate(block);
 		return x`@element(${reference})`;
 	}
 
diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js
new file mode 100644
index 0000000000..f9ca24ff30
--- /dev/null
+++ b/test/js/samples/svelte-element-svg/expected.js
@@ -0,0 +1,111 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	assign,
+	detach,
+	empty,
+	get_spread_update,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_svg_attributes,
+	svg_element
+} from "svelte/internal";
+
+function create_dynamic_element_1(ctx) {
+	return { c: noop, m: noop, p: noop, d: noop };
+}
+
+// (1:0) <svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
+function create_dynamic_element(ctx) {
+	let svelte_element1;
+	let svelte_element0;
+	let svelte_element0_levels = [{ xmlns: "http://www.w3.org/2000/svg" }];
+	let svelte_element0_data = {};
+
+	for (let i = 0; i < svelte_element0_levels.length; i += 1) {
+		svelte_element0_data = assign(svelte_element0_data, svelte_element0_levels[i]);
+	}
+
+	let svelte_element1_levels = [{ xmlns: "http://www.w3.org/2000/svg" }];
+	let svelte_element1_data = {};
+
+	for (let i = 0; i < svelte_element1_levels.length; i += 1) {
+		svelte_element1_data = assign(svelte_element1_data, svelte_element1_levels[i]);
+	}
+
+	return {
+		c() {
+			svelte_element1 = svg_element("svg");
+			svelte_element0 = svg_element("path");
+			set_svg_attributes(svelte_element0, svelte_element0_data);
+			set_svg_attributes(svelte_element1, svelte_element1_data);
+		},
+		m(target, anchor) {
+			insert(target, svelte_element1, anchor);
+			append(svelte_element1, svelte_element0);
+		},
+		p(ctx, dirty) {
+			set_svg_attributes(svelte_element0, svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
+			set_svg_attributes(svelte_element1, svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
+		},
+		d(detaching) {
+			if (detaching) detach(svelte_element1);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let previous_tag = "svg";
+	let svelte_element1_anchor;
+	let svelte_element1 = "svg" && create_dynamic_element(ctx);
+
+	return {
+		c() {
+			if (svelte_element1) svelte_element1.c();
+			svelte_element1_anchor = empty();
+		},
+		m(target, anchor) {
+			if (svelte_element1) svelte_element1.m(target, anchor);
+			insert(target, svelte_element1_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if ("svg") {
+				if (!previous_tag) {
+					svelte_element1 = create_dynamic_element(ctx);
+					svelte_element1.c();
+					svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor);
+				} else if (safe_not_equal(previous_tag, "svg")) {
+					svelte_element1.d(1);
+					svelte_element1 = create_dynamic_element(ctx);
+					svelte_element1.c();
+					svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor);
+				} else {
+					svelte_element1.p(ctx, dirty);
+				}
+			} else if (previous_tag) {
+				svelte_element1.d(1);
+				svelte_element1 = null;
+			}
+
+			previous_tag = "svg";
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(svelte_element1_anchor);
+			if (svelte_element1) svelte_element1.d(detaching);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/svelte-element-svg/input.svelte b/test/js/samples/svelte-element-svg/input.svelte
new file mode 100644
index 0000000000..2dc4d54814
--- /dev/null
+++ b/test/js/samples/svelte-element-svg/input.svelte
@@ -0,0 +1,3 @@
+<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
+    <svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element>
+</svelte:element>
\ No newline at end of file

From 87f0c461a84ae64ccd2d246e775b6deefc4150b9 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 03:23:12 +0800
Subject: [PATCH 045/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25d819449d..066df51b00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * 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))
 
 
 ## 3.50.1

From 78b81277e7bbce3bad5f287312d22ce5dc339d2e Mon Sep 17 00:00:00 2001
From: Vaibhav Rai <raivaibhav08@gmail.com>
Date: Mon, 12 Sep 2022 00:58:30 +0530
Subject: [PATCH 046/145] [fix]: Warn user when binding rest operator (#7526)

* Fix 6860: Warn user when binding rest operator

* move the binding validation to Binding node

* update test

Co-authored-by: vaibhav rai <vaibhavrai@vaibhavs-MacBook-Pro.local>

* add more test case, supporting deep destructuring and array destructuring

Co-authored-by: vaibhav rai <vaibhavrai@vaibhavs-MacBook-Pro.local>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/compiler_warnings.ts     |  6 ++++-
 src/compiler/compile/nodes/AwaitBlock.ts      |  6 +++--
 src/compiler/compile/nodes/Binding.ts         | 14 +++++++++++
 src/compiler/compile/nodes/ConstTag.ts        |  5 +++-
 src/compiler/compile/nodes/EachBlock.ts       |  6 ++---
 src/compiler/compile/nodes/shared/Context.ts  | 25 +++++++++++++------
 .../rest-eachblock-binding-2/input.svelte     | 11 ++++++++
 .../rest-eachblock-binding-2/warnings.json    |  9 +++++++
 .../rest-eachblock-binding-3/input.svelte     |  8 ++++++
 .../rest-eachblock-binding-3/warnings.json    |  9 +++++++
 .../rest-eachblock-binding/input.svelte       |  8 ++++++
 .../rest-eachblock-binding/warnings.json      |  9 +++++++
 12 files changed, 102 insertions(+), 14 deletions(-)
 create mode 100644 test/validator/samples/rest-eachblock-binding-2/input.svelte
 create mode 100644 test/validator/samples/rest-eachblock-binding-2/warnings.json
 create mode 100644 test/validator/samples/rest-eachblock-binding-3/input.svelte
 create mode 100644 test/validator/samples/rest-eachblock-binding-3/warnings.json
 create mode 100644 test/validator/samples/rest-eachblock-binding/input.svelte
 create mode 100644 test/validator/samples/rest-eachblock-binding/warnings.json

diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 5fc5faa8f1..b3e2e36797 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -186,5 +186,9 @@ export default {
 	redundant_event_modifier_passive: {
 		code: 'redundant-event-modifier',
 		message: 'The passive modifier only works with wheel and touch events'
-	}
+	},
+	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`
+	})
 };
diff --git a/src/compiler/compile/nodes/AwaitBlock.ts b/src/compiler/compile/nodes/AwaitBlock.ts
index 735fdbfff3..4a669b6365 100644
--- a/src/compiler/compile/nodes/AwaitBlock.ts
+++ b/src/compiler/compile/nodes/AwaitBlock.ts
@@ -23,6 +23,8 @@ export default class AwaitBlock extends Node {
 	then: ThenBlock;
 	catch: CatchBlock;
 
+	context_rest_properties: Map<string, ESTreeNode> = new Map();
+
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
 
@@ -33,12 +35,12 @@ export default class AwaitBlock extends Node {
 
 		if (this.then_node) {
 			this.then_contexts = [];
-			unpack_destructuring({ contexts: this.then_contexts, node: info.value, scope, component });
+			unpack_destructuring({ contexts: this.then_contexts, node: info.value, scope, component, context_rest_properties: this.context_rest_properties });
 		}
 
 		if (this.catch_node) {
 			this.catch_contexts = [];
-			unpack_destructuring({ contexts: this.catch_contexts, node: info.error, scope, component });
+			unpack_destructuring({ contexts: this.catch_contexts, node: info.error, scope, component, context_rest_properties: this.context_rest_properties });
 		}
 
 		this.pending = new PendingBlock(component, this, scope, info.pending);
diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
index 39f6fa374e..594490a5fb 100644
--- a/src/compiler/compile/nodes/Binding.ts
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -11,6 +11,7 @@ import InlineComponent from './InlineComponent';
 import Window from './Window';
 import { clone } from '../../utils/clone';
 import compiler_errors from '../compiler_errors';
+import compiler_warnings from '../compiler_warnings';
 
 // TODO this should live in a specific binding
 const read_only_media_attributes = new Set([
@@ -47,6 +48,7 @@ export default class Binding extends Node {
 		const { name } = get_object(this.expression.node);
 
 		this.is_contextual = Array.from(this.expression.references).some(name => scope.names.has(name));
+		if (this.is_contextual) this.validate_binding_rest_properties(scope);
 
 		// make sure we track this as a mutable ref
 		if (scope.is_let(name)) {
@@ -95,6 +97,18 @@ export default class Binding extends Node {
 	is_readonly_media_attribute() {
 		return read_only_media_attributes.has(this.name);
 	}
+
+	validate_binding_rest_properties(scope: TemplateScope) {
+		this.expression.references.forEach(name => {
+			const each_block = scope.get_owner(name);
+			if (each_block && each_block.type === 'EachBlock') {
+				const rest_node = each_block.context_rest_properties.get(name);
+				if (rest_node) {
+					this.component.warn(rest_node as any, compiler_warnings.invalid_rest_eachblock_binding(name));
+				}
+			}
+		});
+	}
 }
 
 function isElement(node: Node): node is Element {
diff --git a/src/compiler/compile/nodes/ConstTag.ts b/src/compiler/compile/nodes/ConstTag.ts
index 87a9039008..44a50aa005 100644
--- a/src/compiler/compile/nodes/ConstTag.ts
+++ b/src/compiler/compile/nodes/ConstTag.ts
@@ -10,6 +10,7 @@ import { extract_identifiers } from 'periscopic';
 import is_reference, { NodeWithPropertyDefinition } from 'is-reference';
 import get_object from '../utils/get_object';
 import compiler_errors from '../compiler_errors';
+import { Node as ESTreeNode } from 'estree';
 
 const allowed_parents = new Set(['EachBlock', 'CatchBlock', 'ThenBlock', 'InlineComponent', 'SlotTemplate', 'IfBlock', 'ElseBlock']);
 
@@ -19,6 +20,7 @@ export default class ConstTag extends Node {
 	contexts: Context[] = [];
 	node: ConstTagType;
 	scope: TemplateScope;
+	context_rest_properties: Map<string, ESTreeNode> = new Map();
 
 	assignees: Set<string> = new Set();
   dependencies: Set<string> = new Set();
@@ -58,7 +60,8 @@ export default class ConstTag extends Node {
 			contexts: this.contexts,
 			node: this.node.expression.left,
 			scope: this.scope,
-			component: this.component
+			component: this.component,
+			context_rest_properties: this.context_rest_properties
 		});
 		this.expression = new Expression(this.component, this, this.scope, this.node.expression.right);
 		this.contexts.forEach(context => {
diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts
index bea6fb7910..4a5ea19e37 100644
--- a/src/compiler/compile/nodes/EachBlock.ts
+++ b/src/compiler/compile/nodes/EachBlock.ts
@@ -28,7 +28,7 @@ export default class EachBlock extends AbstractBlock {
 	has_animation: boolean;
 	has_binding = false;
 	has_index_binding = false;
-
+	context_rest_properties: Map<string, Node>;
 	else?: ElseBlock;
 
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
@@ -40,9 +40,9 @@ export default class EachBlock extends AbstractBlock {
 		this.index = info.index;
 
 		this.scope = scope.child();
-
+		this.context_rest_properties = new Map();
 		this.contexts = [];
-		unpack_destructuring({ contexts: this.contexts, node: info.context, scope, component });
+		unpack_destructuring({ contexts: this.contexts, node: info.context, scope, component, context_rest_properties: this.context_rest_properties });
 
 		this.contexts.forEach(context => {
 			this.scope.add(context.key.name, this.expression.dependencies, this);
diff --git a/src/compiler/compile/nodes/shared/Context.ts b/src/compiler/compile/nodes/shared/Context.ts
index 670f0531e6..47180d24cd 100644
--- a/src/compiler/compile/nodes/shared/Context.ts
+++ b/src/compiler/compile/nodes/shared/Context.ts
@@ -20,7 +20,8 @@ export function unpack_destructuring({
 	modifier = (node) => node,
 	default_modifier = (node) => node,
 	scope,
-	component
+	component,
+	context_rest_properties
 }: {
 	contexts: Context[];
 	node: Node;
@@ -28,6 +29,7 @@ export function unpack_destructuring({
 	default_modifier?: Context['default_modifier'];
 	scope: TemplateScope;
 	component: Component;
+	context_rest_properties: Map<string, Node>;
 }) {
 	if (!node) return;
 
@@ -43,6 +45,7 @@ export function unpack_destructuring({
 			modifier,
 			default_modifier
 		});
+		context_rest_properties.set((node.argument as Identifier).name, node);
 	} else if (node.type === 'ArrayPattern') {
 		node.elements.forEach((element, i) => {
 			if (element && element.type === 'RestElement') {
@@ -52,8 +55,10 @@ export function unpack_destructuring({
 					modifier: (node) => x`${modifier(node)}.slice(${i})` as Node,
 					default_modifier,
 					scope,
-					component
+					component,
+					context_rest_properties
 				});
+				context_rest_properties.set((element.argument as Identifier).name, element);
 			} else if (element && element.type === 'AssignmentPattern') {
 				const n = contexts.length;
 				mark_referenced(element.right, scope, component);
@@ -70,7 +75,8 @@ export function unpack_destructuring({
 							to_ctx
 						)}` as Node,
 					scope,
-					component
+					component,
+					context_rest_properties
 				});
 			} else {
 				unpack_destructuring({
@@ -79,7 +85,8 @@ export function unpack_destructuring({
 					modifier: (node) => x`${modifier(node)}[${i}]` as Node,
 					default_modifier,
 					scope,
-					component
+					component,
+					context_rest_properties
 				});
 			}
 		});
@@ -97,8 +104,10 @@ export function unpack_destructuring({
 						)}, [${used_properties}])` as Node,
 					default_modifier,
 					scope,
-					component
+					component,
+					context_rest_properties
 				});
+				context_rest_properties.set((property.argument as Identifier).name, property);
 			} else {
 				const key = property.key as Identifier;
 				const value = property.value;
@@ -121,7 +130,8 @@ export function unpack_destructuring({
 								to_ctx
 							)}` as Node,
 						scope,
-						component
+						component,
+						context_rest_properties
 					});
 				} else {
 					unpack_destructuring({
@@ -130,7 +140,8 @@ export function unpack_destructuring({
 						modifier: (node) => x`${modifier(node)}.${key.name}` as Node,
 						default_modifier,
 						scope,
-						component
+						component,
+						context_rest_properties
 					});
 				}
 			}
diff --git a/test/validator/samples/rest-eachblock-binding-2/input.svelte b/test/validator/samples/rest-eachblock-binding-2/input.svelte
new file mode 100644
index 0000000000..d92557673b
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding-2/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	let objArray = [
+		[1, 2, 3, "4"],
+		[5, 6, 7, "8"],
+	];
+</script>
+
+{#each objArray as [id, ...rest] (id)}
+	<input bind:value={rest[0]} type="text" placeholder={rest[2]} />
+	<br />
+{/each}
diff --git a/test/validator/samples/rest-eachblock-binding-2/warnings.json b/test/validator/samples/rest-eachblock-binding-2/warnings.json
new file mode 100644
index 0000000000..a55e08ac05
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding-2/warnings.json
@@ -0,0 +1,9 @@
+[
+  {
+    "code": "invalid-rest-eachblock-binding",
+    "message": "...rest operator will create a new object and binding propogation 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/input.svelte b/test/validator/samples/rest-eachblock-binding-3/input.svelte
new file mode 100644
index 0000000000..b8bae0cd7f
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding-3/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	let objArray = [{ bar: {foo: '1', id: 0, innerValue: "test"} }, { bar: {foo: '2', id:1, innerValue: "Somethin"} }]
+</script>
+
+{#each objArray as { bar: { id, ...rest } } (id)}
+	<input bind:value={rest.innerValue} type="text" placeholder={rest.foo}/>
+	<br/>
+{/each}
diff --git a/test/validator/samples/rest-eachblock-binding-3/warnings.json b/test/validator/samples/rest-eachblock-binding-3/warnings.json
new file mode 100644
index 0000000000..c3410b3888
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding-3/warnings.json
@@ -0,0 +1,9 @@
+[
+  {
+    "code": "invalid-rest-eachblock-binding",
+    "message": "...rest operator will create a new object and binding propogation 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/input.svelte b/test/validator/samples/rest-eachblock-binding/input.svelte
new file mode 100644
index 0000000000..7b96705448
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	let objArray = [{foo: '1', id: 0, innerValue: "test"}, {foo: '2', id:1, innerValue: "Somethin"}]
+</script>
+
+{#each objArray as { id, ...rest } (id)}
+	<input bind:value={rest.innerValue} type="text" placeholder={rest.foo}/>
+	<br/>
+{/each}
diff --git a/test/validator/samples/rest-eachblock-binding/warnings.json b/test/validator/samples/rest-eachblock-binding/warnings.json
new file mode 100644
index 0000000000..d5d34f31d1
--- /dev/null
+++ b/test/validator/samples/rest-eachblock-binding/warnings.json
@@ -0,0 +1,9 @@
+[
+  {
+    "code": "invalid-rest-eachblock-binding",
+    "message": "...rest operator will create a new object and binding propogation with original object will not work",
+		"pos": 143,
+		"start": { "line": 5, "column": 25, "character": 143 },
+    "end": { "line": 5, "column": 32, "character": 150 }
+  }
+]

From 7331c06a74622a4635968a0c8d87b91fda4a1110 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 12 Sep 2022 03:30:02 +0800
Subject: [PATCH 047/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 066df51b00..442c941571 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * 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))
 
 
 ## 3.50.1

From 2cd661156e3646b5b8c9e93f06e240f3613737e8 Mon Sep 17 00:00:00 2001
From: Shinobu Hayashi <PhilisPaxil@gmail.com>
Date: Tue, 13 Sep 2022 20:10:45 +0900
Subject: [PATCH 048/145] [feat] Add a11y rule to check no tabindex in
 nointeractive element (#6693)

* [feature] add util module to check element is interactive element

* [feature] add util module to check role is interactive role

* [feature] add a11y checker for no-nointeractive-tabindex

* [chore] add test for no-nointeractive-tabindex

* [chore] fix tabindex-no-positive test div -> button

* [refactor] bundle up two filter into one

* Refactor: export a11y-no-nointeractive-tabindex warning from compiler_warning

* slight refactor to use existing utils

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/compiler_warnings.ts     |  4 ++
 src/compiler/compile/nodes/Element.ts         | 11 +++-
 src/compiler/compile/utils/a11y.ts            |  4 ++
 .../input.svelte                              | 14 +++++
 .../warnings.json                             | 62 +++++++++++++++++++
 .../a11y-tabindex-no-positive/input.svelte    |  8 +--
 .../a11y-tabindex-no-positive/warnings.json   | 10 +--
 7 files changed, 102 insertions(+), 11 deletions(-)
 create mode 100644 test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte
 create mode 100644 test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json

diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index b3e2e36797..7b1a3b3d29 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -179,6 +179,10 @@ export default {
 		code: 'a11y-missing-content',
 		message: `A11y: <${name}> element should have child content`
 	}),
+	a11y_no_nointeractive_tabindex: {
+		code: 'a11y-no-nointeractive-tabindex',
+		message: 'A11y: not interactive element cannot have positive tabIndex value'
+	},
 	redundant_event_modifier_for_touch: {
 		code: 'redundant-event-modifier',
 		message: 'Touch event handlers that don\'t use the \'event\' object are passive by default'
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index df0e649122..b5f9caa6b8 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -24,7 +24,7 @@ import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
 import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
-import { is_interactive_element, is_non_interactive_roles, is_presentation_role } from '../utils/a11y';
+import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles } from '../utils/a11y';
 
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const aria_attribute_set = new Set(aria_attributes);
@@ -549,8 +549,15 @@ export default class Element extends Node {
 				}
 			}
 		});
-	}
 
+		// no-nointeractive-tabindex
+		if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
+			const tab_index = attribute_map.get('tabindex');
+			if (tab_index && (!tab_index.is_static || Number(tab_index.get_static_value()) >= 0)) {
+				component.warn(this, compiler_warnings.a11y_no_nointeractive_tabindex);
+			}
+		}
+	}
 
 	validate_special_cases() {
 		const { component, attributes, handlers } = this;
diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts
index 1e06608b54..5b300eac13 100644
--- a/src/compiler/compile/utils/a11y.ts
+++ b/src/compiler/compile/utils/a11y.ts
@@ -51,6 +51,10 @@ export function is_non_interactive_roles(role: ARIARoleDefintionKey) {
 	return non_interactive_roles.has(role);
 }
 
+export function is_interactive_roles(role: ARIARoleDefintionKey) {
+	return interactive_roles.has(role);
+}
+
 const presentation_roles = new Set(['presentation', 'none']);
 
 export function is_presentation_role(role: ARIARoleDefintionKey) {
diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte
new file mode 100644
index 0000000000..e9ac0d3c9f
--- /dev/null
+++ b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte
@@ -0,0 +1,14 @@
+<!-- valid -->
+<button />
+<button tabindex='0' />
+<button tabindex='{0}' />
+<div />
+<div tabindex='-1' />
+<div role='button' tabindex='0' />
+<div role='article' tabindex='-1' />
+<article tabindex='-1' />
+<!-- invalid -->
+<div tabindex='0' />
+<div role='article' tabindex='0' />
+<article tabindex='0' />
+<article tabindex='{0}' />
diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
new file mode 100644
index 0000000000..3508feca8e
--- /dev/null
+++ b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
@@ -0,0 +1,62 @@
+[
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 241,
+			"column": 20,
+			"line": 11
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 221,
+		"start": {
+			"character": 221,
+			"column": 0,
+			"line": 11
+		}
+	},
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 277,
+			"column": 35,
+			"line": 12
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 242,
+		"start": {
+			"character": 242,
+			"column": 0,
+			"line": 12
+		}
+	},
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 302,
+			"column": 24,
+			"line": 13
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 278,
+		"start": {
+			"character": 278,
+			"column": 0,
+			"line": 13
+		}
+	},
+	{
+		"code": "a11y-no-nointeractive-tabindex",
+		"end": {
+			"character": 329,
+			"column": 26,
+			"line": 14
+		},
+		"message": "A11y: not interactive element cannot have positive tabIndex value",
+		"pos": 303,
+		"start": {
+			"character": 303,
+			"column": 0,
+			"line": 14
+		}
+	}
+]
diff --git a/test/validator/samples/a11y-tabindex-no-positive/input.svelte b/test/validator/samples/a11y-tabindex-no-positive/input.svelte
index 5a90e32f8d..f525fca777 100644
--- a/test/validator/samples/a11y-tabindex-no-positive/input.svelte
+++ b/test/validator/samples/a11y-tabindex-no-positive/input.svelte
@@ -2,7 +2,7 @@
 	let foo;
 </script>
 
-<div tabindex='-1'/>
-<div tabindex='0'/>
-<div tabindex='1'/>
-<div tabindex='{foo}'/>
\ No newline at end of file
+<button tabindex='-1'/>
+<button tabindex='0'/>
+<button tabindex='1'/>
+<button tabindex='{foo}'/>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-tabindex-no-positive/warnings.json b/test/validator/samples/a11y-tabindex-no-positive/warnings.json
index ac3c6bd994..90f9decbad 100644
--- a/test/validator/samples/a11y-tabindex-no-positive/warnings.json
+++ b/test/validator/samples/a11y-tabindex-no-positive/warnings.json
@@ -4,14 +4,14 @@
 		"message": "A11y: avoid tabindex values above zero",
 		"start": {
 			"line": 7,
-			"column": 5,
-			"character": 76
+			"column": 8,
+			"character": 85
 		},
 		"end": {
 			"line": 7,
-			"column": 17,
-			"character": 88
+			"column": 20,
+			"character": 97
 		},
-		"pos": 76
+		"pos": 85
 	}
 ]

From 899d0cc67ca8e8c18c747fb2906461c018498c70 Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Tue, 13 Sep 2022 19:16:58 +0800
Subject: [PATCH 049/145] update docs for a11y-no-noninteractive-tabindex and
 rename from a11y-no-nointeractive-tabindex -> a11y-no-noninteractive-tabindex

---
 site/content/docs/05-accessibility-warnings.md        | 11 +++++++++++
 src/compiler/compile/compiler_warnings.ts             |  4 ++--
 src/compiler/compile/nodes/Element.ts                 |  4 ++--
 .../a11y-no-nointeractive-tabindex/warnings.json      |  8 ++++----
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
index 8143f43d09..a7c1b8ded8 100644
--- a/site/content/docs/05-accessibility-warnings.md
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -250,6 +250,17 @@ Some HTML elements have default ARIA roles. Giving these elements an ARIA role t
 
 ---
 
+### `a11y-no-noninteractive-tabindex`
+
+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 -->
+<div tabindex='0' />
+```
+
+---
+
 ### `a11y-positive-tabindex`
 
 Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 7b1a3b3d29..2834847b8b 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -179,8 +179,8 @@ export default {
 		code: 'a11y-missing-content',
 		message: `A11y: <${name}> element should have child content`
 	}),
-	a11y_no_nointeractive_tabindex: {
-		code: 'a11y-no-nointeractive-tabindex',
+	a11y_no_noninteractive_tabindex: {
+		code: 'a11y-no-noninteractive-tabindex',
 		message: 'A11y: not interactive element cannot have positive tabIndex value'
 	},
 	redundant_event_modifier_for_touch: {
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index b5f9caa6b8..48ea0ec3e1 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -550,11 +550,11 @@ export default class Element extends Node {
 			}
 		});
 
-		// no-nointeractive-tabindex
+		// no-noninteractive-tabindex
 		if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
 			const tab_index = attribute_map.get('tabindex');
 			if (tab_index && (!tab_index.is_static || Number(tab_index.get_static_value()) >= 0)) {
-				component.warn(this, compiler_warnings.a11y_no_nointeractive_tabindex);
+				component.warn(this, compiler_warnings.a11y_no_noninteractive_tabindex);
 			}
 		}
 	}
diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
index 3508feca8e..97b8ccd9b3 100644
--- a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
+++ b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
@@ -1,6 +1,6 @@
 [
 	{
-		"code": "a11y-no-nointeractive-tabindex",
+		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
 			"character": 241,
 			"column": 20,
@@ -15,7 +15,7 @@
 		}
 	},
 	{
-		"code": "a11y-no-nointeractive-tabindex",
+		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
 			"character": 277,
 			"column": 35,
@@ -30,7 +30,7 @@
 		}
 	},
 	{
-		"code": "a11y-no-nointeractive-tabindex",
+		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
 			"character": 302,
 			"column": 24,
@@ -45,7 +45,7 @@
 		}
 	},
 	{
-		"code": "a11y-no-nointeractive-tabindex",
+		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
 			"character": 329,
 			"column": 26,

From 75a7c3e68f8e2b9ca449c5ed1343f761966202e3 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 13 Sep 2022 19:19:35 +0800
Subject: [PATCH 050/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 442c941571..84e7879ff1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,8 @@
 * 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))
-
+* Add a11y warnings:
+	* `a11y-no-noninteractive-tabindex`: check for tabindex on non-interactive elements ([#6693](https://github.com/sveltejs/svelte/pull/6693))
 
 ## 3.50.1
 

From e2538c594bb2fa3c12d06e9acfc592d6dc099d55 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Tue, 13 Sep 2022 20:20:45 +0900
Subject: [PATCH 051/145] [feat] support `--style-props` for
 `<svelte:component>` (#7468)

* add test

* support --style-props for <svelte:component>

* refactor

* add more test

* support switching instance

* add test with svelte:self

* merge duplicated if statement

* slight refactor

* remove unnecessary anchor

* reorder insertion

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 .../wrappers/InlineComponent/index.ts         | 157 ++++++++++--------
 .../Slider.svelte                             |  17 ++
 .../_config.js                                |  41 +++++
 .../main.svelte                               |  25 +++
 .../Slider1.svelte                            |  17 ++
 .../Slider2.svelte                            |  17 ++
 .../_config.js                                |  57 +++++++
 .../main.svelte                               |  20 +++
 .../Slider1.svelte                            |  17 ++
 .../Slider2.svelte                            |  17 ++
 .../_config.js                                |  59 +++++++
 .../main.svelte                               |  22 +++
 .../Slider.svelte                             |  29 ++++
 .../_config.js                                |  71 ++++++++
 .../main.svelte                               |  32 ++++
 .../Slider1.svelte                            |  27 +++
 .../Slider2.svelte                            |  27 +++
 .../_config.js                                |  47 ++++++
 .../main.svelte                               |  16 ++
 .../Slider1.svelte                            |  27 +++
 .../Slider2.svelte                            |  27 +++
 .../_config.js                                |  84 ++++++++++
 .../main.svelte                               |  20 +++
 23 files changed, 808 insertions(+), 65 deletions(-)
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
 create mode 100644 test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/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 e6eab33fbd..f44170cda1 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -399,12 +399,21 @@ export default class InlineComponentWrapper extends Wrapper {
 			return b`${name}.$on("${handler.name}", ${snippet});`;
 		});
 
+		const mount_target = has_css_custom_properties ? css_custom_properties_wrapper : (parent_node || '#target');
+		const mount_anchor = has_css_custom_properties ? 'null' : (parent_node ? 'null' : '#anchor');
+		const to_claim = parent_nodes && this.renderer.options.hydratable;
+		let claim_nodes = parent_nodes;
+
 		if (this.node.name === 'svelte:component') {
 			const switch_value = block.get_unique_name('switch_value');
 			const switch_props = block.get_unique_name('switch_props');
 
 			const snippet = this.node.expression.manipulate(block);
 
+			if (has_css_custom_properties) {
+				this.set_css_custom_properties(block, css_custom_properties_wrapper);
+			}
+
 			block.chunks.init.push(b`
 				var ${switch_value} = ${snippet};
 
@@ -427,20 +436,13 @@ export default class InlineComponentWrapper extends Wrapper {
 				b`if (${name}) @create_component(${name}.$$.fragment);`
 			);
 
-			if (parent_nodes && this.renderer.options.hydratable) {
-				block.chunks.claim.push(
-					b`if (${name}) @claim_component(${name}.$$.fragment, ${parent_nodes});`
-				);
-			}
-
-			block.chunks.mount.push(b`
-				if (${name}) {
-					@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});
-				}
-			`);
+			if (css_custom_properties_wrapper) this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
+			block.chunks.mount.push(b`if (${name}) @mount_component(${name}, ${mount_target}, ${mount_anchor});`);
 
-			const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
-			const update_mount_node = this.get_update_mount_node(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);
+				block.chunks.claim.push(b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`);
+			}
 
 			if (updates.length) {
 				block.chunks.update.push(b`
@@ -448,6 +450,15 @@ export default class InlineComponentWrapper extends Wrapper {
 				`);
 			}
 
+			const tmp_anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+			const anchor = has_css_custom_properties ? 'null' : tmp_anchor;
+			const update_mount_node = has_css_custom_properties ? css_custom_properties_wrapper : this.get_update_mount_node(tmp_anchor);
+			const update_insert =
+				css_custom_properties_wrapper &&
+				(tmp_anchor.name !== 'null'
+					? b`@insert(${tmp_anchor}.parentNode, ${css_custom_properties_wrapper}, ${tmp_anchor});`
+					: b`@insert(${parent_node}, ${css_custom_properties_wrapper}, ${tmp_anchor});`);
+
 			block.chunks.update.push(b`
 				if (${switch_value} !== (${switch_value} = ${snippet})) {
 					if (${name}) {
@@ -455,11 +466,13 @@ export default class InlineComponentWrapper extends Wrapper {
 						const old_component = ${name};
 						@transition_out(old_component.$$.fragment, 1, 0, () => {
 							@destroy_component(old_component, 1);
+							${has_css_custom_properties ? b`@detach(${update_mount_node})` : null}
 						});
 						@check_outros();
 					}
 
 					if (${switch_value}) {
+						${update_insert}
 						${name} = new ${switch_value}(${switch_props}(#ctx));
 
 						${munged_bindings}
@@ -501,62 +514,16 @@ export default class InlineComponentWrapper extends Wrapper {
 			`);
 
 			if (has_css_custom_properties) {
-				block.chunks.create.push(b`${css_custom_properties_wrapper} = @element("div");`);
-				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();
-					const last = should_cache && block.get_unique_name(`${attr.name.replace(/[^a-zA-Z_$]/g, '_')}_last`);
-					if (should_cache) block.add_variable(last);
-					const value = attr.get_value(block);
-					const init = should_cache ? x`${last} = ${value}` : value;
-
-					block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`);
-					if (dependencies.length > 0) {
-						let condition = block.renderer.dirty(dependencies);
-						if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
-
-						block.chunks.update.push(b`
-							if (${condition}) {
-								@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
-							}
-						`);
-					}
-				});
+				this.set_css_custom_properties(block, css_custom_properties_wrapper);
 			}
 			block.chunks.create.push(b`@create_component(${name}.$$.fragment);`);
 
-			if (parent_nodes && this.renderer.options.hydratable) {
-				let nodes = parent_nodes;
-				if (has_css_custom_properties) {
-					nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
-					block.chunks.claim.push(b`
-						${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
-						var ${nodes} = @children(${css_custom_properties_wrapper});
-					`);
-				}
-				block.chunks.claim.push(
-					b`@claim_component(${name}.$$.fragment, ${nodes});`
-				);
-			}
+			if (css_custom_properties_wrapper) this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
+			block.chunks.mount.push(b`@mount_component(${name}, ${mount_target}, ${mount_anchor});`);
 
-			if (has_css_custom_properties) {
-				if (parent_node) {
-					block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
-					if (is_head(parent_node)) {
-						block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
-					}
-				} else {
-					block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
-					// TODO we eventually need to consider what happens to elements
-					// that belong to the same outgroup as an outroing element...
-					block.chunks.destroy.push(b`if (detaching) @detach(${css_custom_properties_wrapper});`);
-				}
-				block.chunks.mount.push(b`@mount_component(${name}, ${css_custom_properties_wrapper}, null);`);
-			} else {
-				block.chunks.mount.push(
-					b`@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : '#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);
+				block.chunks.claim.push(b`@claim_component(${name}.$$.fragment, ${claim_nodes});`);
 			}
 
 			block.chunks.intro.push(b`
@@ -579,4 +546,64 @@ export default class InlineComponentWrapper extends Wrapper {
 			);
 		}
 	}
+
+	private create_css_custom_properties_wrapper_mount_chunk(
+		block: Block,
+		parent_node: Identifier,
+		css_custom_properties_wrapper: Identifier | null
+	) {
+			if (parent_node) {
+				block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
+				if (is_head(parent_node)) {
+					block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
+				}
+			} else {
+				block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
+				// TODO we eventually need to consider what happens to elements
+				// that belong to the same outgroup as an outroing element...
+				block.chunks.destroy.push(b`if (detaching && ${this.var}) @detach(${css_custom_properties_wrapper});`);
+			}
+	}
+
+	private create_css_custom_properties_wrapper_claim_chunk(
+		block: Block,
+		parent_nodes: Identifier,
+		css_custom_properties_wrapper: Identifier | null
+	) {
+		const nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
+		block.chunks.claim.push(b`
+			${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
+			var ${nodes} = @children(${css_custom_properties_wrapper});
+		`);
+		return nodes;
+	}
+
+	private set_css_custom_properties(
+		block: Block,
+		css_custom_properties_wrapper: Identifier
+	) {
+		block.chunks.create.push(b`${css_custom_properties_wrapper} = @element("div");`);
+		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();
+			const last = should_cache &&	block.get_unique_name(`${attr.name.replace(/[^a-zA-Z_$]/g, '_')}_last`);
+			if (should_cache) block.add_variable(last);
+			const value = attr.get_value(block);
+			const init = should_cache ? x`${last} = ${value}` : value;
+
+			block.chunks.hydrate.push(
+				b`@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`
+			);
+			if (dependencies.length > 0) {
+				let condition = block.renderer.dirty(dependencies);
+				if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
+				block.chunks.update.push(b`
+					if (${condition}) {
+						@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
+					}
+				`);
+			}
+		});
+	}
 }
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
new file mode 100644
index 0000000000..4863966f85
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
\ No newline at end of file
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
new file mode 100644
index 0000000000..96965c223b
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
@@ -0,0 +1,41 @@
+export default {
+	props: {
+		railColor1: 'black',
+		trackColor1: 'red',
+		railColor2: 'green',
+		trackColor2: 'blue'
+	},
+	html: `
+		<div style="display: contents; --rail-color:black; --track-color:red;">
+			<div id="slider-1">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+		<div style="display: contents; --rail-color:green; --track-color:blue;">
+			<div id="slider-2">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+	`,
+	test({ component, assert, target }) {
+		component.railColor1 = 'yellow';
+		component.trackColor2 = 'orange';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div style="display: contents; --rail-color:yellow; --track-color:red;">
+				<div id="slider-1">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+			<div style="display: contents; --rail-color:green; --track-color:orange;">
+				<div id="slider-2">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
new file mode 100644
index 0000000000..00be45a8a4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	import Slider from './Slider.svelte';
+	export let railColor1;
+	export let railColor2;
+	export let trackColor1;
+	export let trackColor2;
+
+	function identity(color) {
+		return color;
+	}
+</script>
+
+<svelte:component
+	this={Slider}
+	id="slider-1"
+	--rail-color={railColor1}
+	--track-color={trackColor1}
+/>
+
+<svelte:component
+	this={Slider}
+	id="slider-2"
+	--rail-color={railColor2}
+	--track-color={identity(trackColor2)}
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
new file mode 100644
index 0000000000..f9c9048fee
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider1</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
new file mode 100644
index 0000000000..eb5c286464
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider2</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
new file mode 100644
index 0000000000..efbf225f25
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
@@ -0,0 +1,57 @@
+export default {
+	props: {
+		componentName: 'Slider1'
+	},
+	html: `
+		<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+			<div id="component1">
+				<p class="svelte-17ay6rc">Slider1</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+		<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+			<div id="component2">
+				<p class="svelte-17ay6rc">Slider1</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+	`,
+	test({ target, window, assert, component }) {
+
+		function assert_slider_1() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
new file mode 100644
index 0000000000..2c6d05dc25
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
+</script>
+
+<svelte:component
+	this={slider}
+	id="component1"
+	--rail-color="rgb(0, 0, 0)"
+	--track-color="rgb(255, 0, 0)"
+/>
+
+<svelte:component
+	this={slider}
+	id="component2"
+	--rail-color="rgb(0, 255, 0)"
+	--track-color="rgb(0, 0, 255)"
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
new file mode 100644
index 0000000000..f9c9048fee
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider1.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider1</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
new file mode 100644
index 0000000000..eb5c286464
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/Slider2.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider2</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
new file mode 100644
index 0000000000..5aa30c7aa4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/_config.js
@@ -0,0 +1,59 @@
+export default {
+	props: {
+		componentName: 'Slider1'
+	},
+	html: `
+		<section>
+			<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+				<div id="component1">
+					<p class="svelte-17ay6rc">Slider1</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+			<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+				<div id="component2">
+					<p class="svelte-17ay6rc">Slider1</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		</section>
+	`,
+	test({ target, window, assert, component }) {
+
+		function assert_slider_1() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte
new file mode 100644
index 0000000000..dded9b8f5c
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-component-css-custom-properties2/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
+</script>
+
+<section>
+	<svelte:component
+		this={slider}
+		id="component1"
+		--rail-color="rgb(0, 0, 0)"
+		--track-color="rgb(255, 0, 0)"
+	/>
+
+	<svelte:component
+		this={slider}
+		id="component2"
+		--rail-color="rgb(0, 255, 0)"
+		--track-color="rgb(0, 0, 255)"
+	/>
+</section>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
new file mode 100644
index 0000000000..210e34cbe9
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
@@ -0,0 +1,29 @@
+<script>
+  export let id;
+	export let count = 0;
+	export let railColor1;
+	export let trackColor1;
+</script>
+
+<div {id}>
+  <p>Slider</p>
+  <span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count="{count + 1}"
+		--rail-color={railColor1}
+		--track-color={trackColor1}
+	/>
+{/if}
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
new file mode 100644
index 0000000000..c7d1369edc
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
@@ -0,0 +1,71 @@
+export default {
+	props: {
+		railColor1: 'black',
+		trackColor1: 'red',
+		railColor2: 'green',
+		trackColor2: 'blue',
+		nestRailColor1: 'white',
+		nestTrackColor1: 'gray',
+		nestRailColor2: 'aqua',
+		nestTrackColor2: 'pink'
+	},
+	html: `
+		<div style="display: contents; --rail-color:black; --track-color:red;">
+			<div id="slider-1">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:white; --track-color:gray;">
+				<div id="nest-slider-1">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		</div>
+		<div style="display: contents; --rail-color:green; --track-color:blue;">
+			<div id="slider-2">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:aqua; --track-color:pink;">
+				<div id="nest-slider-2">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		</div>
+	`,
+	test({ component, assert, target }) {
+		component.railColor1 = 'yellow';
+		component.trackColor2 = 'orange';
+		component.nestRailColor1 = 'lime';
+		component.nestTrackColor2 = 'gold';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div style="display: contents; --rail-color:yellow; --track-color:red;">
+				<div id="slider-1">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+				<div style="display: contents; --rail-color:lime; --track-color:gray;">
+					<div id="nest-slider-1">
+						<p class="svelte-17ay6rc">Slider</p>
+						<span class="svelte-17ay6rc">Track</span>
+					</div>
+				</div>
+			</div>
+			<div style="display: contents; --rail-color:green; --track-color:orange;">
+				<div id="slider-2">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+				<div style="display: contents; --rail-color:aqua; --track-color:gold;">
+					<div id="nest-slider-2">
+						<p class="svelte-17ay6rc">Slider</p>
+						<span class="svelte-17ay6rc">Track</span>
+					</div>
+				</div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
new file mode 100644
index 0000000000..69c31fff35
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	import Slider from './Slider.svelte';
+	export let railColor1;
+	export let railColor2;
+	export let trackColor1;
+	export let trackColor2;
+	export let nestRailColor1;
+	export let nestRailColor2;
+	export let nestTrackColor1;
+	export let nestTrackColor2;
+
+	function identity(color) {
+		return color;
+	}
+</script>
+
+<Slider
+	id="slider-1"
+	--rail-color={railColor1}
+	--track-color={trackColor1}
+	railColor1={nestRailColor1}
+	trackColor1={nestTrackColor1}
+/>
+
+<svelte:component
+	this={Slider}
+	id="slider-2"
+	--rail-color={railColor2}
+	--track-color={identity(trackColor2)}
+	railColor1={nestRailColor2}
+	trackColor1={nestTrackColor2}
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
new file mode 100644
index 0000000000..20699ca853
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider1</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(255, 255, 0)"
+		--track-color="rgb(255, 0, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
new file mode 100644
index 0000000000..ce799c4dc0
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider2</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(0, 255, 255)"
+		--track-color="rgb(255, 255, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
new file mode 100644
index 0000000000..f3023db3c4
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
@@ -0,0 +1,47 @@
+export default {
+	props: {},
+	html: `
+		<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+			<div id="component1">
+				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:rgb(255, 255, 0); --track-color:rgb(255, 0, 255);">
+				<div id="nest-component1">
+					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
+				</div>
+			</div>
+		<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+			<div id="component2">
+				<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:rgb(0, 255, 255); --track-color:rgb(255, 255, 255);">
+				<div id="nest-component2">
+					<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
+				</div>
+			</div>
+		</div>
+	`,
+	test({ target, window, assert }) {
+		const railColor1 = target.querySelector('#component1 p');
+		const trackColor1 = target.querySelector('#component1 span');
+		const railColor2 = target.querySelector('#component2 p');
+		const trackColor2 = target.querySelector('#component2 span');
+		const nestRailColor1 = target.querySelector('#nest-component1 p');
+		const nestTrackColor1 = target.querySelector('#nest-component1 span');
+		const nestRailColor2 = target.querySelector('#nest-component2 p');
+		const nestTrackColor2 = target.querySelector('#nest-component2 span');
+
+		assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+		assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+		assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+		assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+		assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(255, 255, 0)');
+		assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 0, 255)');
+		assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(0, 255, 255)');
+		assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 255, 255)');
+		assert.equal(railColor1.textContent, 'Slider1');
+		assert.equal(railColor2.textContent, 'Slider2');
+		assert.equal(nestRailColor1.textContent, 'Slider1');
+		assert.equal(nestRailColor2.textContent, 'Slider2');
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
new file mode 100644
index 0000000000..1a4ed02959
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+</script>
+
+<Slider1
+	id="component1"
+	--rail-color="rgb(0, 0, 0)"
+	--track-color="rgb(255, 0, 0)"
+/>
+
+<Slider2
+	id="component2"
+	--rail-color="rgb(0, 255, 0)"
+	--track-color="rgb(0, 0, 255)"
+/>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
new file mode 100644
index 0000000000..20699ca853
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider1</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(255, 255, 0)"
+		--track-color="rgb(255, 0, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
new file mode 100644
index 0000000000..ce799c4dc0
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let id;
+	export let count = 0;
+</script>
+
+<div {id}>
+	<p>Slider2</p>
+	<span>Track</span>
+</div>
+
+{#if count === 0}
+	<svelte:self
+		id="nest-{id}"
+		count={1}
+		--rail-color="rgb(0, 255, 255)"
+		--track-color="rgb(255, 255, 255)"
+	/>
+{/if}
+
+<style>
+	p {
+		color: var(--rail-color);
+	}
+	span {
+		color: var(--track-color);
+	}
+</style>
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
new file mode 100644
index 0000000000..5efc8f0c70
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
@@ -0,0 +1,84 @@
+export default {
+	props: {
+		componentName: 'Slider1'
+	},
+	html: `
+		<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+			<div id="component1">
+				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:rgb(255, 255, 0); --track-color:rgb(255, 0, 255);">
+				<div id="nest-component1">
+					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
+				</div>
+			</div>
+		<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+			<div id="component2">
+				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
+			</div>
+			<div style="display: contents; --rail-color:rgb(255, 255, 0); --track-color:rgb(255, 0, 255);">
+				<div id="nest-component2">
+					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
+				</div>
+			</div>
+		</div>
+	`,
+	test({ target, window, assert, component }) {
+
+		function assert_slider_1() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+			const nestRailColor1 = target.querySelector('#nest-component1 p');
+			const nestTrackColor1 = target.querySelector('#nest-component1 span');
+			const nestRailColor2 = target.querySelector('#nest-component2 p');
+			const nestTrackColor2 = target.querySelector('#nest-component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(255, 255, 0)');
+			assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 0, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(255, 255, 0)');
+			assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 0, 255)');
+			assert.equal(railColor1.textContent, 'Slider1');
+			assert.equal(railColor2.textContent, 'Slider1');
+			assert.equal(nestRailColor1.textContent, 'Slider1');
+			assert.equal(nestRailColor2.textContent, 'Slider1');
+		}
+
+		function assert_slider_2() {
+			const railColor1 = target.querySelector('#component1 p');
+			const trackColor1 = target.querySelector('#component1 span');
+			const railColor2 = target.querySelector('#component2 p');
+			const trackColor2 = target.querySelector('#component2 span');
+			const nestRailColor1 = target.querySelector('#nest-component1 p');
+			const nestTrackColor1 = target.querySelector('#nest-component1 span');
+			const nestRailColor2 = target.querySelector('#nest-component2 p');
+			const nestTrackColor2 = target.querySelector('#nest-component2 span');
+
+			assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+			assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+			assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+			assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(0, 255, 255)');
+			assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 255, 255)');
+			assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(0, 255, 255)');
+			assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 255, 255)');
+			assert.equal(railColor1.textContent, 'Slider2');
+			assert.equal(railColor2.textContent, 'Slider2');
+			assert.equal(nestRailColor1.textContent, 'Slider2');
+			assert.equal(nestRailColor2.textContent, 'Slider2');
+		}
+
+		assert_slider_1();
+		component.componentName = 'Slider2';
+		assert_slider_2();
+		component.componentName = undefined;
+		assert.equal(window.document.querySelector('div'), null);
+		component.componentName = 'Slider1';
+		assert_slider_1();
+	}
+};
diff --git a/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte
new file mode 100644
index 0000000000..2c6d05dc25
--- /dev/null
+++ b/test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Slider1 from './Slider1.svelte';
+	import Slider2 from './Slider2.svelte';
+	export let componentName = 'Slider1';
+	$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
+</script>
+
+<svelte:component
+	this={slider}
+	id="component1"
+	--rail-color="rgb(0, 0, 0)"
+	--track-color="rgb(255, 0, 0)"
+/>
+
+<svelte:component
+	this={slider}
+	id="component2"
+	--rail-color="rgb(0, 255, 0)"
+	--track-color="rgb(0, 0, 255)"
+/>

From 64690974dd37960d23ead5ee97b543abf2394bfc Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 13 Sep 2022 19:22:02 +0800
Subject: [PATCH 052/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84e7879ff1..210561cdbd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * 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))
+* support `--style-props` for `<svelte:component>` ([#7461](https://github.com/sveltejs/svelte/issues/7461))
 * Add a11y warnings:
 	* `a11y-no-noninteractive-tabindex`: check for tabindex on non-interactive elements ([#6693](https://github.com/sveltejs/svelte/pull/6693))
 

From 82013aa1610e9d8c73064e449d3b2c1304987896 Mon Sep 17 00:00:00 2001
From: MCMXC <16797721+mcmxcdev@users.noreply.github.com>
Date: Tue, 13 Sep 2022 15:22:10 +0200
Subject: [PATCH 053/145] feat(a11y): add click-events-have-key-events rule
 (#5073)

* feat(a11y): add click-events-have-key-events rule

Signed-off-by: mhatvan <markus_hatvan@aon.at>

* Fine-tune click-events-have-key-events rule

Signed-off-by: mhatvan <markus_hatvan@aon.at>

* Implement PR feedback

Signed-off-by: Markus Hatvan <markus_hatvan@aon.at>

* Implement PR feedback

Signed-off-by: Markus Hatvan <markus_hatvan@aon.at>

* slight refactor to use existing utils

* update docs

* fix rebase conflicts

Signed-off-by: mhatvan <markus_hatvan@aon.at>
Signed-off-by: Markus Hatvan <markus_hatvan@aon.at>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
Co-authored-by: dsfx3d <dsfx3d@gmail.com>
---
 .../content/docs/05-accessibility-warnings.md |  13 +++
 src/compiler/compile/compiler_warnings.ts     |   4 +
 src/compiler/compile/nodes/Element.ts         |  36 +++++-
 src/compiler/compile/utils/a11y.ts            |  16 +++
 .../input.svelte                              |  49 ++++++++
 .../warnings.json                             | 107 ++++++++++++++++++
 6 files changed, 222 insertions(+), 3 deletions(-)
 create mode 100644 test/validator/samples/a11y-click-events-have-key-events/input.svelte
 create mode 100644 test/validator/samples/a11y-click-events-have-key-events/warnings.json

diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
index a7c1b8ded8..c82ef21fcb 100644
--- a/site/content/docs/05-accessibility-warnings.md
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -41,6 +41,19 @@ Enforce that `autofocus` is not used on elements. Autofocusing elements can caus
 
 ---
 
+### `a11y-click-events-have-key-events`
+
+Enforce `on:click` is accompanied by at least one of the following: `onKeyUp`, `onKeyDown`, `onKeyPress`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. 
+
+This does not apply for interactive or hidden elements.
+
+```sv
+<!-- A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event. -->
+<div on:click={() => {}} />
+```
+
+---
+
 ### `a11y-distracting-elements`
 
 Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index 2834847b8b..f194090870 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -175,6 +175,10 @@ export default {
 		code: 'a11y-mouse-events-have-key-events',
 		message: `A11y: on:${event} must be accompanied by on:${accompanied_by}`
 	}),
+	a11y_click_events_have_key_events: () => ({
+		code: 'a11y-click-events-have-key-events',
+		message: 'A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.'
+	}),
 	a11y_missing_content: (name: string) => ({
 		code: 'a11y-missing-content',
 		message: `A11y: <${name}> element should have child content`
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 48ea0ec3e1..20381ee4f6 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -24,7 +24,7 @@ import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
 import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
-import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles } from '../utils/a11y';
+import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader } from '../utils/a11y';
 
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const aria_attribute_set = new Set(aria_attributes);
@@ -434,12 +434,17 @@ export default class Element extends Node {
 	}
 
 	validate_attributes_a11y() {
-		const { component, attributes } = this;
+		const { component, attributes, handlers } = this;
 
 		const attribute_map = new Map<string, Attribute>();
+		const handlers_map = new Map();
+
 		attributes.forEach(attribute => (
 			attribute_map.set(attribute.name, attribute)
 		));
+		handlers.forEach(handler => (
+			handlers_map.set(handler.name, handler)
+		));
 
 		attributes.forEach(attribute => {
 			if (attribute.is_spread) return;
@@ -484,7 +489,7 @@ export default class Element extends Node {
 				}
 
 				const value = attribute.get_static_value() as ARIARoleDefintionKey;
-				
+
 				if (value && aria_role_abstract_set.has(value)) {
 					component.warn(attribute, compiler_warnings.a11y_no_abstract_role(value));
 				} else if (value && !aria_role_set.has(value)) {
@@ -550,6 +555,31 @@ export default class Element extends Node {
 			}
 		});
 
+		// click-events-have-key-events
+		if (handlers_map.has('click')) {
+			const role = attribute_map.get('role');
+			const is_non_presentation_role = role?.is_static && !is_presentation_role(role.get_static_value() as ARIARoleDefintionKey);
+
+			if (
+				!is_hidden_from_screen_reader(this.name, attribute_map) &&
+				(!role || is_non_presentation_role) &&
+				!is_interactive_element(this.name, attribute_map) &&
+				!this.attributes.find(attr => attr.is_spread)
+			) {
+				const has_key_event =
+					handlers_map.has('keydown') ||
+					handlers_map.has('keyup') ||
+					handlers_map.has('keypress');
+
+				if (!has_key_event) {
+					component.warn(
+						this,
+						compiler_warnings.a11y_click_events_have_key_events()
+					);
+				}
+			}
+		}
+
 		// no-noninteractive-tabindex
 		if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
 			const tab_index = attribute_map.get('tabindex');
diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts
index 5b300eac13..3f35327e7c 100644
--- a/src/compiler/compile/utils/a11y.ts
+++ b/src/compiler/compile/utils/a11y.ts
@@ -61,6 +61,22 @@ export function is_presentation_role(role: ARIARoleDefintionKey) {
 	return presentation_roles.has(role);
 }
 
+export function is_hidden_from_screen_reader(tag_name: string, attribute_map: Map<string, Attribute>) {
+	if (tag_name === 'input') {
+		const type = attribute_map.get('type')?.get_static_value();
+
+		if (type && type === 'hidden') {
+			return true;
+		}
+	}
+
+	const aria_hidden = attribute_map.get('aria-hidden');
+	if (!aria_hidden) return false;
+	if (!aria_hidden.is_static) return true;
+	const aria_hidden_value = aria_hidden.get_static_value();
+	return aria_hidden_value === true || aria_hidden_value === 'true';
+}
+
 const non_interactive_element_role_schemas: ARIARoleRelationConcept[] = [];
 
 elementRoles.entries().forEach(([schema, roles]) => {
diff --git a/test/validator/samples/a11y-click-events-have-key-events/input.svelte b/test/validator/samples/a11y-click-events-have-key-events/input.svelte
new file mode 100644
index 0000000000..a63ea92fbc
--- /dev/null
+++ b/test/validator/samples/a11y-click-events-have-key-events/input.svelte
@@ -0,0 +1,49 @@
+<script>
+	function noop() {}
+
+	let props = {};
+
+	const dynamicTypeValue = "checkbox";
+	const dynamicAriaHiddenValue = "false";
+	const dynamicRole = "button";
+</script>
+
+<!-- should warn -->
+<div on:click={noop} />
+<div on:click={noop} aria-hidden="false" />
+
+<section on:click={noop} />
+<main on:click={noop} />
+<article on:click={noop} />
+<header on:click={noop} />
+<footer on:click={noop} />
+
+<!-- should not warn -->
+<div class="foo" />
+
+<a href="http://x.y.z" on:click={noop}>foo</a>
+<button on:click={noop} />
+<select on:click={noop} />
+
+<input type="button" on:click={noop} />
+<input type={dynamicTypeValue} on:click={noop} />
+
+<div on:click={noop} {...props} />
+<div on:click={noop} on:keydown={noop} />
+<div on:click={noop} on:keyup={noop} />
+<div on:click={noop} on:keypress={noop} />
+<div on:click={noop} on:keydown={noop} on:keyup={noop} />
+<div on:click={noop} on:keyup={noop} on:keypress={noop} />
+<div on:click={noop} on:keypress={noop} on:keydown={noop} />
+<div on:click={noop} on:keydown={noop} on:keyup={noop} on:keypress={noop} />
+
+<input on:click={noop} type="hidden" />
+
+<div on:click={noop} aria-hidden />
+<div on:click={noop} aria-hidden="true" />
+<div on:click={noop} aria-hidden="false" on:keydown={noop} />
+<div on:click={noop} aria-hidden={dynamicAriaHiddenValue} />
+
+<div on:click={noop} role="presentation" />
+<div on:click={noop} role="none" />
+<div on:click={noop} role={dynamicRole} />
diff --git a/test/validator/samples/a11y-click-events-have-key-events/warnings.json b/test/validator/samples/a11y-click-events-have-key-events/warnings.json
new file mode 100644
index 0000000000..220f8377a3
--- /dev/null
+++ b/test/validator/samples/a11y-click-events-have-key-events/warnings.json
@@ -0,0 +1,107 @@
+[
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 12,
+			"column": 0,
+			"character": 190
+		},
+		"end": {
+			"line": 12,
+			"column": 23,
+			"character": 213
+		},
+		"pos": 190
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 13,
+			"column": 0,
+			"character": 214
+		},
+		"end": {
+			"line": 13,
+			"column": 43,
+			"character": 257
+		},
+		"pos": 214
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 15,
+			"column": 0,
+			"character": 259
+		},
+		"end": {
+			"line": 15,
+			"column": 27,
+			"character": 286
+		},
+		"pos": 259
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 16,
+			"column": 0,
+			"character": 287
+		},
+		"end": {
+			"line": 16,
+			"column": 24,
+			"character": 311
+		},
+		"pos": 287
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 17,
+			"column": 0,
+			"character": 312
+		},
+		"end": {
+			"line": 17,
+			"column": 27,
+			"character": 339
+		},
+		"pos": 312
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 18,
+			"column": 0,
+			"character": 340
+		},
+		"end": {
+			"line": 18,
+			"column": 26,
+			"character": 366
+		},
+		"pos": 340
+	},
+	{
+		"code": "a11y-click-events-have-key-events",
+		"message": "A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.",
+		"start": {
+			"line": 19,
+			"column": 0,
+			"character": 367
+		},
+		"end": {
+			"line": 19,
+			"column": 26,
+			"character": 393
+		},
+		"pos": 367
+	}
+]

From d7cfe22f3702af28334a541f204eafe7f0c0d9db Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 13 Sep 2022 21:40:09 +0800
Subject: [PATCH 054/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 210561cdbd..c5fc0b6123 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 * support `--style-props` for `<svelte:component>` ([#7461](https://github.com/sveltejs/svelte/issues/7461))
 * 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))
 
 ## 3.50.1
 

From 980aff8a4aaf91677f045e757949ecc3be6605b2 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Tue, 13 Sep 2022 08:44:20 -0700
Subject: [PATCH 055/145] [fix] omit a11y warning for native checkbox/radio
 inputs (#7838)

* [fix] omit a11y warning for native checkbox/radio inputs

Fixes #7837

* align implementation with eslint-plugin-jsx-a11y

Co-authored-by: tanhauhau <lhtan93@gmail.com>
---
 src/compiler/compile/nodes/Element.ts         |  18 +--
 src/compiler/compile/utils/a11y.ts            |  26 ++++-
 .../a11y-no-redundant-roles/warnings.json     | 105 ------------------
 .../input.svelte                              |   2 +
 4 files changed, 35 insertions(+), 116 deletions(-)

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 20381ee4f6..79f2800437 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -24,7 +24,7 @@ import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
 import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
-import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader } from '../utils/a11y';
+import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader, is_semantic_role_element } from '../utils/a11y';
 
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 const aria_attribute_set = new Set(aria_attributes);
@@ -514,13 +514,15 @@ export default class Element extends Node {
 				}
 
 				// role-has-required-aria-props
-				const role = roles.get(value);
-				if (role) {
-					const required_role_props = Object.keys(role.requiredProps);
-					const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop));
-
-					if (has_missing_props) {
-						component.warn(attribute, compiler_warnings.a11y_role_has_required_aria_props(value as string, required_role_props));
+				if (!is_semantic_role_element(value, this.name, attribute_map)) {
+					const role = roles.get(value);
+					if (role) {
+						const required_role_props = Object.keys(role.requiredProps);
+						const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop));
+
+						if (has_missing_props) {
+							component.warn(attribute, compiler_warnings.a11y_role_has_required_aria_props(value as string, required_role_props));
+						}
 					}
 				}
 
diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts
index 3f35327e7c..b96386a3b0 100644
--- a/src/compiler/compile/utils/a11y.ts
+++ b/src/compiler/compile/utils/a11y.ts
@@ -4,7 +4,7 @@ import {
 	elementRoles,
 	ARIARoleRelationConcept
 } from 'aria-query';
-import { AXObjects, elementAXObjects } from 'axobject-query';
+import { AXObjects, AXObjectRoles, elementAXObjects } from 'axobject-query';
 import Attribute from '../nodes/Attribute';
 
 const roles = [...roles_map.keys()];
@@ -119,8 +119,8 @@ function match_schema(
 			schema_attribute.value &&
 			schema_attribute.value !== attribute.get_static_value()
 		) {
-return false;
-}
+			return false;
+		}
 		return true;
 	});
 }
@@ -155,3 +155,23 @@ export function is_interactive_element(
 
 	return false;
 }
+
+export function is_semantic_role_element(role: ARIARoleDefintionKey, tag_name: string, attribute_map: Map<string, Attribute>) {
+	for (const [schema, ax_object] of elementAXObjects.entries()) {
+		if (schema.name === tag_name && (!schema.attributes || schema.attributes.every(
+			(attr) => attribute_map.has(attr.name) && attribute_map.get(attr.name).get_static_value() === attr.value
+		))) {
+			for (const name of ax_object) {
+				const roles = AXObjectRoles.get(name);
+				if (roles) {
+					for (const { name } of roles) {
+						if (name === role) {
+							return true;
+						}
+					}
+				}
+			}
+		}
+	}
+	return false;
+}
diff --git a/test/validator/samples/a11y-no-redundant-roles/warnings.json b/test/validator/samples/a11y-no-redundant-roles/warnings.json
index 0947a467af..cb346f87b2 100644
--- a/test/validator/samples/a11y-no-redundant-roles/warnings.json
+++ b/test/validator/samples/a11y-no-redundant-roles/warnings.json
@@ -224,21 +224,6 @@
 			"line": 15
 		}
 	},
-	{
-		"code": "a11y-role-has-required-aria-props",
-		"end": {
-			"character": 383,
-			"column": 18,
-			"line": 15
-		},
-		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
-		"pos": 369,
-		"start": {
-			"character": 369,
-			"column": 4,
-			"line": 15
-		}
-	},
 	{
 		"code": "a11y-no-redundant-roles",
 		"end": {
@@ -254,21 +239,6 @@
 			"line": 16
 		}
 	},
-	{
-		"code": "a11y-role-has-required-aria-props",
-		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
-		"pos": 401,
-		"start": {
-			"character": 401,
-			"column": 4,
-			"line": 16
-		},
-		"end": {
-			"character": 415,
-			"column": 18,
-			"line": 16
-		}
-	},
 	{
 		"code": "a11y-no-redundant-roles",
 		"end": {
@@ -284,21 +254,6 @@
 			"line": 17
 		}
 	},
-	{
-		"code": "a11y-role-has-required-aria-props",
-		"end": {
-			"character": 447,
-			"column": 18,
-			"line": 17
-		},
-		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
-		"pos": 433,
-		"start": {
-			"character": 433,
-			"column": 4,
-			"line": 17
-		}
-	},
 	{
 		"code": "a11y-no-redundant-roles",
 		"end": {
@@ -314,21 +269,6 @@
 			"line": 18
 		}
 	},
-	{
-		"code": "a11y-role-has-required-aria-props",
-		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
-		"pos": 465,
-		"start": {
-			"character": 465,
-			"column": 4,
-			"line": 18
-		},
-		"end": {
-			"character": 479,
-			"column": 18,
-			"line": 18
-		}
-	},
 	{
 		"code": "a11y-no-redundant-roles",
 		"end": {
@@ -344,21 +284,6 @@
 			"line": 19
 		}
 	},
-	{
-		"code": "a11y-role-has-required-aria-props",
-		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
-		"pos": 497,
-		"start": {
-			"character": 497,
-			"column": 4,
-			"line": 19
-		},
-		"end": {
-			"character": 511,
-			"column": 18,
-			"line": 19
-		}
-	},
 	{
 		"code": "a11y-no-redundant-roles",
 		"end": {
@@ -374,21 +299,6 @@
 			"line": 20
 		}
 	},
-	{
-		"code": "a11y-role-has-required-aria-props",
-		"message": "A11y: Elements with the ARIA role \"heading\" must have the following attributes defined: \"aria-level\"",
-		"pos": 529,
-		"start": {
-			"character": 529,
-			"column": 4,
-			"line": 20
-		},
-		"end": {
-			"character": 543,
-			"column": 18,
-			"line": 20
-		}
-	},
 	{
 		"code": "a11y-no-redundant-roles",
 		"end": {
@@ -524,21 +434,6 @@
 			"line": 29
 		}
 	},
-	{
-		"code": "a11y-role-has-required-aria-props",
-		"message": "A11y: Elements with the ARIA role \"option\" must have the following attributes defined: \"aria-selected\"",
-		"pos": 751,
-		"start": {
-			"character": 751,
-			"column": 8,
-			"line": 29
-		},
-		"end": {
-			"character": 764,
-			"column": 21,
-			"line": 29
-		}
-	},
 	{
 		"code": "a11y-no-redundant-roles",
 		"end": {
diff --git a/test/validator/samples/a11y-role-has-required-aria-props/input.svelte b/test/validator/samples/a11y-role-has-required-aria-props/input.svelte
index 8e88b08908..113ed65316 100644
--- a/test/validator/samples/a11y-role-has-required-aria-props/input.svelte
+++ b/test/validator/samples/a11y-role-has-required-aria-props/input.svelte
@@ -7,3 +7,5 @@
 <span role="checkbox" aria-checked="false"></span>
 <div role="meter" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
 <div role="scrollbar" aria-controls="panel" aria-valuenow="50"></div>
+<input role="switch" type="checkbox" />
+<input role="radio" type="radio" />
\ No newline at end of file

From c113d9d978da46d628b4d4ae19d28c275130df06 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 13 Sep 2022 23:55:22 +0800
Subject: [PATCH 056/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c5fc0b6123..8122749320 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * 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))
 
 ## 3.50.1
 

From 5adac302c0400363ed5da83c6730ff3379b81d2e Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Wed, 14 Sep 2022 00:56:19 +0900
Subject: [PATCH 057/145] [fix] call attribute bindings for custom element if
 <svelte:element> render custom element (#7766)

* call attr bindings if tag is custom element

* add test
---
 .../render_dom/wrappers/Element/index.ts      | 32 +++++++++----
 src/runtime/internal/dom.ts                   |  6 +++
 .../dynamic-element-custom-element/_config.js | 47 +++++++++++++++++++
 .../main.svelte                               | 32 +++++++++++++
 4 files changed, 109 insertions(+), 8 deletions(-)
 create mode 100644 test/runtime-puppeteer/samples/dynamic-element-custom-element/_config.js
 create mode 100644 test/runtime-puppeteer/samples/dynamic-element-custom-element/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 531208c476..0ad46618fa 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -803,15 +803,31 @@ export default class ElementWrapper extends Wrapper {
 
 		const fn = this.node.namespace === namespaces.svg ? x`@set_svg_attributes` : x`@set_attributes`;
 
-		block.chunks.hydrate.push(
-			b`${fn}(${this.var}, ${data});`
-		);
+		if (this.node.is_dynamic_element) {
+			// call attribute bindings for custom element if tag is custom element
+			const tag = this.node.tag_expr.manipulate(block);
+			const attr_update = b`
+				if (/-/.test(${tag})) {
+					@set_custom_element_data_map(${this.var}, ${data});
+				} else {
+					${fn}(${this.var}, ${data});
+				}`;
+			block.chunks.hydrate.push(attr_update);
+			block.chunks.update.push(b`
+				${data} = @get_spread_update(${levels}, [${updates}]);
+				${attr_update}`
+			);
+		} else {
+			block.chunks.hydrate.push(
+				b`${fn}(${this.var}, ${data});`
+			);
 
-		block.chunks.update.push(b`
-			${fn}(${this.var}, ${data} = @get_spread_update(${levels}, [
-				${updates}
-			]));
-		`);
+			block.chunks.update.push(b`
+				${fn}(${this.var}, ${data} = @get_spread_update(${levels}, [
+					${updates}
+				]));
+			`);
+		}
 
 		// handle edge cases for elements
 		if (this.node.name === 'select') {
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 090b8925e1..d359513eb4 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -316,6 +316,12 @@ export function set_svg_attributes(node: Element & ElementCSSInlineStyle, attrib
 	}
 }
 
+export function set_custom_element_data_map(node, data_map: Record<string, unknown>) {
+	Object.keys(data_map).forEach((key) => {
+		set_custom_element_data(node, key, data_map[key]);
+	});
+}
+
 export function set_custom_element_data(node, prop, value) {
 	if (prop in node) {
 		node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value;
diff --git a/test/runtime-puppeteer/samples/dynamic-element-custom-element/_config.js b/test/runtime-puppeteer/samples/dynamic-element-custom-element/_config.js
new file mode 100644
index 0000000000..64b362a702
--- /dev/null
+++ b/test/runtime-puppeteer/samples/dynamic-element-custom-element/_config.js
@@ -0,0 +1,47 @@
+export default {
+	skip_if_ssr: true,
+	props: {
+		tag: 'my-custom-element',
+		name: null
+	},
+	html: `
+		<my-custom-element id="a">Hello null!</my-custom-element>
+		<my-custom-element id="b">Hello null!</my-custom-element>
+	`,
+
+	test({ assert, component, target }) {
+		component.name = undefined;
+		assert.htmlEqual(
+			target.innerHTML,
+			`<my-custom-element id="a">Hello undefined!</my-custom-element>
+			 <my-custom-element id="b">Hello undefined!</my-custom-element>`
+		);
+
+		component.name = 'foo';
+		assert.htmlEqual(
+			target.innerHTML,
+			`<my-custom-element id="a">Hello foo!</my-custom-element>
+			 <my-custom-element id="b">Hello foo!</my-custom-element>`
+		);
+
+		component.tag = null;
+		assert.htmlEqual(
+			target.innerHTML,
+			'<my-custom-element id="b">Hello foo!</my-custom-element>'
+		);
+
+		component.tag = 'div';
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div name="foo" id="a"></div>
+			 <my-custom-element id="b">Hello foo!</my-custom-element>`
+		);
+
+		component.tag = 'my-custom-element';
+		assert.htmlEqual(
+			target.innerHTML,
+			`<my-custom-element id="a">Hello foo!</my-custom-element>
+			 <my-custom-element id="b">Hello foo!</my-custom-element>`
+		);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/dynamic-element-custom-element/main.svelte b/test/runtime-puppeteer/samples/dynamic-element-custom-element/main.svelte
new file mode 100644
index 0000000000..81e29895d7
--- /dev/null
+++ b/test/runtime-puppeteer/samples/dynamic-element-custom-element/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	class MyCustomElement extends HTMLElement {
+		constructor() {
+			super();
+			this._name = null;
+		}
+
+		/**
+		 * @param {string} name
+		 */
+		set name(name) {
+			this._name = name;
+			this.render();
+		}
+
+		connectedCallback() {
+			this.render();
+		}
+
+		render() {
+			this.innerHTML = "Hello " + this._name + "!";
+		}
+	}
+
+	window.customElements.define("my-custom-element", MyCustomElement);
+
+	export let tag;
+	export let name;
+</script>
+
+<svelte:element this="{tag}" {name} id="a" />
+<my-custom-element {name} id="b" />

From 56bcec5ddd4dbded644582c970f4a04e45941217 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 13 Sep 2022 23:57:13 +0800
Subject: [PATCH 058/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8122749320..2164765574 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,11 +8,12 @@
 * 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))
-* support `--style-props` for `<svelte:component>` ([#7461](https://github.com/sveltejs/svelte/issues/7461))
+* Supports `--style-props` for `<svelte:component>` ([#7461](https://github.com/sveltejs/svelte/issues/7461))
 * 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))
 
 ## 3.50.1
 

From 433460ec2dab0b44deeefc52c03358a0b60df335 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Thu, 15 Sep 2022 22:22:40 +0900
Subject: [PATCH 059/145] [feat] skip custom element check if <svelte:element>
 uses under svg (#7869)

* add test

* skip custom element check if svelte element uses under svg
---
 .../compile/render_dom/wrappers/Element/index.ts   | 14 ++++++++------
 test/js/samples/svelte-element-svg/expected.js     |  8 +++++---
 .../runtime/samples/dynamic-element-svg/_config.js | 10 ++++++++++
 .../samples/dynamic-element-svg/main.svelte        |  3 +++
 4 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 test/runtime/samples/dynamic-element-svg/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-svg/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 0ad46618fa..4f0b49729c 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -806,12 +806,14 @@ export default class ElementWrapper extends Wrapper {
 		if (this.node.is_dynamic_element) {
 			// call attribute bindings for custom element if tag is custom element
 			const tag = this.node.tag_expr.manipulate(block);
-			const attr_update = b`
-				if (/-/.test(${tag})) {
-					@set_custom_element_data_map(${this.var}, ${data});
-				} else {
-					${fn}(${this.var}, ${data});
-				}`;
+			const attr_update = this.node.namespace === namespaces.svg
+				? b`${fn}(${this.var}, ${data});`
+				: b`
+					if (/-/.test(${tag})) {
+						@set_custom_element_data_map(${this.var}, ${data});
+					} else {
+						${fn}(${this.var}, ${data});
+					}`;
 			block.chunks.hydrate.push(attr_update);
 			block.chunks.update.push(b`
 				${data} = @get_spread_update(${levels}, [${updates}]);
diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js
index f9ca24ff30..36ce583ef1 100644
--- a/test/js/samples/svelte-element-svg/expected.js
+++ b/test/js/samples/svelte-element-svg/expected.js
@@ -48,8 +48,10 @@ function create_dynamic_element(ctx) {
 			append(svelte_element1, svelte_element0);
 		},
 		p(ctx, dirty) {
-			set_svg_attributes(svelte_element0, svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
-			set_svg_attributes(svelte_element1, svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
+			svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]);
+			set_svg_attributes(svelte_element0, svelte_element0_data);
+			svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]);
+			set_svg_attributes(svelte_element1, svelte_element1_data);
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element1);
@@ -108,4 +110,4 @@ class Component extends SvelteComponent {
 	}
 }
 
-export default Component;
\ No newline at end of file
+export default Component;
diff --git a/test/runtime/samples/dynamic-element-svg/_config.js b/test/runtime/samples/dynamic-element-svg/_config.js
new file mode 100644
index 0000000000..d0fb37fb6a
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-svg/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: '<svg xmlns="http://www.w3.org/2000/svg"><path xmlns="http://www.w3.org/2000/svg"></path></svg>',
+
+	test({ assert, target }) {
+		const svg = target.querySelector('svg');
+		const rect = target.querySelector('path');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(rect.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-svg/main.svelte b/test/runtime/samples/dynamic-element-svg/main.svelte
new file mode 100644
index 0000000000..2dc4d54814
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-svg/main.svelte
@@ -0,0 +1,3 @@
+<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
+    <svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element>
+</svelte:element>
\ No newline at end of file

From 25a05bf952579423b31582ee085388ce0be140cb Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Thu, 15 Sep 2022 22:26:15 +0900
Subject: [PATCH 060/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2164765574..85d1bcf781 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 	* `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))
 
 ## 3.50.1
 

From b20fb114a657abcd63a79d25789428258f952b3a Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 21 Sep 2022 21:48:01 +0800
Subject: [PATCH 061/145] allow nullish values for component event handlers
 (#7863)

---
 src/runtime/internal/Component.ts                  |  6 ++++++
 .../samples/component-events-nullish/Widget.svelte | 14 ++++++++++++++
 .../samples/component-events-nullish/_config.js    |  9 +++++++++
 .../samples/component-events-nullish/main.svelte   |  6 ++++++
 4 files changed, 35 insertions(+)
 create mode 100644 test/runtime/samples/component-events-nullish/Widget.svelte
 create mode 100644 test/runtime/samples/component-events-nullish/_config.js
 create mode 100644 test/runtime/samples/component-events-nullish/main.svelte

diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index 3e48010547..0e9e4f0610 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -212,6 +212,9 @@ if (typeof HTMLElement === 'function') {
 
 		$on(type, callback) {
 			// TODO should this delegate to addEventListener?
+			if (!is_function(callback)) {
+				return noop;
+			}
 			const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
 			callbacks.push(callback);
 
@@ -244,6 +247,9 @@ export class SvelteComponent {
 	}
 
 	$on(type, callback) {
+		if (!is_function(callback)) {
+			return noop;
+		}
 		const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
 		callbacks.push(callback);
 
diff --git a/test/runtime/samples/component-events-nullish/Widget.svelte b/test/runtime/samples/component-events-nullish/Widget.svelte
new file mode 100644
index 0000000000..07ae574403
--- /dev/null
+++ b/test/runtime/samples/component-events-nullish/Widget.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	export let logs;
+
+	function click() {
+		try {
+			dispatch('click');
+		} catch (error) {
+			logs.push(error);
+		}
+	}
+</script>
+<button on:click={click} />
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-nullish/_config.js b/test/runtime/samples/component-events-nullish/_config.js
new file mode 100644
index 0000000000..7c540b2a08
--- /dev/null
+++ b/test/runtime/samples/component-events-nullish/_config.js
@@ -0,0 +1,9 @@
+export default {
+	async test({ assert, component, window, target }) {
+		const event = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+		
+		await button.dispatchEvent(event);
+		assert.equal(component.logs.length, 0);
+	}
+};
diff --git a/test/runtime/samples/component-events-nullish/main.svelte b/test/runtime/samples/component-events-nullish/main.svelte
new file mode 100644
index 0000000000..0dee33b5d1
--- /dev/null
+++ b/test/runtime/samples/component-events-nullish/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Widget from './Widget.svelte';
+	export let logs = [];
+</script>
+
+<Widget on:click={null} {logs} />

From 132dbecc584fe84154f2acf9ee02e620285ce299 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 21 Sep 2022 21:49:12 +0800
Subject: [PATCH 062/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 85d1bcf781..0d0ee54c0d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 * `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))
+* Supports nullish values for component event handlers ([#7568](https://github.com/sveltejs/svelte/issues/7568))
 
 ## 3.50.1
 

From ee5479d00eadc47ecb38446a5dcfcaea043774f9 Mon Sep 17 00:00:00 2001
From: Xiao Chuan <w2239559319@outlook.com>
Date: Thu, 22 Sep 2022 23:25:04 +0800
Subject: [PATCH 063/145] [fix] fix ctx and dirty type (#7832)

* fix: ctx type

* fix: update function dirty type
---
 src/runtime/internal/Component.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index 0e9e4f0610..624339e7fa 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -14,7 +14,7 @@ export interface Fragment {
 	/* claim   */ l: (nodes: any) => void;
 	/* hydrate */ h: () => void;
 	/* mount   */ m: (target: HTMLElement, anchor: any) => void;
-	/* update  */ p: (ctx: any, dirty: any) => void;
+	/* update  */ p: (ctx: T$$['ctx'], dirty: T$$['dirty']) => void;
 	/* measure */ r: () => void;
 	/* fix     */ f: () => void;
 	/* animate */ a: () => void;
@@ -24,7 +24,7 @@ export interface Fragment {
 }
 interface T$$ {
 	dirty: number[];
-	ctx: null | any;
+	ctx: any[];
 	bound: any;
 	update: () => void;
 	callbacks: any;
@@ -110,7 +110,7 @@ export function init(component, options, instance, create_fragment, not_equal, p
 
 	const $$: T$$ = component.$$ = {
 		fragment: null,
-		ctx: null,
+		ctx: [],
 
 		// state
 		props,

From c12704c3014f71741aa707700c32a42df699f8e6 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 28 Sep 2022 16:51:45 +0200
Subject: [PATCH 064/145] [fix] typings for #7863

---
 src/runtime/internal/dev.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
index 02677172fa..32d14571d9 100644
--- a/src/runtime/internal/dev.ts
+++ b/src/runtime/internal/dev.ts
@@ -126,7 +126,7 @@ export function validate_void_dynamic_element(tag: undefined | string) {
 type Props = Record<string, any>;
 export interface SvelteComponentDev {
 	$set(props?: Props): void;
-	$on(event: string, callback: (event: any) => void): () => void;
+	$on(event: string, callback: ((event: any) => void) | null | undefined): () => void;
 	$destroy(): void;
 	[accessor: string]: any;
 }
@@ -196,7 +196,7 @@ export interface SvelteComponentTyped<
 	Slots extends Record<string, any> = any // eslint-disable-line @typescript-eslint/no-unused-vars
 > {
 	$set(props?: Partial<Props>): void;
-	$on<K extends Extract<keyof Events, string>>(type: K, callback: (e: Events[K]) => void): () => void;
+	$on<K extends Extract<keyof Events, string>>(type: K, callback: ((e: Events[K]) => void) | null | undefined): () => void;
 	$destroy(): void;
 	[accessor: string]: any;
 }

From 0b46c72cada210b3a6c72c30a51d35f5c4ccefb3 Mon Sep 17 00:00:00 2001
From: Daniel Sandoval <danielericsandoval@gmail.com>
Date: Fri, 30 Sep 2022 11:57:42 -0600
Subject: [PATCH 065/145]  [docs] "What's new in Svelte" October newsletter
 (#7898)

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Co-authored-by: Lyu, Wei-Da <36730922+jasonlyu123@users.noreply.github.com>
Co-authored-by: Willow (GHOST) <ghostdevbusiness@gmail.com>
---
 ...-10-01-whats-new-in-svelte-october-2022.md | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md

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
new file mode 100644
index 0000000000..647d185fa4
--- /dev/null
+++ b/site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md
@@ -0,0 +1,139 @@
+---
+title: "What's new in Svelte: October 2022"
+description: "Svelte Summit, `use:enhance`, and a SvelteKit Release Candidate!"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+There's a bunch of updates this month... from new features in Svelte and SvelteKit to a whole 2-day *summit*! Plus, the Svelte extension gets some helpful new tools, new accessibility (a11y) warnings, and Tan Li Hau teaches us how to build our own Svelte and a Svelte spreadsheet 😎
+
+## What happened at Svelte Summit?
+
+A lot! Below you can find all the talks, by timestamp, from each livestream. Bite-size videos of the event will be coming soon to the Svelte Society channel, so be sure to [Subscribe](https://www.youtube.com/c/SvelteSociety), if you haven't already!
+
+_Day One_
+- [12:31](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=751s) - How to get Svelte adopted at work
+- [33:21](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=2001s) - Animating Data Visualization in Svelte
+- [2:20:36](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=8436s) - Red flags & code smells
+- [2:53:42](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=10422s) - Enhance your DX
+- [4:42:41](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=16961s) - Svelte in UBS’ knowledge graph
+- [5:06:42](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=18402s) - How to migrate react libraries to svelte
+- [5:45:27](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=20727s) - DX magic in the world of Svelte
+- [7:25:39](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=26739s) - Data visualizations powered by Svelte
+- [7:59:38](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=28778s) - Partial Hydration in Svelte for Increased Performance
+- [8:20:49](https://www.youtube.com/watch?v=pJcbZr5VlV4&t=30049s) - Building the future, faster
+
+_Day Two_
+- [24:09](https://www.youtube.com/watch?v=A8jkJTWacow&t=1449s) - Scrollytell me why: Ain't nothing but a piece of cake
+- [2:02:40](https://www.youtube.com/watch?v=A8jkJTWacow&t=7360s) - I told you my dog wouldn’t run
+- [2:29:43](https://www.youtube.com/watch?v=A8jkJTWacow&t=8983s) - 10Xing Svelte
+- [3:04:56](https://www.youtube.com/watch?v=A8jkJTWacow&t=11096s) - Svemix? Re-svmix? Re-svelte?: Bringing Svelte to Remix Router
+- [5:09:39](https://www.youtube.com/watch?v=A8jkJTWacow&t=18579s) - Having fun with stores: an interactive demo of Svelte’s built in state management library
+- [5:37:06](https://www.youtube.com/watch?v=A8jkJTWacow&t=20226s) - When Keeping it Svelte Goes Wrong. An Analysis of Some of the Worst Svelte I Have Ever Coded
+- [7:22:05](https://www.youtube.com/watch?v=A8jkJTWacow&t=26525s) - Getting started with Hooks
+- [7:38:14](https://www.youtube.com/watch?v=A8jkJTWacow&t=27494s) - Special Announcement*
+
+*In the final talk of the summit, Rich Harris announces the first Release Candidate of SvelteKit! With no planned breaking changes left, the team is hard at work squashing bugs and adding the remaining features for 1.0...
+
+## More SvelteKit Updates
+- `use:enhance` is the easiest way to progressively enhance a form ([Docs](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance), [#6633](https://github.com/sveltejs/kit/pull/6633), [#6828](https://github.com/sveltejs/kit/pull/6828), [#7012](https://github.com/sveltejs/kit/pull/7012))
+- The demo app has been updated to add the Sverdle game, which Rich demoed at Svelte Summit and demonstrates `use:enhance` ([#6979](https://github.com/sveltejs/kit/pull/6979))
+- Cloudflare Pages `_routes.json` specification is now supported by `adapter-cloudflare` ([#6530](https://github.com/sveltejs/kit/pull/6530))
+- Improved build performance by running asset and page compression in parallel ([#6710](https://github.com/sveltejs/kit/pull/6710))
+
+**Breaking changes:**
+- Node 16.14 is now the minimum version to run SvelteKit ([#6388](https://github.com/sveltejs/kit/pull/6388))
+- `App.PrivateEnv` and `App.PublicEnv` have been removed in favour of generated types ([#6413](https://github.com/sveltejs/kit/pull/6413))
+- `%sveltekit.message%` has been replaced with `%sveltekit.error.message%` ([6659](https://github.com/sveltejs/kit/pull/6659))
+- `App.PageError` is now `App.Error` - check for it in your hooks ([Docs](https://kit.svelte.dev/docs/hooks#shared-hooks-handleerror), [#6963](https://github.com/sveltejs/kit/pull/6963))
+- `externalFetch` is now `handleFetch` and will run for all fetch calls in `load` that run on the server ([#6565](https://github.com/sveltejs/kit/pull/6565))
+
+For a full list of changes, check out SvelteKit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
+
+## Svelte Updates
+- New a11y warnings for `incorrect-aria-attribute-type`, `no-abstract-role`, `interactive-element-to-noninteractive-role` and `role-has-required-aria-props`.`no-noninteractive-tabindex` and `click-events-have-key-events` coming soon! (**3.50.0**)
+- New types for `ComponentEvents` and `SveltePreprocessor` (**3.50.0**)
+- Improved parsing speed when encountering large blocks of whitespace (**3.50.0**)
+- All global JavaScript objects and functions are now recognized as known globals (**3.50.1**)
+
+For all the changes to the Svelte compiler, including upcoming changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
+
+## New in Language Tools
+- Better code formatting for editor suggestion (**106.0.0**, [#1598](https://github.com/sveltejs/language-tools/pull/1598))
+- Easily create SvelteKit route files from the context menu or command palette (**106.1.0**, [#1620](https://github.com/sveltejs/language-tools/pull/1620))
+
+---
+
+## Ask Questions in the Svelte Discord
+
+In case you missed the announcement, the Svelte Discord has an exciting new update... a forum! The new [questions channel](https://discord.com/channels/457912077277855764/1023340103071965194) utilizes Discord's new forums feature to help the community better ask, find and answer questions!
+
+It can be used for anything you may be trying to accomplish using Svelte including using SvelteKit, community libraries, tools, etc. So ask away!
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [Timeflow](https://www.timeflow.site/) is a smart calendar & task manager that dynamically schedules your tasks between your events
+- [GeoQuest](https://github.com/woutdp/geoquest) is an open source geography game
+- [Houses Of](https://housesof.world/) is a project showcasing charismatic houses around the world
+- [Greenfield Brewery](https://greenfield-brewery.vercel.app/) is a tool for quickly installing a lot of homebrew casks
+- [Gram Jam](https://gramjam.app/) is a word puzzle game inspired by match three games and Scrabble
+- [Beatbump](https://github.com/snuffyDev/Beatbump) is a privacy-respecting alternative frontend for YouTube Music
+- [RoomOS Device Widgets](https://github.com/wxsd-sales/roomos-device-widgets) is an app for demoing RoomOS device capabilities in Kiosk/PWA mode
+- [World Seed](https://store.steampowered.com/app/1870320/World_Seed/) is a full blown online multiplayer game
+- [Lirify](https://lirify-tan.vercel.app/) is a song lyrics writing web app tool made in Latvia
+- [Splet Tech Konferencija](https://www.splet.rs/) is a tech conference in Serbia with a *very* fancy website
+- [Unbounded](https://unbounded.polkadot.network/) is an open-source variable font - funded by blockchain (and an awesome-looking website)
+- [Porter's Paints](https://shop.porterspaints.com/) is an eCommerce site for (you guessed it) paints built with Svelte
+- [CRAN/E](https://www.cran-e.com/) is a search engine for modern R-packages 
+
+
+**Learning Resources**
+
+_Starring the Svelte team_
+- [Upgrading SvelteKit](https://www.youtube.com/watch?v=vzeZskhjoeQ) by Svelte Sirens (with Brittney, Kev, and GHOST!)
+- [Build your own Svelte](https://www.youtube.com/watch?v=mwvyKGw2CzU) by lihautan
+- [Native Page Transitions in SvelteKit: Part 1](https://geoffrich.net/posts/page-transitions-1/) by Geoff Rich
+- [Build a cross platform app with Tauri](https://ghostdev.xyz/posts/build-a-cross-platform-app-with-tauri/) by GHOST
+
+_To Watch_
+- [How To Use Future CSS In Svelte](https://www.youtube.com/watch?v=eqwtoaP-0pk) and [Master Animation With Svelte](https://www.youtube.com/watch?v=3RlBfUQCiAQ) by Joy of Code
+- [Svelte Kit Form Actions 101 - New Svelte Kit API](https://www.youtube.com/watch?v=i5zdnv83mxY) and [Svelte Kit Form Actions - Real World Examples - Q&A](https://www.youtube.com/watch?v=PK2Mpt1q6K8) by LevelUpTuts
+
+_To Read_
+- [What's new in `svelte-kit, 1.0.0-next.445`: (group) layout](https://dev.to/parables/whats-new-in-svelte-kit-100-next445-group-layout-1ld5) by Parables
+- [Handling breaking changes in SvelteKit pre-1.0](https://maier.tech/posts/handling-breaking-changes-in-sveltekit-pre-1-0) by Thilo Maier
+- [Svelte Custom Stores Demystified](https://raqueebuddinaziz.com/blog/svelte-custom-stores-demystified/) by Raqueebuddin Aziz
+- Sveltekit Changes: [Advanced Layouts](https://dev.to/theether0/sveltekit-changes-advanced-layouts-3id4), [Form Actions and Progressive Enhancement](https://dev.to/theether0/sveltekit-changes-form-actions-and-progressive-enhancement-31h9) and [Cookies and Authentication](https://dev.to/theether0/sveltekit-changes-session-and-cookies-enb) by Shivam Meena
+- [How to add an Emoji Picker to Sveltekit](https://xvrc.net/) by Xavier Coiffard
+- [Get Started with SvelteKit Headless WordPress](https://plus.rodneylab.com/tutorials/get-started-sveltekit-headless-wordpress) by Rodney Lab
+- [Speed up SvelteKit Pages With a Redis Cache](https://www.captaincodeman.com/speed-up-sveltekit-pages-with-a-redis-cache) and [How to await Firebase Auth with SvelteKit](https://www.captaincodeman.com/how-to-await-firebase-auth-with-sveltekit) by Captain Codeman
+- [Deploying SvelteKit with NodeJS to a Server Using Gitlab and PM2](https://abyteofcoding.com/blog/deploying-sveltekit-with-nodejs-pm2-to-server/) by A Byte of Coding
+- [Quality of Life Tips when using SvelteKit in VS Code](https://www.reddit.com/r/sveltejs/comments/xltgyp/quality_of_life_tips_when_using_sveltekit_in_vs/) by doa-doa
+
+
+**Libraries, Tools & Components**
+- [Svelte Fit](https://github.com/leveluptuts/svelte-fit) is an extremely simple, no dependency fit text library
+- [svelte-switch-case](https://github.com/l-portet/svelte-switch-case) is a switch case syntax for your Svelte components
+- [svelte-canvas-confetti](https://github.com/andreasmcdermott/svelte-canvas-confetti) uses a single canvas to render full-screen confetti
+- [@slidy/svelte](https://github.com/Valexr/Slidy/tree/master/packages/svelte) is a simple, configurable & reusable carousel component built with Svelte - based on `@slidy/core`
+- [svelte-currency-input](https://github.com/canutin/svelte-currency-input) is a form input that converts numbers to localized currency formats as you type
+- [Adria](https://github.com/pilcrowOnPaper/adria) is a super simple form validation library, with autocomplete and value/type checking
+- [Canopy](https://github.com/oslabs-beta/canopy) is a Svelte debugging app for the Chrome devtools panel
+- [MenuFramework](https://github.com/MyHwu9508/altv-os-menu-framework) is a menu framework written for [alt:V](https://altv.mp/#/)
+- [whyframe](https://whyframe.dev/) gives iframes superpowers, making it easy to render anything in isolation
+- [@svelte-put/modal](https://github.com/vnphanquang/svelte-put/tree/main/packages/misc/modal) is a solution to async, declarative, type-safe modals in Svelte
+- [Kitty](https://github.com/grottopress/kitty) is a collection of libraries and handlers for developing secure frontend apps
+- [svelte-turnstile](https://github.com/ghostdevv/svelte-turnstile) is a component for Cloudflare Turnstile, the privacy focused CAPTCHA replacement 
+
+_UI Kits and Starters_
+- [QWER](https://github.com/kwchang0831/svelte-QWER) is a blog starter built with SvelteKit
+- [SvelteKit Zero API](https://github.com/Refzlund/sveltekit-zero-api) provides type-safety between the frontend and backend - creating a structure for easy APIs
+- [sveltekit-monorepo](https://github.com/sw-yx/sveltekit-monorepo) is monorepo starter with 2022 tech
+- [svelte-component-test-recipes](https://github.com/davipon/svelte-component-test-recipes) uses `vitest`, `@testing-library/svelte`, and `svelte-htm` to test Svelte components that seemed to be hard to test
+
+Whew! That's a lot of updates. Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
+
+See ya next month 👋

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 066/145] 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 067/145] [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 068/145] [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 069/145] [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 070/145] 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 071/145] [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 072/145] 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 073/145] [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 074/145] 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 075/145] [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 076/145] [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 077/145] 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 078/145] [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 079/145] 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 080/145] [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 081/145] [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 082/145] [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 083/145] -> 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 084/145] [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 085/145] [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 086/145] [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 087/145] [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 088/145] [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 089/145] [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 090/145] 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 091/145] [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 092/145] 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 093/145] 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 094/145] 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 095/145] [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 096/145] 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 097/145] [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 098/145] -> 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 099/145] [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 100/145] 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 101/145] [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 102/145] 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 103/145] [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 104/145] 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 105/145] [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 106/145] [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 107/145] [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 108/145] [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 109/145] [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 110/145] 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
 

From 773dedf714fcf895429e53920e5c013a8b86f411 Mon Sep 17 00:00:00 2001
From: Maximiliano Ruani <maxi.ruani@hotmail.com>
Date: Wed, 9 Nov 2022 15:21:38 -0300
Subject: [PATCH 111/145] [feat] Compiler option css: 'none' support (#7914)

---
 site/content/docs/05-compile-time.md          |  2 +-
 src/compiler/compile/index.ts                 | 27 ++++++++++++++--
 src/compiler/compile/render_dom/index.ts      |  2 +-
 src/compiler/interfaces.ts                    |  3 +-
 src/compiler/parse/index.ts                   |  2 ++
 src/compiler/parse/read/style.ts              |  7 ++++
 .../samples/css-option-none/input.svelte      |  7 ++++
 .../samples/css-option-none/options.json      |  3 ++
 .../samples/css-option-none/output.json       | 32 +++++++++++++++++++
 9 files changed, 80 insertions(+), 5 deletions(-)
 create mode 100644 test/parser/samples/css-option-none/input.svelte
 create mode 100644 test/parser/samples/css-option-none/options.json
 create mode 100644 test/parser/samples/css-option-none/output.json

diff --git a/site/content/docs/05-compile-time.md b/site/content/docs/05-compile-time.md
index 35a57ced85..45dd454ea0 100644
--- a/site/content/docs/05-compile-time.md
+++ b/site/content/docs/05-compile-time.md
@@ -73,7 +73,7 @@ The following options can be passed to the compiler. None are required:
 | `accessors` | `false` | If `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`.
 | `customElement` | `false` | If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.
 | `tag` | `null` | A `string` that tells Svelte what tag name to register the custom element with. It must be a lowercase alphanumeric string with at least one hyphen, e.g. `"my-element"`.
-| `css` | `true` | If `true`, styles will be included in the JavaScript class and injected at runtime for the components actually rendered. If `false`, the CSS will be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `false` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
+| `css` | `'injected'` | If `'injected'` (formerly `true`), styles will be included in the JavaScript class and injected at runtime for the components actually rendered. If `'external'` (formerly `false`), the CSS will be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files. If `'none'`, styles are completely avoided and no CSS output is generated.
 | `cssHash` | See right | A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS. It defaults to returning `svelte-${hash(css)}`
 | `loopGuardTimeout` | 0 | A `number` that tells Svelte to break the loop if it blocks the thread for more than `loopGuardTimeout` ms. This is useful to prevent infinite loops. **Only available when `dev: true`**
 | `preserveComments` | `false` | If `true`, your HTML comments will be preserved during server-side rendering. By default, they are stripped out.
diff --git a/src/compiler/compile/index.ts b/src/compiler/compile/index.ts
index a5edc3a6f7..38a3da057c 100644
--- a/src/compiler/compile/index.ts
+++ b/src/compiler/compile/index.ts
@@ -35,11 +35,19 @@ const valid_options = [
 	'cssHash'
 ];
 
+const valid_css_values = [
+	true,
+	false,
+	'injected',
+	'external',
+	'none'
+];
+
 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;
+	const { name, filename, loopGuardTimeout, dev, namespace, css } = options;
 
 	Object.keys(options).forEach(key => {
 		if (!valid_options.includes(key)) {
@@ -75,6 +83,21 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 		});
 	}
 
+	if (valid_css_values.indexOf(css) === -1) {
+		throw new Error(`options.css must be true, false, 'injected', 'external', or 'none' (got '${css}')`);
+	}
+
+	if (css === true || css === false) {
+		options.css = css === true ? 'injected' : 'external';
+		const message = `options.css as a boolean is deprecated. Use '${options.css}' instead of ${css}.`;
+		warnings.push({
+			code: 'options-css-boolean-deprecated',
+			message,
+			filename,
+			toString: () => message
+		});
+	}
+
 	if (namespace && valid_namespaces.indexOf(namespace) === -1) {
 		const match = fuzzymatch(namespace, valid_namespaces);
 		if (match) {
@@ -86,7 +109,7 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 }
 
 export default function compile(source: string, options: CompileOptions = {}) {
-	options = Object.assign({ generate: 'dom', dev: false, enableSourcemap: true }, options);
+	options = Object.assign({ generate: 'dom', dev: false, enableSourcemap: true, css: 'injected' }, options);
 
 	const stats = new Stats();
 	const warnings = [];
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 3055715b4c..44155f8464 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -54,7 +54,7 @@ export default function dom(
 	const should_add_css = (
 		!options.customElement &&
 		!!styles &&
-		options.css !== false
+		options.css === 'injected'
 	);
 
 	if (should_add_css) {
diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts
index 248175da59..eb2cc336ed 100644
--- a/src/compiler/interfaces.ts
+++ b/src/compiler/interfaces.ts
@@ -179,7 +179,7 @@ export interface CompileOptions {
 	legacy?: boolean;
 	customElement?: boolean;
 	tag?: string;
-	css?: boolean;
+	css?: 'injected' | 'external' | 'none' | boolean;
 	loopGuardTimeout?: number;
 	namespace?: string;
 	cssHash?: CssHashGetter;
@@ -191,6 +191,7 @@ export interface CompileOptions {
 export interface ParserOptions {
 	filename?: string;
 	customElement?: boolean;
+	css?: 'injected' | 'external' | 'none' | boolean;
 }
 
 export interface Visitor {
diff --git a/src/compiler/parse/index.ts b/src/compiler/parse/index.ts
index 079be0e20c..8de6563c8b 100644
--- a/src/compiler/parse/index.ts
+++ b/src/compiler/parse/index.ts
@@ -21,6 +21,7 @@ export class Parser {
 	readonly template: string;
 	readonly filename?: string;
 	readonly customElement: boolean;
+	readonly css_mode: 'injected' | 'external' | 'none' | boolean;
 
 	index = 0;
 	stack: TemplateNode[] = [];
@@ -39,6 +40,7 @@ export class Parser {
 		this.template = template.trimRight();
 		this.filename = options.filename;
 		this.customElement = options.customElement;
+		this.css_mode = options.css;
 
 		this.html = {
 			start: null,
diff --git a/src/compiler/parse/read/style.ts b/src/compiler/parse/read/style.ts
index d7ba83c6e5..560d377cec 100644
--- a/src/compiler/parse/read/style.ts
+++ b/src/compiler/parse/read/style.ts
@@ -19,6 +19,12 @@ export default function read_style(parser: Parser, start: number, attributes: No
 
 	const content_end = parser.index;
 
+	// discard styles when css is disabled
+	if (parser.css_mode === 'none') {
+		parser.read(regex_closing_style_tag);
+		return null;
+	}
+
 	let ast;
 
 	try {
@@ -71,6 +77,7 @@ export default function read_style(parser: Parser, start: number, attributes: No
 	});
 
 	parser.read(regex_closing_style_tag);
+  
 	const end = parser.index;
 
 	return {
diff --git a/test/parser/samples/css-option-none/input.svelte b/test/parser/samples/css-option-none/input.svelte
new file mode 100644
index 0000000000..659c4343f6
--- /dev/null
+++ b/test/parser/samples/css-option-none/input.svelte
@@ -0,0 +1,7 @@
+<div>foo</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
diff --git a/test/parser/samples/css-option-none/options.json b/test/parser/samples/css-option-none/options.json
new file mode 100644
index 0000000000..b10d517cc9
--- /dev/null
+++ b/test/parser/samples/css-option-none/options.json
@@ -0,0 +1,3 @@
+{
+	"css": "none"
+}
diff --git a/test/parser/samples/css-option-none/output.json b/test/parser/samples/css-option-none/output.json
new file mode 100644
index 0000000000..ef1f9c9a37
--- /dev/null
+++ b/test/parser/samples/css-option-none/output.json
@@ -0,0 +1,32 @@
+{
+	"html": {
+		"start": 0,
+		"end": 14,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 14,
+				"type": "Element",
+				"name": "div",
+				"attributes": [],
+				"children": [
+					{
+						"start": 5,
+						"end": 8,
+						"type": "Text",
+						"raw": "foo",
+						"data": "foo"
+					}
+				]
+			},
+			{
+				"start": 14,
+				"end": 16,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			}
+		]
+	}
+}

From 92f02669cf762c57a18ba7f33a20683494a3c495 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 9 Nov 2022 10:22:25 -0800
Subject: [PATCH 112/145] [chore] upgrade dependencies (#7982)

---
 package-lock.json | 1298 ++++++++++++++++++++++++++++++++++++---------
 package.json      |   22 +-
 2 files changed, 1065 insertions(+), 255 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1e4763cac4..3498392e23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,19 +23,19 @@
         "@types/node": "^8.10.53",
         "@typescript-eslint/eslint-plugin": "^5.22.0",
         "@typescript-eslint/parser": "^5.22.0",
-        "acorn": "^8.4.1",
-        "agadoo": "^1.1.0",
-        "aria-query": "^5.0.0",
-        "axobject-query": "^3.0.1",
+        "acorn": "^8.8.1",
+        "agadoo": "^2.0.0",
+        "aria-query": "^5.1.1",
+        "axobject-query": "^3.1.1",
         "code-red": "^0.2.5",
-        "css-tree": "^2.1.0",
-        "eslint": "^8.0.0",
+        "css-tree": "^2.2.1",
+        "eslint": "^8.26.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-svelte3": "^4.0.0",
-        "estree-walker": "^3.0.0",
+        "estree-walker": "^3.0.1",
         "is-reference": "^3.0.0",
         "jsdom": "^15.2.1",
-        "kleur": "^3.0.3",
+        "kleur": "^4.1.5",
         "locate-character": "^2.0.5",
         "magic-string": "^0.25.3",
         "mocha": "^7.0.0",
@@ -43,10 +43,10 @@
         "puppeteer": "^2.0.0",
         "rollup": "^1.27.14",
         "source-map": "^0.7.4",
-        "source-map-support": "^0.5.13",
+        "source-map-support": "^0.5.21",
         "sourcemap-codec": "^1.4.8",
-        "tiny-glob": "^0.2.6",
-        "tslib": "^2.0.3",
+        "tiny-glob": "^0.2.9",
+        "tslib": "^2.4.0",
         "typescript": "^3.7.5"
       },
       "engines": {
@@ -67,23 +67,26 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz",
-      "integrity": "sha512-lTVWHs7O2hjBFZunXTZYnYqtB9GakA1lnxIf+gKq2nY5gxkkNi/lQvveW6t8gFdOHTg6nG50Xs95PrLqVpcaLg==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
+      "integrity": "sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.3.1",
-        "globals": "^13.9.0",
+        "espree": "^9.4.0",
+        "globals": "^13.15.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
@@ -104,10 +107,22 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.9.5",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
-      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "version": "0.11.6",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.6.tgz",
+      "integrity": "sha512-jJr+hPTJYKyDILJfhNSHsjiwXYf26Flsz8DvNndOsHs5pwSnpGUEy8yzF0JYhCEvTDdV2vuOK5tt8BVhwO5/hg==",
       "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -118,6 +133,19 @@
         "node": ">=10.10.0"
       }
     },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@humanwhocodes/object-schema": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
@@ -199,6 +227,15 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@rollup/plugin-commonjs/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/@rollup/plugin-json": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.0.1.tgz",
@@ -267,6 +304,15 @@
         "rollup-pluginutils": "^2.6.0"
       }
     },
+    "node_modules/@rollup/plugin-replace/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/@rollup/plugin-sucrase": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-sucrase/-/plugin-sucrase-3.1.0.tgz",
@@ -602,9 +648,9 @@
       "dev": true
     },
     "node_modules/acorn": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
+      "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -654,11 +700,12 @@
       }
     },
     "node_modules/agadoo": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/agadoo/-/agadoo-1.1.0.tgz",
-      "integrity": "sha512-MiTXQ3As5jARRXa0eZF+ObtzsseQurCXOc1RB19NOGDsimEvoT8DB8iQiC0zAGTfsF/nBhzEle+eV9UpXyWnbw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/agadoo/-/agadoo-2.0.0.tgz",
+      "integrity": "sha512-68aFhseH51ZBKYKkQNxwDi1hJwTnywBjHWg068qFnMkpXShhOazNzJUPRvaLQjrqhT3EOUth5G9mt1A0/dGhOw==",
       "dev": true,
       "dependencies": {
+        "acorn": "^7.1.0",
         "rollup": "^1",
         "rollup-plugin-virtual": "^1.0.1"
       },
@@ -666,6 +713,18 @@
         "agadoo": "agadoo"
       }
     },
+    "node_modules/agadoo/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
@@ -741,12 +800,12 @@
       }
     },
     "node_modules/aria-query": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
-      "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.1.tgz",
+      "integrity": "sha512-4cPQjOYM2mqq7mZG8CSxkUvL2Yv/x29VhGq5LKehTsxRnoVQps1YGt9NyjcNQsznEsD4rr8a6zGxqeNTqJWjpA==",
       "dev": true,
-      "engines": {
-        "node": ">=6.0"
+      "dependencies": {
+        "deep-equal": "^2.0.5"
       }
     },
     "node_modules/array-equal": {
@@ -831,6 +890,18 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
       "dev": true
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -847,12 +918,12 @@
       "dev": true
     },
     "node_modules/axobject-query": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.0.1.tgz",
-      "integrity": "sha512-vy5JPSOibF9yAeC2PoemRdA1MuSXX7vX5osdoxKf/6OUeppAWekZ3JIJVNWFMH6wgj7uHYyqZUSqE/b/3JLV1A==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
+      "integrity": "sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==",
       "dev": true,
-      "engines": {
-        "node": ">=6.0"
+      "dependencies": {
+        "deep-equal": "^2.0.5"
       }
     },
     "node_modules/balanced-match": {
@@ -1196,6 +1267,56 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/deep-equal": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.0.5.tgz",
+      "integrity": "sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "es-get-iterator": "^1.1.1",
+        "get-intrinsic": "^1.0.1",
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.2",
+        "is-regex": "^1.1.1",
+        "isarray": "^2.0.5",
+        "object-is": "^1.1.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "regexp.prototype.flags": "^1.3.0",
+        "side-channel": "^1.0.3",
+        "which-boxed-primitive": "^1.0.1",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/deep-equal/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
+    "node_modules/deep-equal/node_modules/object.assign": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -1295,31 +1416,35 @@
       "dev": true
     },
     "node_modules/es-abstract": {
-      "version": "1.19.5",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.5.tgz",
-      "integrity": "sha512-Aa2G2+Rd3b6kxEUKTF4TaW67czBLyAv3z7VOhYRU50YBx+bbsYZ9xQP4lMNazePuFlybXI0V4MruPos7qUo5fA==",
+      "version": "1.20.4",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz",
+      "integrity": "sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.1.1",
+        "function.prototype.name": "^1.1.5",
+        "get-intrinsic": "^1.1.3",
         "get-symbol-description": "^1.0.0",
         "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
         "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.0",
+        "object-inspect": "^1.12.2",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.4.3",
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trimend": "^1.0.5",
+        "string.prototype.trimstart": "^1.0.5",
+        "unbox-primitive": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -1329,14 +1454,14 @@
       }
     },
     "node_modules/es-abstract/node_modules/object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
       "engines": {
@@ -1346,6 +1471,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-get-iterator": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.2.tgz",
+      "integrity": "sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.0",
+        "has-symbols": "^1.0.1",
+        "is-arguments": "^1.1.0",
+        "is-map": "^2.0.2",
+        "is-set": "^2.0.2",
+        "is-string": "^1.0.5",
+        "isarray": "^2.0.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-get-iterator/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
     "node_modules/es-shim-unscopables": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
@@ -1424,13 +1574,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.14.0.tgz",
-      "integrity": "sha512-3/CE4aJX7LNEiE3i6FeodHmI/38GZtWCsAtsymScmzYapx8q1nVVb+eLcLSzATmCPXw5pT4TqVs1E0OmxAd9tw==",
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.26.0.tgz",
+      "integrity": "sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==",
       "dev": true,
       "dependencies": {
-        "@eslint/eslintrc": "^1.2.2",
-        "@humanwhocodes/config-array": "^0.9.2",
+        "@eslint/eslintrc": "^1.3.3",
+        "@humanwhocodes/config-array": "^0.11.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -1440,30 +1592,32 @@
         "eslint-scope": "^7.1.1",
         "eslint-utils": "^3.0.0",
         "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.3.1",
+        "espree": "^9.4.0",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
-        "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^6.0.1",
-        "globals": "^13.6.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.15.0",
+        "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
         "regexpp": "^3.2.0",
         "strip-ansi": "^6.0.1",
         "strip-json-comments": "^3.1.0",
-        "text-table": "^0.2.0",
-        "v8-compile-cache": "^2.0.3"
+        "text-table": "^0.2.0"
       },
       "bin": {
         "eslint": "bin/eslint.js"
@@ -1805,6 +1959,22 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/eslint/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -1851,6 +2021,33 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/eslint/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/eslint/node_modules/optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -1868,6 +2065,45 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/eslint/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/eslint/node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -1959,17 +2195,20 @@
       }
     },
     "node_modules/espree": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
-      "integrity": "sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz",
+      "integrity": "sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.7.0",
-        "acorn-jsx": "^5.3.1",
+        "acorn": "^8.8.0",
+        "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/espree/node_modules/eslint-visitor-keys": {
@@ -2046,9 +2285,9 @@
       }
     },
     "node_modules/estree-walker": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.0.tgz",
-      "integrity": "sha512-s6ceX0NFiU/vKPiKvFdR83U1Zffu7upwZsGwpoqfg5rbbq1l50WQ5hCeIvM6E6oD4shUHCYMsiFPns4Jk0YfMQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.1.tgz",
+      "integrity": "sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==",
       "dev": true
     },
     "node_modules/esutils": {
@@ -2239,6 +2478,15 @@
       "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
       "dev": true
     },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "node_modules/forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -2289,12 +2537,39 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -2305,14 +2580,14 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
+      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
       "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
-        "has-symbols": "^1.0.1"
+        "has-symbols": "^1.0.3"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2376,9 +2651,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "13.13.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.13.0.tgz",
-      "integrity": "sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==",
+      "version": "13.17.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+      "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -2391,9 +2666,9 @@
       }
     },
     "node_modules/globalyzer": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.4.tgz",
-      "integrity": "sha512-LeguVWaxgHN0MNbWC6YljNMzHkrCny9fzjmEUdnF1kQ7wATFD1RHFRqA1qxaX2tgxGENlcxjOflopBwj3YZiXA==",
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
       "dev": true
     },
     "node_modules/globby": {
@@ -2422,6 +2697,12 @@
       "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
       "dev": true
     },
+    "node_modules/grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+      "dev": true
+    },
     "node_modules/growl": {
       "version": "1.10.5",
       "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
@@ -2466,9 +2747,9 @@
       }
     },
     "node_modules/has-bigints": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
-      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
       "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2653,6 +2934,22 @@
         "node": ">=4"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-bigint": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
@@ -2717,9 +3014,9 @@
       }
     },
     "node_modules/is-callable": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -2741,12 +3038,18 @@
       }
     },
     "node_modules/is-date-object": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
-      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
       "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-extglob": {
@@ -2779,6 +3082,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-map": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
+      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -2821,6 +3133,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-reference": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz",
@@ -2846,6 +3167,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-set": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
+      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-shared-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
@@ -2888,12 +3218,40 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
+      "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.20.0",
+        "for-each": "^0.3.3",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "node_modules/is-weakmap": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
+      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-weakref": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
@@ -2906,6 +3264,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-weakset": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
+      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -2924,6 +3295,12 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
+    "node_modules/js-sdsl": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
+      "integrity": "sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==",
+      "dev": true
+    },
     "node_modules/js-yaml": {
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
@@ -3044,9 +3421,9 @@
       }
     },
     "node_modules/kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -3424,14 +3801,30 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
-      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
       "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -3784,6 +4177,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -3966,6 +4376,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/rollup-plugin-virtual/-/rollup-plugin-virtual-1.0.1.tgz",
       "integrity": "sha512-HCTBpV8MwP5lNzZrHD2moVxHIToHU1EkzkKGVj6Z0DcgUfxrxrZmeQirQeLz2yhnkJqRjwiVywK9CS8jDYakrw==",
+      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-virtual.",
       "dev": true
     },
     "node_modules/rollup-pluginutils": {
@@ -4024,6 +4435,20 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -4099,9 +4524,9 @@
       }
     },
     "node_modules/source-map-support": {
-      "version": "0.5.13",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
-      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -4182,26 +4607,28 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4334,13 +4761,13 @@
       }
     },
     "node_modules/tiny-glob": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.6.tgz",
-      "integrity": "sha512-A7ewMqPu1B5PWwC3m7KVgAu96Ch5LA0w4SnEN/LbDREj/gAD0nPWboRbn8YoP9ISZXqeNAlMvKSKoEuhcfK3Pw==",
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
       "dev": true,
       "dependencies": {
-        "globalyzer": "^0.1.0",
-        "globrex": "^0.1.1"
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
       }
     },
     "node_modules/to-regex-range": {
@@ -4397,9 +4824,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
-      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
     "node_modules/tsutils": {
@@ -4485,14 +4912,14 @@
       }
     },
     "node_modules/unbox-primitive": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
-      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
       "dev": true,
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has-bigints": "^1.0.1",
-        "has-symbols": "^1.0.2",
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
         "which-boxed-primitive": "^1.0.2"
       },
       "funding": {
@@ -4523,12 +4950,6 @@
         "uuid": "bin/uuid"
       }
     },
-    "node_modules/v8-compile-cache": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
-      "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
-      "dev": true
-    },
     "node_modules/verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -4623,12 +5044,47 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-collection": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
+      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "dev": true,
+      "dependencies": {
+        "is-map": "^2.0.1",
+        "is-set": "^2.0.1",
+        "is-weakmap": "^2.0.1",
+        "is-weakset": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "node_modules/which-typed-array": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
+      "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.20.0",
+        "for-each": "^0.3.3",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/wide-align": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
@@ -4791,6 +5247,18 @@
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"
       }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   },
   "dependencies": {
@@ -4805,19 +5273,19 @@
       }
     },
     "@eslint/eslintrc": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz",
-      "integrity": "sha512-lTVWHs7O2hjBFZunXTZYnYqtB9GakA1lnxIf+gKq2nY5gxkkNi/lQvveW6t8gFdOHTg6nG50Xs95PrLqVpcaLg==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
+      "integrity": "sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.3.1",
-        "globals": "^13.9.0",
+        "espree": "^9.4.0",
+        "globals": "^13.15.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "strip-json-comments": "^3.1.1"
       },
       "dependencies": {
@@ -4835,13 +5303,22 @@
           "requires": {
             "argparse": "^2.0.1"
           }
+        },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
         }
       }
     },
     "@humanwhocodes/config-array": {
-      "version": "0.9.5",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
-      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "version": "0.11.6",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.6.tgz",
+      "integrity": "sha512-jJr+hPTJYKyDILJfhNSHsjiwXYf26Flsz8DvNndOsHs5pwSnpGUEy8yzF0JYhCEvTDdV2vuOK5tt8BVhwO5/hg==",
       "dev": true,
       "requires": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -4849,6 +5326,12 @@
         "minimatch": "^3.0.4"
       }
     },
+    "@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true
+    },
     "@humanwhocodes/object-schema": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
@@ -4914,6 +5397,15 @@
           "requires": {
             "@types/estree": "*"
           }
+        },
+        "magic-string": {
+          "version": "0.25.9",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
         }
       }
     },
@@ -4973,6 +5465,17 @@
       "requires": {
         "magic-string": "^0.25.2",
         "rollup-pluginutils": "^2.6.0"
+      },
+      "dependencies": {
+        "magic-string": {
+          "version": "0.25.9",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
       }
     },
     "@rollup/plugin-sucrase": {
@@ -5206,9 +5709,9 @@
       "dev": true
     },
     "acorn": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
+      "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
       "dev": true
     },
     "acorn-globals": {
@@ -5243,13 +5746,22 @@
       "dev": true
     },
     "agadoo": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/agadoo/-/agadoo-1.1.0.tgz",
-      "integrity": "sha512-MiTXQ3As5jARRXa0eZF+ObtzsseQurCXOc1RB19NOGDsimEvoT8DB8iQiC0zAGTfsF/nBhzEle+eV9UpXyWnbw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/agadoo/-/agadoo-2.0.0.tgz",
+      "integrity": "sha512-68aFhseH51ZBKYKkQNxwDi1hJwTnywBjHWg068qFnMkpXShhOazNzJUPRvaLQjrqhT3EOUth5G9mt1A0/dGhOw==",
       "dev": true,
       "requires": {
+        "acorn": "^7.1.0",
         "rollup": "^1",
         "rollup-plugin-virtual": "^1.0.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        }
       }
     },
     "agent-base": {
@@ -5311,10 +5823,13 @@
       }
     },
     "aria-query": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
-      "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
-      "dev": true
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.1.tgz",
+      "integrity": "sha512-4cPQjOYM2mqq7mZG8CSxkUvL2Yv/x29VhGq5LKehTsxRnoVQps1YGt9NyjcNQsznEsD4rr8a6zGxqeNTqJWjpA==",
+      "dev": true,
+      "requires": {
+        "deep-equal": "^2.0.5"
+      }
     },
     "array-equal": {
       "version": "1.0.0",
@@ -5380,6 +5895,12 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
       "dev": true
     },
+    "available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true
+    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -5393,10 +5914,13 @@
       "dev": true
     },
     "axobject-query": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.0.1.tgz",
-      "integrity": "sha512-vy5JPSOibF9yAeC2PoemRdA1MuSXX7vX5osdoxKf/6OUeppAWekZ3JIJVNWFMH6wgj7uHYyqZUSqE/b/3JLV1A==",
-      "dev": true
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
+      "integrity": "sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==",
+      "dev": true,
+      "requires": {
+        "deep-equal": "^2.0.5"
+      }
     },
     "balanced-match": {
       "version": "1.0.0",
@@ -5681,6 +6205,49 @@
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true
     },
+    "deep-equal": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.0.5.tgz",
+      "integrity": "sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "es-get-iterator": "^1.1.1",
+        "get-intrinsic": "^1.0.1",
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.2",
+        "is-regex": "^1.1.1",
+        "isarray": "^2.0.5",
+        "object-is": "^1.1.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "regexp.prototype.flags": "^1.3.0",
+        "side-channel": "^1.0.3",
+        "which-boxed-primitive": "^1.0.1",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
+        },
+        "object.assign": {
+          "version": "4.1.4",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+          "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.4",
+            "has-symbols": "^1.0.3",
+            "object-keys": "^1.1.1"
+          }
+        }
+      }
+    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -5759,47 +6326,75 @@
       "dev": true
     },
     "es-abstract": {
-      "version": "1.19.5",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.5.tgz",
-      "integrity": "sha512-Aa2G2+Rd3b6kxEUKTF4TaW67czBLyAv3z7VOhYRU50YBx+bbsYZ9xQP4lMNazePuFlybXI0V4MruPos7qUo5fA==",
+      "version": "1.20.4",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz",
+      "integrity": "sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.1.1",
+        "function.prototype.name": "^1.1.5",
+        "get-intrinsic": "^1.1.3",
         "get-symbol-description": "^1.0.0",
         "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
         "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.0",
+        "object-inspect": "^1.12.2",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.4.3",
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trimend": "^1.0.5",
+        "string.prototype.trimstart": "^1.0.5",
+        "unbox-primitive": "^1.0.2"
       },
       "dependencies": {
         "object.assign": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+          "version": "4.1.4",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+          "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
           "dev": true,
           "requires": {
-            "call-bind": "^1.0.0",
-            "define-properties": "^1.1.3",
-            "has-symbols": "^1.0.1",
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.4",
+            "has-symbols": "^1.0.3",
             "object-keys": "^1.1.1"
           }
         }
       }
     },
+    "es-get-iterator": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.2.tgz",
+      "integrity": "sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.0",
+        "has-symbols": "^1.0.1",
+        "is-arguments": "^1.1.0",
+        "is-map": "^2.0.2",
+        "is-set": "^2.0.2",
+        "is-string": "^1.0.5",
+        "isarray": "^2.0.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
+        }
+      }
+    },
     "es-shim-unscopables": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
@@ -5855,13 +6450,15 @@
       }
     },
     "eslint": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.14.0.tgz",
-      "integrity": "sha512-3/CE4aJX7LNEiE3i6FeodHmI/38GZtWCsAtsymScmzYapx8q1nVVb+eLcLSzATmCPXw5pT4TqVs1E0OmxAd9tw==",
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.26.0.tgz",
+      "integrity": "sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==",
       "dev": true,
       "requires": {
-        "@eslint/eslintrc": "^1.2.2",
-        "@humanwhocodes/config-array": "^0.9.2",
+        "@eslint/eslintrc": "^1.3.3",
+        "@humanwhocodes/config-array": "^0.11.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -5871,30 +6468,32 @@
         "eslint-scope": "^7.1.1",
         "eslint-utils": "^3.0.0",
         "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.3.1",
+        "espree": "^9.4.0",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
-        "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^6.0.1",
-        "globals": "^13.6.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.15.0",
+        "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
         "regexpp": "^3.2.0",
         "strip-ansi": "^6.0.1",
         "strip-json-comments": "^3.1.0",
-        "text-table": "^0.2.0",
-        "v8-compile-cache": "^2.0.3"
+        "text-table": "^0.2.0"
       },
       "dependencies": {
         "ansi-regex": {
@@ -5982,6 +6581,16 @@
           "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
           "dev": true
         },
+        "find-up": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^6.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
         "glob-parent": {
           "version": "6.0.2",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -6016,6 +6625,24 @@
             "type-check": "~0.4.0"
           }
         },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
         "optionator": {
           "version": "0.9.1",
           "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -6030,6 +6657,30 @@
             "word-wrap": "^1.2.3"
           }
         },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+          "dev": true
+        },
         "path-key": {
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -6269,13 +6920,13 @@
       "dev": true
     },
     "espree": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
-      "integrity": "sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz",
+      "integrity": "sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==",
       "dev": true,
       "requires": {
-        "acorn": "^8.7.0",
-        "acorn-jsx": "^5.3.1",
+        "acorn": "^8.8.0",
+        "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.3.0"
       },
       "dependencies": {
@@ -6334,9 +6985,9 @@
       "dev": true
     },
     "estree-walker": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.0.tgz",
-      "integrity": "sha512-s6ceX0NFiU/vKPiKvFdR83U1Zffu7upwZsGwpoqfg5rbbq1l50WQ5hCeIvM6E6oD4shUHCYMsiFPns4Jk0YfMQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.1.tgz",
+      "integrity": "sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==",
       "dev": true
     },
     "esutils": {
@@ -6498,6 +7149,15 @@
       "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
       "dev": true
     },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -6534,12 +7194,30 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      }
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -6547,14 +7225,14 @@
       "dev": true
     },
     "get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
+      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
       "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
-        "has-symbols": "^1.0.1"
+        "has-symbols": "^1.0.3"
       }
     },
     "get-symbol-description": {
@@ -6600,18 +7278,18 @@
       }
     },
     "globals": {
-      "version": "13.13.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.13.0.tgz",
-      "integrity": "sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==",
+      "version": "13.17.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+      "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
       "dev": true,
       "requires": {
         "type-fest": "^0.20.2"
       }
     },
     "globalyzer": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.4.tgz",
-      "integrity": "sha512-LeguVWaxgHN0MNbWC6YljNMzHkrCny9fzjmEUdnF1kQ7wATFD1RHFRqA1qxaX2tgxGENlcxjOflopBwj3YZiXA==",
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
       "dev": true
     },
     "globby": {
@@ -6634,6 +7312,12 @@
       "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
       "dev": true
     },
+    "grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+      "dev": true
+    },
     "growl": {
       "version": "1.10.5",
       "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
@@ -6666,9 +7350,9 @@
       }
     },
     "has-bigints": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
-      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
       "dev": true
     },
     "has-flag": {
@@ -6801,6 +7485,16 @@
       "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=",
       "dev": true
     },
+    "is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-bigint": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
@@ -6836,9 +7530,9 @@
       "dev": true
     },
     "is-callable": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "dev": true
     },
     "is-core-module": {
@@ -6851,10 +7545,13 @@
       }
     },
     "is-date-object": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
-      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
-      "dev": true
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
     },
     "is-extglob": {
       "version": "2.1.1",
@@ -6877,6 +7574,12 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-map": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
+      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "dev": true
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -6904,6 +7607,12 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true
+    },
     "is-reference": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz",
@@ -6923,6 +7632,12 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-set": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
+      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "dev": true
+    },
     "is-shared-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
@@ -6950,12 +7665,31 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "is-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
+      "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.20.0",
+        "for-each": "^0.3.3",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "is-weakmap": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
+      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "dev": true
+    },
     "is-weakref": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
@@ -6965,6 +7699,16 @@
         "call-bind": "^1.0.2"
       }
     },
+    "is-weakset": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
+      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -6983,6 +7727,12 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
+    "js-sdsl": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
+      "integrity": "sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==",
+      "dev": true
+    },
     "js-yaml": {
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
@@ -7087,9 +7837,9 @@
       }
     },
     "kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
       "dev": true
     },
     "levn": {
@@ -7394,11 +8144,21 @@
       "dev": true
     },
     "object-inspect": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
-      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
       "dev": true
     },
+    "object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -7669,6 +8429,17 @@
         "picomatch": "^2.0.4"
       }
     },
+    "regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      }
+    },
     "regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -7854,6 +8625,17 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -7911,9 +8693,9 @@
       "dev": true
     },
     "source-map-support": {
-      "version": "0.5.13",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
-      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
@@ -7984,23 +8766,25 @@
       }
     },
     "string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       }
     },
     "string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       }
     },
     "strip-ansi": {
@@ -8098,13 +8882,13 @@
       }
     },
     "tiny-glob": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.6.tgz",
-      "integrity": "sha512-A7ewMqPu1B5PWwC3m7KVgAu96Ch5LA0w4SnEN/LbDREj/gAD0nPWboRbn8YoP9ISZXqeNAlMvKSKoEuhcfK3Pw==",
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
       "dev": true,
       "requires": {
-        "globalyzer": "^0.1.0",
-        "globrex": "^0.1.1"
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
       }
     },
     "to-regex-range": {
@@ -8155,9 +8939,9 @@
       }
     },
     "tslib": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
-      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
     "tsutils": {
@@ -8220,14 +9004,14 @@
       "dev": true
     },
     "unbox-primitive": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
-      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
       "dev": true,
       "requires": {
-        "function-bind": "^1.1.1",
-        "has-bigints": "^1.0.1",
-        "has-symbols": "^1.0.2",
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
         "which-boxed-primitive": "^1.0.2"
       }
     },
@@ -8252,12 +9036,6 @@
       "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
       "dev": true
     },
-    "v8-compile-cache": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
-      "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
-      "dev": true
-    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -8343,12 +9121,38 @@
         "is-symbol": "^1.0.3"
       }
     },
+    "which-collection": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
+      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "dev": true,
+      "requires": {
+        "is-map": "^2.0.1",
+        "is-set": "^2.0.1",
+        "is-weakmap": "^2.0.1",
+        "is-weakset": "^2.0.1"
+      }
+    },
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "which-typed-array": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
+      "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.20.0",
+        "for-each": "^0.3.3",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.9"
+      }
+    },
     "wide-align": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
@@ -8494,6 +9298,12 @@
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"
       }
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
     }
   }
 }
diff --git a/package.json b/package.json
index 245c9b1834..43d288a0fb 100644
--- a/package.json
+++ b/package.json
@@ -129,19 +129,19 @@
     "@types/node": "^8.10.53",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
-    "acorn": "^8.4.1",
-    "agadoo": "^1.1.0",
-    "aria-query": "^5.0.0",
-    "axobject-query": "^3.0.1",
+    "acorn": "^8.8.1",
+    "agadoo": "^2.0.0",
+    "aria-query": "^5.1.1",
+    "axobject-query": "^3.1.1",
     "code-red": "^0.2.5",
-    "css-tree": "^2.1.0",
-    "eslint": "^8.0.0",
+    "css-tree": "^2.2.1",
+    "eslint": "^8.26.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "estree-walker": "^3.0.0",
+    "estree-walker": "^3.0.1",
     "is-reference": "^3.0.0",
     "jsdom": "^15.2.1",
-    "kleur": "^3.0.3",
+    "kleur": "^4.1.5",
     "locate-character": "^2.0.5",
     "magic-string": "^0.25.3",
     "mocha": "^7.0.0",
@@ -149,10 +149,10 @@
     "puppeteer": "^2.0.0",
     "rollup": "^1.27.14",
     "source-map": "^0.7.4",
-    "source-map-support": "^0.5.13",
+    "source-map-support": "^0.5.21",
     "sourcemap-codec": "^1.4.8",
-    "tiny-glob": "^0.2.6",
-    "tslib": "^2.0.3",
+    "tiny-glob": "^0.2.9",
+    "tslib": "^2.4.0",
     "typescript": "^3.7.5"
   }
 }

From 74fdbb670ba426484c6d22a3c30fe798d97bf6e7 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 9 Nov 2022 10:25:25 -0800
Subject: [PATCH 113/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 491da451c4..99eb41fa58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,8 @@
 # Svelte changelog
 
 ## Unreleased
-* Upgraded `css-tree` to `2.1.0` ([#7572](https://github.com/sveltejs/svelte/pull/7572))
+* Upgrade dependendencies. Particularly, `css-tree` to `2.2.1` ([#7572](https://github.com/sveltejs/svelte/pull/7572). [#7982](https://github.com/sveltejs/svelte/pull/7982))
+* Add new `css: 'external'|'injected'|'none'` options and deprecate old `true|false` values ([#7914](https://github.com/sveltejs/svelte/pull/7914))
 * Check if `parentNode` exists before removing child ([#6037](https://github.com/sveltejs/svelte/issues/6037))
 
 ## 3.52.0

From 80d4f55a061e1ddfdfa28a9c2762d6e776ec8727 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 9 Nov 2022 16:24:27 -0500
Subject: [PATCH 114/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99eb41fa58..7dd2670234 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,9 @@
 # Svelte changelog
 
 ## Unreleased
-* Upgrade dependendencies. Particularly, `css-tree` to `2.2.1` ([#7572](https://github.com/sveltejs/svelte/pull/7572). [#7982](https://github.com/sveltejs/svelte/pull/7982))
-* Add new `css: 'external'|'injected'|'none'` options and deprecate old `true|false` values ([#7914](https://github.com/sveltejs/svelte/pull/7914))
-* Check if `parentNode` exists before removing child ([#6037](https://github.com/sveltejs/svelte/issues/6037))
+* Check whether `parentNode` exists before removing child ([#6037](https://github.com/sveltejs/svelte/issues/6037))
+* Upgrade various dependencies, notably `css-tree` to `2.2.1` ([#7572](https://github.com/sveltejs/svelte/pull/7572), [#7982](https://github.com/sveltejs/svelte/pull/7982))
+* Extend `css` compiler option with `'external' | 'injected' | 'none'` settings and deprecate old `true | false` values ([#7914](https://github.com/sveltejs/svelte/pull/7914))
 
 ## 3.52.0
 

From b2d36075aeb5a9110caa66d2d383d44befcf00b8 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 9 Nov 2022 16:51:48 -0500
Subject: [PATCH 115/145] -> v3.53.0

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7dd2670234..e21eda25af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Svelte changelog
 
-## Unreleased
+## 3.53.0
+
 * Check whether `parentNode` exists before removing child ([#6037](https://github.com/sveltejs/svelte/issues/6037))
 * Upgrade various dependencies, notably `css-tree` to `2.2.1` ([#7572](https://github.com/sveltejs/svelte/pull/7572), [#7982](https://github.com/sveltejs/svelte/pull/7982))
 * Extend `css` compiler option with `'external' | 'injected' | 'none'` settings and deprecate old `true | false` values ([#7914](https://github.com/sveltejs/svelte/pull/7914))
diff --git a/package-lock.json b/package-lock.json
index 3498392e23..28df4a5fcb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.52.0",
+  "version": "3.53.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.52.0",
+      "version": "3.53.0",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index 43d288a0fb..331e1af772 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.52.0",
+  "version": "3.53.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From ea219f4ed83883d4354e7f13c0749ba300e3e130 Mon Sep 17 00:00:00 2001
From: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Date: Thu, 10 Nov 2022 17:39:25 +0545
Subject: [PATCH 116/145] [chore] patch bump tslib (#8015)

closes #8013
ref: microsoft/tslib#160
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 28df4a5fcb..10deb8cbe5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,7 +46,7 @@
         "source-map-support": "^0.5.21",
         "sourcemap-codec": "^1.4.8",
         "tiny-glob": "^0.2.9",
-        "tslib": "^2.4.0",
+        "tslib": "^2.4.1",
         "typescript": "^3.7.5"
       },
       "engines": {
@@ -4824,9 +4824,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
       "dev": true
     },
     "node_modules/tsutils": {
@@ -8939,9 +8939,9 @@
       }
     },
     "tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
       "dev": true
     },
     "tsutils": {
diff --git a/package.json b/package.json
index 331e1af772..52017504a5 100644
--- a/package.json
+++ b/package.json
@@ -152,7 +152,7 @@
     "source-map-support": "^0.5.21",
     "sourcemap-codec": "^1.4.8",
     "tiny-glob": "^0.2.9",
-    "tslib": "^2.4.0",
+    "tslib": "^2.4.1",
     "typescript": "^3.7.5"
   }
 }

From ee480bded663e3e345332da4a9cce53dd4ede9fb Mon Sep 17 00:00:00 2001
From: Dominik G <dominik.goepel@gmx.de>
Date: Thu, 10 Nov 2022 14:00:08 +0100
Subject: [PATCH 117/145] [fix] only read static value for rel attribute
 validation (#8003)

fixes #7994
---
 src/compiler/compile/nodes/Element.ts         | 23 ++++++++++---------
 .../input.svelte                              |  4 +++-
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 303b2e9122..ca9bcb8c4e 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -620,17 +620,18 @@ export default class Element extends Node {
 
 				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 (rel == null || rel.is_static) {
+						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}"`
+								});
+							}
+						});
+					}
 				}
 			}
 
diff --git a/test/validator/samples/security-anchor-rel-noreferrer/input.svelte b/test/validator/samples/security-anchor-rel-noreferrer/input.svelte
index de52d5a596..f5361e5cfe 100644
--- a/test/validator/samples/security-anchor-rel-noreferrer/input.svelte
+++ b/test/validator/samples/security-anchor-rel-noreferrer/input.svelte
@@ -28,4 +28,6 @@
 <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
+<a href="//svelte.dev" target="_blank" rel="noreferrer noopener">svelte website (valid)</a>
+<!-- dynamic rel value should not warn-->
+<a href="//svelte.dev" target="_blank" rel={`${Math.random()}`}>svelte website (valid)</a>

From f4779eee4a855fac5aa18c1c6e568f14b6ef1643 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 10 Nov 2022 15:10:09 +0100
Subject: [PATCH 118/145] [fix] don't emit css option deprecation warning for
 now (#8012)

---
 CHANGELOG.md                  |  4 ++++
 src/compiler/compile/index.ts | 16 +++++++++-------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e21eda25af..3f9bd6196f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Do not emit deprecation warnings for `css` compiler options for now ([#8009](https://github.com/sveltejs/svelte/issues/8009))
+
 ## 3.53.0
 
 * Check whether `parentNode` exists before removing child ([#6037](https://github.com/sveltejs/svelte/issues/6037))
diff --git a/src/compiler/compile/index.ts b/src/compiler/compile/index.ts
index 38a3da057c..7a18231cef 100644
--- a/src/compiler/compile/index.ts
+++ b/src/compiler/compile/index.ts
@@ -89,13 +89,15 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 
 	if (css === true || css === false) {
 		options.css = css === true ? 'injected' : 'external';
-		const message = `options.css as a boolean is deprecated. Use '${options.css}' instead of ${css}.`;
-		warnings.push({
-			code: 'options-css-boolean-deprecated',
-			message,
-			filename,
-			toString: () => message
-		});
+		// possibly show this warning once we decided how Svelte 4 looks like
+		// const message = `options.css as a boolean is deprecated. Use '${options.css}' instead of ${css}.`;
+		// warnings.push({
+		// 	code: 'options-css-boolean-deprecated',
+		// 	message,
+		// 	filename,
+		// 	toString: () => message
+		// });
+		// }
 	}
 
 	if (namespace && valid_namespaces.indexOf(namespace) === -1) {

From e48fa4ac29bdeee7ee3cdb2eb2601028ae66b49a Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 10 Nov 2022 15:10:40 +0100
Subject: [PATCH 119/145] [fix] util polyfill to make compiler self-contained
 (#8014)

this is needed for running the Svelte compiler in the browser
Fixes #8010
---
 package-lock.json | 53 ++++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |  3 ++-
 rollup.config.js  | 12 ++++++++++-
 3 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 10deb8cbe5..57f1d143ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,8 @@
         "sourcemap-codec": "^1.4.8",
         "tiny-glob": "^0.2.9",
         "tslib": "^2.4.1",
-        "typescript": "^3.7.5"
+        "typescript": "^3.7.5",
+        "util": "^0.12.5"
       },
       "engines": {
         "node": ">= 8"
@@ -3070,6 +3071,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -4935,6 +4951,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -7565,6 +7594,15 @@
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
       "dev": true
     },
+    "is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -9024,6 +9062,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 52017504a5..04da27a4a4 100644
--- a/package.json
+++ b/package.json
@@ -153,6 +153,7 @@
     "sourcemap-codec": "^1.4.8",
     "tiny-glob": "^0.2.9",
     "tslib": "^2.4.1",
-    "typescript": "^3.7.5"
+    "typescript": "^3.7.5",
+    "util": "^0.12.5"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index b60423c35c..8ce26f4b84 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -108,8 +108,18 @@ export default [
 		input: 'src/compiler/index.ts',
 		plugins: [
 			replace({
-				__VERSION__: pkg.version
+				__VERSION__: pkg.version,
+				'process.env.NODE_DEBUG': false // appears inside the util package
 			}),
+			{
+				resolveId(id) {
+					// util is a built-in module in Node.js, but we want a self-contained compiler bundle
+					// that also works in the browser, so we load its polyfill instead
+					if (id === 'util') {
+						return require.resolve('./node_modules/util'); // just 'utils' would resolve this to the built-in module
+					}
+				}
+			},
 			resolve(),
 			commonjs({
 				include: ['node_modules/**']

From 91f8764145f2c2b3c30bfec5a3b409df8e0ddcc9 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 10 Nov 2022 09:15:07 -0500
Subject: [PATCH 120/145] -> v3.53.1

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f9bd6196f..2cb521f390 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,8 +1,11 @@
 # Svelte changelog
 
-## Unreleased
+## 3.53.1
 
+* Fix exception in `rel=` attribute check with dynamic values ([#7994](https://github.com/sveltejs/svelte/issues/7994))
 * Do not emit deprecation warnings for `css` compiler options for now ([#8009](https://github.com/sveltejs/svelte/issues/8009))
+* Make compiler run in browser again ([#8010](https://github.com/sveltejs/svelte/issues/8010))
+* Upgrade `tslib` ([#8013](https://github.com/sveltejs/svelte/issues/8013))
 
 ## 3.53.0
 
diff --git a/package-lock.json b/package-lock.json
index 57f1d143ef..59c853fa4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.53.0",
+  "version": "3.53.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.53.0",
+      "version": "3.53.1",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index 04da27a4a4..2aa56623cb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.53.0",
+  "version": "3.53.1",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From 1852bc4640d70d4ff2b4893d49dca31bb3542ba5 Mon Sep 17 00:00:00 2001
From: Dani Sandoval <daniel@desandoval.net>
Date: Fri, 2 Dec 2022 03:48:30 -0700
Subject: [PATCH 121/145] [docs] "What's new in Svelte" December newsletter
 (#8064)

---
 ...12-01-whats-new-in-svelte-december-2022.md | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 site/content/blog/2022-12-01-whats-new-in-svelte-december-2022.md

diff --git a/site/content/blog/2022-12-01-whats-new-in-svelte-december-2022.md b/site/content/blog/2022-12-01-whats-new-in-svelte-december-2022.md
new file mode 100644
index 0000000000..8fe4223adb
--- /dev/null
+++ b/site/content/blog/2022-12-01-whats-new-in-svelte-december-2022.md
@@ -0,0 +1,102 @@
+---
+title: "What's new in Svelte: December 2022"
+description: "Rounding the corner to SvelteKit 1.0"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+SvelteKit 1.0 is just around the corner! With [99% of the milestone issues completed](https://github.com/sveltejs/kit/milestone/2), there's a lot of new changes from the last month to cover...
+
+Let's get to it!
+
+## What's new in SvelteKit
+- Use the `willUnload` property to find out if the navigation will result the app being unloaded (full page reload/closing/leaving to another page). ([#6813](https://github.com/sveltejs/kit/pull/6813))
+- `__data.json` requests now allows for caching while ensuring we cache matching responses for all invalidation scenarios ([#7532](https://github.com/sveltejs/kit/pull/7532))
+- Linking to `<a name="hash">` tags is now supported ([#7596](https://github.com/sveltejs/kit/pull/7596))
+- Throwing redirects in the `handle` hook is now supported ([#7612](https://github.com/sveltejs/kit/pull/7612))
+- A fallback component will now be added automatically for layouts without one ([#7619](https://github.com/sveltejs/kit/pull/7619))
+- The new `preload` function within the `resolve` hook determines what files should be added to the <head> tag to preload it ([Docs](https://kit.svelte.dev/docs/hooks#server-hooks-handle), [#4963](https://github.com/sveltejs/kit/pull/4963), [#7704](https://github.com/sveltejs/kit/pull/7704))
+- `version` is now available via `$app/environment` ([#7689](https://github.com/sveltejs/kit/pull/7689), [#7694](https://github.com/sveltejs/kit/pull/7694))
+- `handleError` can now return a promise ([#7780](https://github.com/sveltejs/kit/pull/7780))
+
+
+**Breaking changes:**
+- `routeId` is now `route.id` ([#7450](https://github.com/sveltejs/kit/pull/7450))
+- 'load' has been renamed to 'enter' and 'unload' to 'leave' in the `beforeNavigate` and `afterNavigate` methods. `beforeNavigate` is now called once with type 'unload' on external navigation and will no longer run during redirects ([#7502](https://github.com/sveltejs/kit/pull/7502), [#7529](https://github.com/sveltejs/kit/pull/7529), [#7588](https://github.com/sveltejs/kit/pull/7588))
+- The `redirect` helper will now only allow status codes between 300-308 for redirects and only `error` status codes between 400-599 are allowed ([#7767](https://github.com/sveltejs/kit/pull/7767)) ([#7615](https://github.com/sveltejs/kit/pull/7615), [#7767](https://github.com/sveltejs/kit/pull/7767))
+- Special characters will now be encoded with hex/unicode escape sequences in route directory names ([#7644](https://github.com/sveltejs/kit/pull/7644))
+- devalue is now used to (de)serialize action data - this is only a breaking change for everyone who fetches the actions directly and doesn't go through `use:enhance` ([#7494](https://github.com/sveltejs/kit/pull/7494))
+- `trailingSlash` is now a page option, rather than configuration ([#7719](https://github.com/sveltejs/kit/pull/7719))
+- The client-side router now ignores links outside `%sveltekit.body%` ([#7766](https://github.com/sveltejs/kit/pull/7766))
+- `prerendering` is now named `building`, and `config.kit.prerender.enabled` has been removed ([#7762](https://github.com/sveltejs/kit/pull/7762))
+- `getStaticDirectory()` has been removed from the builder API ([#7809](https://github.com/sveltejs/kit/pull/7809))
+- The `format` option has been removed from `generateManifest(...)` ([#7820](https://github.com/sveltejs/kit/pull/7820))
+- `data-sveltekit-prefetch` has been replaced with `-preload-code` and `-preload-data`, `prefetch` is now `preloadData` and `prefetchRoutes` is now `preloadCode` ([#7776](https://github.com/sveltejs/kit/pull/7776), [#7776](https://github.com/sveltejs/kit/pull/7776))
+- `SubmitFunction` has been moved from `$app/forms` into `@sveltejs/kit` ([#7003](https://github.com/sveltejs/kit/pull/7003))
+
+## New in Svelte
+- The css compiler options of `css: false` and `css: true` have been replaced with `'external' | 'injected' | 'none'` settings to speed up compilation for `ssr` builds and improve clarity (**3.53.0**)
+
+For all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [Appwrite's new console](https://github.com/appwrite/console) makes its secure backend server for web, mobile & Flutter developers avaiable in the browser
+- [RepoMagic](https://www.repomagic.com/) is a search and analytics tool for GitHub
+- [Podman Desktop](https://github.com/containers/podman-desktop) is a graphical tool for developing on containers and Kubernetes
+- [Ballerine](https://github.com/ballerine-io/ballerine) is a Know Your Customer (KYC) UX for any vertical or geography using modular building blocks, components, and 3rd party integrations
+- [Budget Pen](https://github.com/Nico-Mayer/budget_pen) is a Codepen-like browser code editor with Tailwind included
+- [doTogether](https://github.com/SarcevicAntonio/doTogether) helps you keep track of stuff you have get done via a List of recurring Tasks
+- [Webscraped College Results](https://www.redditcollegeresults.com/) is a collection of visualizations for data from r/collegeresults
+- [Let's premortem](https://letspremortem.com/) helps avoid lengthy, frustrating post-mortems after a project fails
+- [BLKMARKET.COM](https://beta.blkmarket.com/) is an illustration library for commercial and personal use
+- [Sigil](https://sigilspace.com/) is a canvas for anything with spaces organized by the most-voted content
+- [corpus-activity-streams](https://github.com/ryanatkn/corpus-activity-streams) is an unofficial ActivityStreams 2.0 vocabulary data set and alternative docs 
+- [nodeMyAdmin](https://github.com/Andrea055/nodeMyAdmin) is an alternative to phpMyAdmin written with SvelteKit
+- [Image to Pattern Conversion](https://www.thread-bare.com/convert) is a cross-stitch pattern conversion tool with [a list of pre-made patterns](https://www.thread-bare.com/store) to start with
+- [Verbums](https://verbums.vdoc.dev/) is an English vocabulary trainer to improve language comprehension
+- [SVGPS](https://svgps.app/) removes the burden of working with a cluster of SVG files by converting your icons into a single JSON file
+- [This 3D retro-themed asteroid shooter](https://photon-alexwarnes.vercel.app/showcase/asteroids) was made with threlte
+
+
+**Learning Resources**
+
+_To Hear_
+- [Catching up after Svelte Summit](https://www.svelteradio.com/episodes/catching-up) and [3D, WebGL and AI](https://www.svelteradio.com/episodes/3d-webgl-and-ai) by Svelte Radio
+
+_To Watch_
+- [Domenik Reitzner - The easy way, an introduction to Sveltekit](https://www.youtube.com/watch?v=t-LKRrNedps) from Svelte Society Vienna
+- [Sirens: Form Actions](https://www.youtube.com/watch?v=2OISk5-EHek) - Kev joins the Sirens again to chat about Form actions in SvelteKit and create a new form for speaker submissions on SvelteSirens.dev
+- [Introduction To 3D With Svelte (Threlte)](https://www.youtube.com/watch?v=89LYeHOncVk), [How To Use Global Styles In SvelteKit](https://www.youtube.com/watch?v=jHSwChkx3TQ) and [Progressive Form Enhancement With SvelteKit](https://www.youtube.com/watch?v=6pv70d7i-3Q) by Joy of Code
+
+_To Read_
+- [Building tic-tac-toe with Svelte](https://geoffrich.net/posts/tic-tac-toe/) by Geoff Rich
+- [Speed up SvelteKit Pages With a Redis Cache](https://www.captaincodeman.com/speed-up-sveltekit-pages-with-a-redis-cache) by Captain Codeman
+- [Understanding environment variables in SvelteKit](https://www.okupter.com/blog/environment-variables-in-sveltekit), [Form validation with SvelteKit and Zod](https://www.okupter.com/blog/sveltekit-form-validation-with-zod) and [Build a SvelteKit application with Docker](https://www.okupter.com/blog/build-a-sveltekit-application-with-docker) by Justin Ahinon
+- [Why I failed to create the "Solid.js's store" for Svelte, and announcing svelte-store-tree v0.3.1](https://dev.to/igrep/why-i-failed-to-create-the-solidjss-store-for-svelte-and-announcing-svelte-store-tree-v031-1am2) by YAMAMOTO Yuji
+- [Create an offline-first and installable PWA with SvelteKit and workbox-precaching](https://www.sarcevic.dev/offline-first-installable-pwa-sveltekit-workbox-precaching) by Antonio Sarcevic
+
+
+
+**Libraries, Tools & Components**
+- [Skeleton](https://www.skeleton.dev/) is a UI toolkit to build fast and reactive web interfaces using Svelte + Tailwind CSS
+- [svelte-svg-spinners](https://github.com/luluvia/svelte-svg-spinners) is a collection of SVG Spinners components
+- [Svelte Floating UI](https://github.com/fedorovvvv/svelte-floating-ui) enables floating UIs with actions - no wrapper components or component bindings required
+- [at-html](https://github.com/micha-lmxt/at-html) lets you use `{@html }` tags with slots in Svelte apps
+- [html-svelte-parser](https://github.com/PatrickG/html-svelte-parser) is a HTML to Svelte parser that works on both the server (Node.js) and the client (browser)
+- [svelte-switcher](https://github.com/rohitpotato/svelte-switcher) is a fully customisable, touch-friendly, accessible and tiny toggle component
+- [sveltkit-hook-html-minifier](https://www.npmjs.com/package/@svackages/sveltkit-hook-html-minifier) is a hook that wrapps `html-minifier`
+- [sveltekit-hook-redirect](https://www.npmjs.com/package/@svackages/sveltekit-hook-redirect) is a hook that makes redirects easy
+- [sveltekit-video-meet](https://github.com/harshmangalam/sveltekit-video-meet) is a video calling web app built with SvelteKit and SocketIO
+- [svelte-colourpicker](https://www.npmjs.com/package/svelte-colourpicker) is a lightweight opinionated colour picker component for Svelte
+- [Svelte-HeadlessUI](https://captaincodeman.github.io/svelte-headlessui/) is an unofficial implementation of Tailwind HeadlessUI for Svelte
+- [svelte-lazyimage-cache](https://github.com/binsarjr/svelte-lazyimage-cache) is a Lazy Image component with IntersectionObserver and cache action
+- [threlte v5.0](https://www.reddit.com/r/sveltejs/comments/ywit18/threlte_v50_is_here_a_completely_new_developer/) is a completely new developer experience that is faster, more powerful, and incredibly flexible
+
+
+That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte)
+
+See ya next near 🎆

From e86c0c610bc277180dd95e15c5c130ed8cf9bc9b Mon Sep 17 00:00:00 2001
From: Christian Bromann <git@bromann.dev>
Date: Sat, 3 Dec 2022 06:03:45 +0100
Subject: [PATCH 122/145] [docs] Add WebdriverIO as alternative testing
 solution

---
 site/content/faq/800-how-do-i-test-svelte-apps.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/content/faq/800-how-do-i-test-svelte-apps.md b/site/content/faq/800-how-do-i-test-svelte-apps.md
index 1481b6ba59..0e9bc9e146 100644
--- a/site/content/faq/800-how-do-i-test-svelte-apps.md
+++ b/site/content/faq/800-how-do-i-test-svelte-apps.md
@@ -4,9 +4,10 @@ question: How do I test Svelte apps?
 
 We recommend trying to separate your view logic from your business logic. Data transformation or cross component state management is best kept outside of Svelte components. You can test those parts like you would test any JavaScript functionality that way. When it comes to testing the components, it is best to test the logic of the component and remember that the Svelte library has its own tests and you do not need to test implementation details provided by Svelte.
 
-There are a few approaches that people take when testing, but it generally involves compiling the component and mounting it to something and then performing the tests. You essentially need to create a bundle for each component you're testing (since svelte is a compiler and not a normal library) and then mount them. You can mount to a JSDOM instance. Or you can use a real browser powered by a library like Playwright, Puppeteer, or Cypress.
+There are a few approaches that people take when testing, but it generally involves compiling the component and mounting it to something and then performing the tests. You essentially need to create a bundle for each component you're testing (since svelte is a compiler and not a normal library) and then mount them. You can mount to a JSDOM instance. Or you can use a real browser powered by a library like Playwright, Puppeteer, WebdriverIO or Cypress.
 
 Some resources for getting started with unit testing:
 - [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
 - [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/svelte)
 - [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
+- [Component testing in real browser](https://webdriver.io/docs/component-testing/svelte)

From e44762aa2d5a7fde6371c45ff3c212eae912f57b Mon Sep 17 00:00:00 2001
From: Simon He <57086651+Simon-He95@users.noreply.github.com>
Date: Sat, 3 Dec 2022 14:54:32 +0800
Subject: [PATCH 123/145] [chore] add ESLint Caching (#8069)

see: https://eslint.org/docs/latest/user-guide/command-line-interface#caching
---
 .gitignore   | 1 +
 package.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 478a6f5ceb..e70d995994 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ node_modules
 _actual*.*
 _output
 /types
+.eslintcache
diff --git a/package.json b/package.json
index 2aa56623cb..4fde354b6a 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
     "posttest": "agadoo internal/index.mjs",
     "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}\""
+    "lint": "eslint \"{src,test}/**/*.{ts,js}\" --cache"
   },
   "repository": {
     "type": "git",

From 6923b2e99b901d23808f014c6bfbced889f949bf Mon Sep 17 00:00:00 2001
From: Frozen FIsh <76603360+sudongyuer@users.noreply.github.com>
Date: Sat, 3 Dec 2022 22:42:07 +0800
Subject: [PATCH 124/145] [chore] upgrade node to 18 (#8018)

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 948f5d3bac..bd826cafca 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: npm
       - run: npm install
         env:

From 8b462fd7da8d6d0c43f5a208f4dfaa0923540769 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 3 Dec 2022 06:55:51 -0800
Subject: [PATCH 125/145] [docs] Fix 3.52.0 a11y warning in svelte-self
 tutorial (#7988)

* fix svelte 3.52 a11y warning

* replace span with button and drop on:keyup
---
 .../16-special-elements/01-svelte-self/app-a/Folder.svelte  | 6 ++++--
 .../16-special-elements/01-svelte-self/app-b/Folder.svelte  | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
index e93ffdc548..814e383924 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
@@ -10,7 +10,7 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}>{name}</span>
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
@@ -27,12 +27,14 @@
 {/if}
 
 <style>
-	span {
+	button {
 		padding: 0 0 0 1.5em;
 		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
+		border: none;
+		margin: 0;
 	}
 
 	.expanded {
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
index d3fc3a431f..bc9fca21f6 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
@@ -10,7 +10,7 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}>{name}</span>
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
@@ -27,12 +27,14 @@
 {/if}
 
 <style>
-	span {
+	button {
 		padding: 0 0 0 1.5em;
 		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
+		border: none;
+		margin: 0;
 	}
 
 	.expanded {

From 14f33cfe6191f63b9ac3f6d4b273c67b1cdec955 Mon Sep 17 00:00:00 2001
From: Sanguansak Petchmeesri <nguansak@gmail.com>
Date: Sat, 3 Dec 2022 22:42:34 +0700
Subject: [PATCH 126/145] [docs] add rel noreferrer to fix warning in tutorial
 (#8024)

Co-authored-by: vaishnav <vaishnav240204@gmail.com>
Co-authored-by: Alfredo Vecino <fredovecino@gmail.com>
Co-authored-by: Yuichiro Yamashita <xydybaseball@gmail.com>
---
 .../09-transitions/06-deferred-transitions/App.svelte       | 4 ++--
 .../examples/21-miscellaneous/01-hacker-news/Summary.svelte | 4 ++--
 .../tutorial/04-logic/04-each-blocks/app-a/App.svelte       | 2 +-
 .../tutorial/04-logic/04-each-blocks/app-b/App.svelte       | 2 +-
 site/content/tutorial/04-logic/04-each-blocks/text.md       | 6 +++---
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/site/content/examples/09-transitions/06-deferred-transitions/App.svelte b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte
index f8c74081fe..5ee7da1263 100644
--- a/site/content/examples/09-transitions/06-deferred-transitions/App.svelte
+++ b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte
@@ -56,8 +56,8 @@
 					>
 
 					<p class='credit'>
-						<a target="_blank" href="https://www.flickr.com/photos/{d.path}">via Flickr</a> &ndash;
-						<a target="_blank" href={d.license.url}>{d.license.name}</a>
+						<a target="_blank" rel="noreferrer" href="https://www.flickr.com/photos/{d.path}">via Flickr</a> &ndash;
+						<a target="_blank" rel="noreferrer" href={d.license.url}>{d.license.name}</a>
 					</p>
 				</div>
 			{/await}
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
index 08d515f3c2..2a54289119 100644
--- a/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
@@ -13,7 +13,7 @@
 
 <article>
 	<span>{i + offset + 1}</span>
-	<h2><a target="_blank" href={url}>{item.title}</a></h2>
+	<h2><a target="_blank" rel="noreferrer" href={url}>{item.title}</a></h2>
 	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
 </article>
 
@@ -37,4 +37,4 @@
 	a {
 		color: #333;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
index 34fb2cebfc..6c0cca3587 100644
--- a/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
+++ b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
@@ -10,7 +10,7 @@
 
 <ul>
 	<!-- open each block -->
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
 			{cat.name}
 		</a></li>
 	<!-- close each block -->
diff --git a/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
index 6ea5097be2..3a13c0057f 100644
--- a/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
+++ b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
@@ -10,7 +10,7 @@
 
 <ul>
 	{#each cats as { id, name }, i}
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}" rel="noreferrer">
 			{i + 1}: {name}
 		</a></li>
 	{/each}
diff --git a/site/content/tutorial/04-logic/04-each-blocks/text.md b/site/content/tutorial/04-logic/04-each-blocks/text.md
index 886990f5a0..c3a6c30d4e 100644
--- a/site/content/tutorial/04-logic/04-each-blocks/text.md
+++ b/site/content/tutorial/04-logic/04-each-blocks/text.md
@@ -7,7 +7,7 @@ If you need to loop over lists of data, use an `each` block:
 ```html
 <ul>
 	{#each cats as cat}
-		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
 			{cat.name}
 		</a></li>
 	{/each}
@@ -20,10 +20,10 @@ You can get the current *index* as a second argument, like so:
 
 ```html
 {#each cats as cat, i}
-	<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+	<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
 		{i + 1}: {cat.name}
 	</a></li>
 {/each}
 ```
 
-If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`.
\ No newline at end of file
+If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`.

From 84d61c61f883c206b87a6fc76c5690379059f979 Mon Sep 17 00:00:00 2001
From: Pat Cavit <github@patcavit.com>
Date: Mon, 5 Dec 2022 05:43:59 -0800
Subject: [PATCH 127/145] [feat] Add options w/ direction to transitions
 (#8068)

---
 site/content/docs/03-template-syntax.md       |  7 +++++-
 src/runtime/internal/transitions.ts           | 18 ++++++++------
 .../_config.js                                | 19 +++++++++++++++
 .../main.svelte                               | 24 +++++++++++++++++++
 .../transition-js-option-direction/_config.js | 13 ++++++++++
 .../main.svelte                               | 20 ++++++++++++++++
 6 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 test/runtime/samples/transition-js-deferred-option-direction/_config.js
 create mode 100644 test/runtime/samples/transition-js-deferred-option-direction/main.svelte
 create mode 100644 test/runtime/samples/transition-js-option-direction/_config.js
 create mode 100644 test/runtime/samples/transition-js-option-direction/main.svelte

diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index 9afe399469..de7ded9d6c 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -971,7 +971,7 @@ transition:fn|local={params}
 
 
 ```js
-transition = (node: HTMLElement, params: any) => {
+transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
 	delay?: number,
 	duration?: number,
 	easing?: (t: number) => number,
@@ -1091,6 +1091,11 @@ A custom transition function can also return a `tick` function, which is called
 
 If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible.
 
+Transition functions also receive a third argument, `options`, which contains information about the transition.
+
+Available values in the `options` object are:
+
+* `direction` - one of `in`, `out`, or `bidirectional` depending on the type of transition
 
 ##### Transition events
 
diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts
index 9aa45dc4f1..4705c0ac9a 100644
--- a/src/runtime/internal/transitions.ts
+++ b/src/runtime/internal/transitions.ts
@@ -86,10 +86,12 @@ export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, ca
 
 const null_transition: TransitionConfig = { duration: 0 };
 
-type TransitionFn = (node: Element, params: any) => TransitionConfig;
+type TransitionOptions = { direction: 'in' | 'out' | 'both' };
+type TransitionFn = (node: Element, params: any, options: TransitionOptions) => TransitionConfig;
 
 export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {
-	let config = fn(node, params);
+	const options: TransitionOptions = { direction: 'in' };
+	let config = fn(node, params, options);
 	let running = false;
 	let animation_name;
 	let task;
@@ -150,7 +152,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 			delete_rule(node);
 
 			if (is_function(config)) {
-				config = config();
+				config = config(options);
 				wait().then(go);
 			} else {
 				go();
@@ -171,7 +173,8 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 }
 
 export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {
-	let config = fn(node, params);
+	const options: TransitionOptions = { direction: 'out' };
+	let config = fn(node, params, options);
 	let running = true;
 	let animation_name;
 
@@ -224,7 +227,7 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 	if (is_function(config)) {
 		wait().then(() => {
 			// @ts-ignore
-			config = config();
+			config = config(options);
 			go();
 		});
 	} else {
@@ -264,7 +267,8 @@ interface Program {
 }
 
 export function create_bidirectional_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any, intro: boolean) {
-	let config = fn(node, params);
+	const options: TransitionOptions = { direction: 'both' };
+	let config = fn(node, params, options);
 
 	let t = intro ? 0 : 1;
 
@@ -373,7 +377,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
 			if (is_function(config)) {
 				wait().then(() => {
 					// @ts-ignore
-					config = config();
+					config = config(options);
 					go(b);
 				});
 			} else {
diff --git a/test/runtime/samples/transition-js-deferred-option-direction/_config.js b/test/runtime/samples/transition-js-deferred-option-direction/_config.js
new file mode 100644
index 0000000000..2bf448d9c7
--- /dev/null
+++ b/test/runtime/samples/transition-js-deferred-option-direction/_config.js
@@ -0,0 +1,19 @@
+export default {
+	test({ assert, component, target }) {
+		component.visible = true;
+
+		const div_in = target.querySelector('#in');
+		const div_out = target.querySelector('#out');
+		const div_both = target.querySelector('#both');
+
+		assert.equal(div_in.initial, 'in');
+		assert.equal(div_out.initial, 'out');
+		assert.equal(div_both.initial, 'both');
+
+		return Promise.resolve().then(() => {
+			assert.equal(div_in.later, 'in');
+			assert.equal(div_out.later, 'out');
+			assert.equal(div_both.later, 'both');
+		});
+	}
+};
diff --git a/test/runtime/samples/transition-js-deferred-option-direction/main.svelte b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte
new file mode 100644
index 0000000000..9ac816ce75
--- /dev/null
+++ b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	export let visible;
+
+	function foo(node, _params, options) {
+		node.initial = options.direction;
+
+		return (opts) => {
+			node.later = opts.direction;
+
+			return {
+				duration: 10
+			};
+		};
+	}
+</script>
+
+{#if visible}
+	<div id="both" transition:foo></div>
+	<div id="in" in:foo></div>
+{/if}
+
+{#if !visible}
+	<div id="out" out:foo></div>
+{/if}
diff --git a/test/runtime/samples/transition-js-option-direction/_config.js b/test/runtime/samples/transition-js-option-direction/_config.js
new file mode 100644
index 0000000000..649b4ec7fa
--- /dev/null
+++ b/test/runtime/samples/transition-js-option-direction/_config.js
@@ -0,0 +1,13 @@
+export default {
+	test({ assert, component, target }) {
+		component.visible = true;
+
+		const div_in = target.querySelector('#in');
+		const div_out = target.querySelector('#out');
+		const div_both = target.querySelector('#both');
+
+		assert.equal(div_in.direction, 'in');
+		assert.equal(div_out.direction, 'out');
+		assert.equal(div_both.direction, 'both');
+	}
+};
diff --git a/test/runtime/samples/transition-js-option-direction/main.svelte b/test/runtime/samples/transition-js-option-direction/main.svelte
new file mode 100644
index 0000000000..7bae2c158d
--- /dev/null
+++ b/test/runtime/samples/transition-js-option-direction/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let visible = false;
+
+	function foo(node, _params, options) {
+		node.direction = options.direction;
+
+		return {
+			duration: 10
+		};
+	}
+</script>
+
+{#if visible}
+	<div id="both" transition:foo></div>
+	<div id="in" in:foo></div>
+{/if}
+
+{#if !visible}
+	<div id="out" out:foo></div>
+{/if}

From 6330bfc05285f945b750a3d78f28b7994d2a2e13 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Mon, 5 Dec 2022 22:44:40 +0900
Subject: [PATCH 128/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2cb521f390..65eadad36e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Svelte changelog
 
+## Unreleased
+
+* Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918))
+
+
 ## 3.53.1
 
 * Fix exception in `rel=` attribute check with dynamic values ([#7994](https://github.com/sveltejs/svelte/issues/7994))

From 676716979a95bf33333a2ba8185ceea63e7d7655 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 5 Dec 2022 15:00:51 +0100
Subject: [PATCH 129/145] [fix] a11y - allow fallback roles (#8045)

---
 src/compiler/compile/nodes/Element.ts         | 77 ++++++++++---------
 .../samples/a11y-aria-role/input.svelte       |  8 +-
 .../samples/a11y-aria-role/warnings.json      | 25 ++++--
 3 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index ca9bcb8c4e..a499d013e3 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -194,10 +194,10 @@ function is_valid_aria_attribute_value(schema: ARIAPropertyDefinition, value: st
 				.indexOf(typeof value === 'string' ? value.toLowerCase() : value) > -1;
 		case 'idlist': // if list of ids, split each
 			return typeof value === 'string'
-				&& value.split(' ').every((id) => typeof id === 'string');
+				&& value.split(regex_any_repeated_whitespaces).every((id) => typeof id === 'string');
 		case 'tokenlist': // if list of tokens, split each
 			return typeof value === 'string'
-				&& value.split(' ').every((token) => (schema.values || []).indexOf(token.toLowerCase()) > -1);
+				&& value.split(regex_any_repeated_whitespaces).every((token) => (schema.values || []).indexOf(token.toLowerCase()) > -1);
 		default:
 			return false;
 	}
@@ -492,47 +492,52 @@ export default class Element extends Node {
 					component.warn(attribute, compiler_warnings.a11y_misplaced_role(this.name));
 				}
 
-				const value = attribute.get_static_value() as ARIARoleDefintionKey;
+				const value = attribute.get_static_value();
 
-				if (value && aria_role_abstract_set.has(value)) {
-					component.warn(attribute, compiler_warnings.a11y_no_abstract_role(value));
-				} else if (value && !aria_role_set.has(value)) {
-					const match = fuzzymatch(value, aria_roles);
-					component.warn(attribute, compiler_warnings.a11y_unknown_role(value, match));
-				}
+				if (typeof value === 'string') {
+					value.split(regex_any_repeated_whitespaces).forEach((current_role: ARIARoleDefintionKey) => {
+						if (current_role && aria_role_abstract_set.has(current_role)) {
+							component.warn(attribute, compiler_warnings.a11y_no_abstract_role(current_role));
+						} else if (current_role && !aria_role_set.has(current_role)) {
+							const match = fuzzymatch(current_role, aria_roles);
+							component.warn(attribute, compiler_warnings.a11y_unknown_role(current_role, match));
+						}
 
-				// no-redundant-roles
-				const has_redundant_role = value === a11y_implicit_semantics.get(this.name);
+						// no-redundant-roles
+						const has_redundant_role = current_role === a11y_implicit_semantics.get(this.name);
 
-				if (this.name === value || has_redundant_role) {
-					component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(value));
-				}
+						if (this.name === current_role || has_redundant_role) {
+							component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(current_role));
+						}
 
-				// Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles.
-				const is_parent_section_or_article = is_parent(this.parent, ['section', 'article']);
-				if (!is_parent_section_or_article) {
-					const has_nested_redundant_role = value === a11y_nested_implicit_semantics.get(this.name);
-					if (has_nested_redundant_role) {
-						component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(value));
-					}
-				}
+						// Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles.
+						const is_parent_section_or_article = is_parent(this.parent, ['section', 'article']);
+						if (!is_parent_section_or_article) {
+							const has_nested_redundant_role = current_role === a11y_nested_implicit_semantics.get(this.name);
+							if (has_nested_redundant_role) {
+								component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(current_role));
+							}
+						}
 
-				// role-has-required-aria-props
-				if (!is_semantic_role_element(value, this.name, attribute_map)) {
-					const role = roles.get(value);
-					if (role) {
-						const required_role_props = Object.keys(role.requiredProps);
-						const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop));
+						// role-has-required-aria-props
+						if (!is_semantic_role_element(current_role, this.name, attribute_map)) {
+							const role = roles.get(current_role);
+							if (role) {
+								const required_role_props = Object.keys(role.requiredProps);
+								const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop));
 
-						if (has_missing_props) {
-							component.warn(attribute, compiler_warnings.a11y_role_has_required_aria_props(value as string, required_role_props));
+								if (has_missing_props) {
+									component.warn(attribute, compiler_warnings.a11y_role_has_required_aria_props(current_role, required_role_props));
+								}
+							}
 						}
-					}
-				}
 
-				// no-interactive-element-to-noninteractive-role
-				if (is_interactive_element(this.name, attribute_map) && (is_non_interactive_roles(value) || is_presentation_role(value))) {
-					component.warn(this, compiler_warnings.a11y_no_interactive_element_to_noninteractive_role(value, this.name));
+						// no-interactive-element-to-noninteractive-role
+						if (is_interactive_element(this.name, attribute_map) && (is_non_interactive_roles(current_role) || is_presentation_role(current_role))) {
+							component.warn(this, compiler_warnings.a11y_no_interactive_element_to_noninteractive_role(current_role, this.name));
+						}
+					});
+
 				}
 			}
 
@@ -621,7 +626,7 @@ export default class Element extends Node {
 				if (href_static_value === null || href_static_value.match(/^(https?:)?\/\//i)) {
 					const rel = attribute_map.get('rel');
 					if (rel == null || rel.is_static) {
-						const rel_values = rel ? rel.get_static_value().split(' ') : [];
+						const rel_values = rel ? rel.get_static_value().split(regex_any_repeated_whitespaces) : [];
 						const expected_values = ['noreferrer'];
 						expected_values.forEach(expected_value => {
 							if (!rel || rel && rel_values.indexOf(expected_value) < 0) {
diff --git a/test/validator/samples/a11y-aria-role/input.svelte b/test/validator/samples/a11y-aria-role/input.svelte
index 3089d84e5b..1dde21a2ad 100644
--- a/test/validator/samples/a11y-aria-role/input.svelte
+++ b/test/validator/samples/a11y-aria-role/input.svelte
@@ -1 +1,7 @@
-<div role="toooltip"></div>
\ No newline at end of file
+<!-- valid -->
+<div role="tooltip"></div>
+<div role="button tooltip"></div>
+
+<!-- not valid -->
+<div role="toooltip"></div>
+<div role="button toooltip"></div>
diff --git a/test/validator/samples/a11y-aria-role/warnings.json b/test/validator/samples/a11y-aria-role/warnings.json
index 22fb2d52b6..2943f232f8 100644
--- a/test/validator/samples/a11y-aria-role/warnings.json
+++ b/test/validator/samples/a11y-aria-role/warnings.json
@@ -3,15 +3,30 @@
 		"code": "a11y-unknown-role",
 		"message": "A11y: Unknown role 'toooltip' (did you mean 'tooltip'?)",
 		"start": {
-			"line": 1,
+			"line": 6,
 			"column": 5,
-			"character": 5
+			"character": 101
 		},
 		"end": {
-			"line": 1,
+			"line": 6,
 			"column": 20,
-			"character": 20
+			"character": 116
 		},
-		"pos": 5
+		"pos": 101
+	},
+	{
+		"code": "a11y-unknown-role",
+		"message": "A11y: Unknown role 'toooltip' (did you mean 'tooltip'?)",
+		"start": {
+			"line": 7,
+			"column": 5,
+			"character": 129
+		},
+		"end": {
+			"line": 7,
+			"column": 27,
+			"character": 151
+		},
+		"pos": 129
 	}
 ]

From de46e36315322f9785bb88cd0f3e78e42fd765c3 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Mon, 5 Dec 2022 23:01:14 +0900
Subject: [PATCH 130/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65eadad36e..3545785f66 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918))
+* Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044))
 
 
 ## 3.53.1

From ed3ac92ec075dc237de2994c7f5f9a38819fd79c Mon Sep 17 00:00:00 2001
From: Bert B <44912991+bertybot@users.noreply.github.com>
Date: Mon, 5 Dec 2022 09:25:25 -0500
Subject: [PATCH 131/145] [fix] Suppress `a11y-no-noninteractive-tabindex`
 warning if an element has a `tabpanel` (#8025)

* update tabindex warning to ignore tabpanels

* refactor

Co-authored-by: Yuichiro Yamashita <xydybaseball@gmail.com>
---
 src/compiler/compile/utils/a11y.ts            | 25 +++---------
 .../input.svelte                              |  1 +
 .../warnings.json                             | 40 +++++++++----------
 3 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts
index b96386a3b0..d51125fa92 100644
--- a/src/compiler/compile/utils/a11y.ts
+++ b/src/compiler/compile/utils/a11y.ts
@@ -7,17 +7,17 @@ import {
 import { AXObjects, AXObjectRoles, elementAXObjects } from 'axobject-query';
 import Attribute from '../nodes/Attribute';
 
-const roles = [...roles_map.keys()];
+const non_abstract_roles = [...roles_map.keys()].filter((name) => !roles_map.get(name).abstract);
 
 const non_interactive_roles = new Set(
-	roles
+	non_abstract_roles
 		.filter((name) => {
 			const role = roles_map.get(name);
 			return (
-				!roles_map.get(name).abstract &&
 				// 'toolbar' does not descend from widget, but it does support
 				// aria-activedescendant, thus in practice we treat it as a widget.
-				name !== 'toolbar' &&
+				// focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.
+				!['toolbar', 'tabpanel'].includes(name) &&
 				!role.superClass.some((classes) => classes.includes('widget'))
 			);
 		})
@@ -29,22 +29,7 @@ const non_interactive_roles = new Set(
 );
 
 const interactive_roles = new Set(
-	roles
-		.filter((name) => {
-			const role = roles_map.get(name);
-			return (
-				!role.abstract &&
-				// The `progressbar` is descended from `widget`, but in practice, its
-				// value is always `readonly`, so we treat it as a non-interactive role.
-				name !== 'progressbar' &&
-				role.superClass.some((classes) => classes.includes('widget'))
-			);
-		})
-		.concat(
-			// 'toolbar' does not descend from widget, but it does support
-			// aria-activedescendant, thus in practice we treat it as a widget.
-			'toolbar'
-		)
+	non_abstract_roles.filter((name) => !non_interactive_roles.has(name))
 );
 
 export function is_non_interactive_roles(role: ARIARoleDefintionKey) {
diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte
index e9ac0d3c9f..9efed4d879 100644
--- a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte
+++ b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte
@@ -7,6 +7,7 @@
 <div role='button' tabindex='0' />
 <div role='article' tabindex='-1' />
 <article tabindex='-1' />
+<div role="tabpanel" tabindex='0' />
 <!-- invalid -->
 <div tabindex='0' />
 <div role='article' tabindex='0' />
diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
index 740d9b346c..b2c3ec4168 100644
--- a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
+++ b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json
@@ -2,61 +2,61 @@
 	{
 		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
-			"character": 241,
+			"character": 278,
 			"column": 20,
-			"line": 11
+			"line": 12
 		},
 		"message": "A11y: noninteractive element cannot have positive tabIndex value",
-		"pos": 221,
+		"pos": 258,
 		"start": {
-			"character": 221,
+			"character": 258,
 			"column": 0,
-			"line": 11
+			"line": 12
 		}
 	},
 	{
 		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
-			"character": 277,
+			"character": 314,
 			"column": 35,
-			"line": 12
+			"line": 13
 		},
 		"message": "A11y: noninteractive element cannot have positive tabIndex value",
-		"pos": 242,
+		"pos": 279,
 		"start": {
-			"character": 242,
+			"character": 279,
 			"column": 0,
-			"line": 12
+			"line": 13
 		}
 	},
 	{
 		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
-			"character": 302,
+			"character": 339,
 			"column": 24,
-			"line": 13
+			"line": 14
 		},
 		"message": "A11y: noninteractive element cannot have positive tabIndex value",
-		"pos": 278,
+		"pos": 315,
 		"start": {
-			"character": 278,
+			"character": 315,
 			"column": 0,
-			"line": 13
+			"line": 14
 		}
 	},
 	{
 		"code": "a11y-no-noninteractive-tabindex",
 		"end": {
-			"character": 329,
+			"character": 366,
 			"column": 26,
-			"line": 14
+			"line": 15
 		},
 		"message": "A11y: noninteractive element cannot have positive tabIndex value",
-		"pos": 303,
+		"pos": 340,
 		"start": {
-			"character": 303,
+			"character": 340,
 			"column": 0,
-			"line": 14
+			"line": 15
 		}
 	}
 ]

From d2ff2aee4f6269868099dae42472c1be00d24576 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Mon, 5 Dec 2022 23:25:55 +0900
Subject: [PATCH 132/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3545785f66..bdad22e607 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 * Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918))
 * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044))
-
+* Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025))
 
 ## 3.53.1
 

From 4c5469b1ee55a9675240adaab5bb42ae8b7c3f3f Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 5 Dec 2022 15:43:39 +0100
Subject: [PATCH 133/145] [fix] don't run binding init unnecessarily (#7981)

---
 .../wrappers/InlineComponent/index.ts           |  2 +-
 src/runtime/internal/Component.ts               |  6 ++++--
 .../Tab.svelte                                  |  3 +++
 .../_config.js                                  |  7 +++++++
 .../main.svelte                                 | 17 +++++++++++++++++
 5 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte
 create mode 100644 test/runtime/samples/binding-no-unnecessary-invalidation/_config.js
 create mode 100644 test/runtime/samples/binding-no-unnecessary-invalidation/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 bca01fdb4c..f7875dc1b0 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -393,7 +393,7 @@ export default class InlineComponentWrapper extends Wrapper {
 
 			component.partly_hoisted.push(body);
 
-			return b`@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}));`;
+			return b`@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}, ${snippet}));`;
 		});
 
 		const munged_handlers = this.node.handlers.map(handler => {
diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index 5aec24c651..eedf8dd1ad 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -5,11 +5,13 @@ import { children, detach, start_hydrating, end_hydrating } from './dom';
 import { transition_in } from './transitions';
 import { T$$ } from './types';
 
-export function bind(component, name, callback) {
+export function bind(component, name, callback, value) {
 	const index = component.$$.props[name];
 	if (index !== undefined) {
 		component.$$.bound[index] = callback;
-		callback(component.$$.ctx[index]);
+		if (value === undefined) {
+			callback(component.$$.ctx[index]);
+		}
 	}
 }
 
diff --git a/test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte b/test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte
new file mode 100644
index 0000000000..86e2413898
--- /dev/null
+++ b/test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte
@@ -0,0 +1,3 @@
+<script>
+	export let tab;
+</script>
diff --git a/test/runtime/samples/binding-no-unnecessary-invalidation/_config.js b/test/runtime/samples/binding-no-unnecessary-invalidation/_config.js
new file mode 100644
index 0000000000..a34cf0121f
--- /dev/null
+++ b/test/runtime/samples/binding-no-unnecessary-invalidation/_config.js
@@ -0,0 +1,7 @@
+export default {
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, `
+			<p>0</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte b/test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte
new file mode 100644
index 0000000000..c57781cc97
--- /dev/null
+++ b/test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { writable } from "svelte/store";
+	import Tab from "./Tab.svelte";
+
+	let i = 0;
+	const { set, subscribe } = writable({ id: 1, name: "tab1" });
+	const tab = {
+		set(value) {
+			i++;
+			set(value);
+		},
+		subscribe,
+	};
+</script>
+
+<Tab bind:tab={$tab} />
+<p>{i}</p>

From 43905ccc22e0875f39a3e8d9317d8a75cdf974d5 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Mon, 5 Dec 2022 23:52:30 +0900
Subject: [PATCH 134/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bdad22e607..1209f74131 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918))
 * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044))
 * Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025))
+* Prevent to call unnecessary init binding ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298))
 
 ## 3.53.1
 

From 5eb1ff9946a6a1ac2d1de838f1911cceab3723c7 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Mon, 5 Dec 2022 06:53:29 -0800
Subject: [PATCH 135/145] [docs] publish roadmap. add process section to
 contributor's guide and re-organize a bit (#7965)

---
 CONTRIBUTING.md | 94 +++++++++++++++++++++++++++----------------------
 README.md       |  5 +++
 2 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 6153ae25d9..01f8728cc0 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -13,7 +13,7 @@ There are many ways to contribute to Svelte, and many of them do not involve wri
 
 - 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).
+- If you find an issue you would like to fix, [open a pull request](#pull-requests).
 - 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.
 - Take a look at the [features requested](https://github.com/sveltejs/svelte/labels/feature%20request) by others in the community and consider opening a pull request if you see something you want to work on.
 
@@ -24,44 +24,43 @@ Contributions are very welcome. If you think you need help planning your contrib
 One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in.
 
 - Ask for more information if you believe the issue does not provide all the details required to solve it.
-- Suggest [labels](https://github.com/sveltejs/svelte/labels) that can help categorize issues.
 - Flag issues that are stale or that should be closed.
 - Ask for test plans and review code.
 
-## Bugs
+## Our process
 
-We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues).
+### RFCs
 
-If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions.
+If you'd like to propose an implementation for a large new feature or change then please [create an RFC](https://github.com/sveltejs/rfcs) to discuss it up front.
 
-If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md)
+### Roadmap
 
-## Reporting new issues
+When deciding where to contribute, you may wish to take a look at [our roadmap](https://svelte.dev/roadmap). The Svelte team generally works on a single major effort at a time. This has a couple benefits for us as maintainers. First, it allows us to focus and make noticeable progress in an area being proactive rather than reactive. Secondly, it allows us to handle related issues and PRs together. By batching issues and PRs together we’re able to ensure implementations and fixes holistically address the set of problems and use cases encountered by our users.
 
-When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
+### Maintainer meetings
 
-- **One issue, one bug:** Please report a single bug per issue.
-- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction.
+The maintainers meet on the final Saturday of each month. While these meetings are not open publicly, we will report back by leaving a comment on each issue discussed. We will generally discuss items aligning with our roadmap, but major PRs needing discussion amongst the maintainers can be added to the agenda for the monthly maintainer’s meeting. However, we typically are only able to get to a couple of items that are not aligned with our current priority.
 
-## RFCs
+### Prioritization
 
-If you'd like to propose an implementation for a large new feature or change then please [create an RFC](https://github.com/sveltejs/rfcs) to discuss it up front.
+We do our best to review PRs and RFCs as they are sent, but it is difficult to keep up. We welcome help in reviewing PRs, RFC, and issues. If an item aligns with the current priority on our [roadmap](https://svelte.dev/roadmap), it is more likely to be reviewed quickly. PRs to the most important and active ones repositories get reviewed more quickly while PRs to smaller inactive repos may sit for a bit before we periodically come by and review the pending PRs in a batch.
 
-## Installation
+## Bugs
 
-1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed.
-1. After cloning the repository, run `npm install` in the root of the repository.
-1. To start a development server, run `npm run dev`.
+We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues).
 
-## Pull requests
+If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions.
 
-### Your first pull request
+If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md)
 
-So you have decided to contribute code back to upstream by opening a pull request. You've invested a good chunk of time, and we appreciate it. We will do our best to work with you and get the PR looked at.
+### Reporting new issues
 
-Working on your first Pull Request? You can learn how from this free video series:
+When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
+
+- **One issue, one bug:** Please report a single bug per issue.
+- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction.
 
-[**How to Contribute to an Open Source Project on GitHub**](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
+## Pull requests
 
 ### Proposing a change
 
@@ -69,20 +68,19 @@ If you would like to request a new feature or enhancement but are not yet thinki
 
 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.
 
-### Sending a pull request
+Small pull requests are much easier to review and more likely to get merged.
 
-Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
+### Installation
 
-Please make sure the following is done when submitting a pull request:
+1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed.
+1. After cloning the repository, run `npm install` in the root of the repository.
+1. To start a development server, run `npm run dev`.
 
-1. Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `master`.
-1. Describe your **test plan** in your pull request description. Make sure to test your changes.
-1. Make sure your code lints (`npm run lint`).
-1. Make sure your tests pass (`npm run test`).
+### Creating a branch
 
-All pull requests should be opened against the `master` branch.
+Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `master`. If you've never sent a GitHub pull request before, you can learn how from [this free video series](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
 
-#### Test plan
+### Testing
 
 A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI.
 
@@ -110,6 +108,25 @@ Test samples are kept in `/test/xxx/samples` folder.
 1. Tests suites like `css`, `js`, `server-side-rendering` asserts that the generated output has to match the content in the `.expected` file. For example, in the `js` test suites, the generated js code is compared against the content in `expected.js`.
 1. To update the content of the `.expected` file, run the test with `--update` flag. (`npm run test --update`)
 
+### Style guide
+
+[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`.
+
+#### Code conventions
+
+- `snake_case` for internal variable names and methods.
+- `camelCase` for public variable names and methods.
+
+### Sending your pull request
+
+Please make sure the following is done when submitting a pull request:
+
+1. Describe your **test plan** in your pull request description. Make sure to test your changes.
+1. Make sure your code lints (`npm run lint`).
+1. Make sure your tests pass (`npm run test`).
+
+All pull requests should be opened against the `master` branch. Make sure the PR does only one thing, otherwise please split it.
+
 #### Breaking changes
 
 When adding a new breaking change, follow this template in your pull request:
@@ -123,19 +140,10 @@ When adding a new breaking change, follow this template in your pull request:
 - **Severity (number of people affected x effort)**:
 ```
 
-### What happens next?
-
-The core Svelte team will be monitoring for pull requests. Do help us by making your pull request easy to review by following the guidelines above.
-
-## Style guide
-
-[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`.
-
-### Code conventions
-
-- `snake_case` for internal variable names and methods.
-- `camelCase` for public variable names and methods.
-
 ## License
 
 By contributing to Svelte, you agree that your contributions will be licensed under its [MIT license](https://github.com/sveltejs/svelte/blob/master/LICENSE).
+
+## Questions
+
+Feel free to ask in [#contributing](https://discord.com/channels/457912077277855764/750401468569354431) on [Discord](https://svelte.dev/chat) if you have questions about our process, how to proceed, etc.
diff --git a/README.md b/README.md
index 97e9ab65f3..11150f39b8 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,11 @@ Svelte is an MIT-licensed open source project with its ongoing development made
 Funds donated via Open Collective will be used for compensating expenses related to Svelte's development such as hosting costs. If sufficient donations are received, funds may also be used to support Svelte's development more directly.
 
 
+## Roadmap
+
+You may view [our roadmap](https://svelte.dev/roadmap) if you'd like to see what we're currently working on.
+
+
 ## Development
 
 Pull requests are encouraged and always welcome. [Pick an issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and help us out!

From 2f61907ec136eb53528a2933b194689b98e444aa Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Mon, 5 Dec 2022 23:01:51 +0800
Subject: [PATCH 136/145] [fix] allow invalidating variables from @const
 declared function (#7858)

---
 .../compile/nodes/shared/Expression.ts        | 82 +++++++++++--------
 .../samples/const-tag-invalidate/_config.js   | 34 ++++++++
 .../samples/const-tag-invalidate/main.svelte  | 16 ++++
 3 files changed, 96 insertions(+), 36 deletions(-)
 create mode 100644 test/runtime/samples/const-tag-invalidate/_config.js
 create mode 100644 test/runtime/samples/const-tag-invalidate/main.svelte

diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index d726b811a1..1b1558ec17 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -274,41 +274,7 @@ export default class Expression {
 					);
 
 					const declaration = b`const ${id} = ${node}`;
-
-					if (owner.type === 'ConstTag') {
-						let child_scope = scope;
-						walk(node, {
-							enter(node: Node, parent: any) {
-								if (map.has(node)) child_scope = map.get(node);
-								if (node.type === 'Identifier' && is_reference(node, parent)) {
-									if (child_scope.has(node.name)) return;
-									this.replace(block.renderer.reference(node, ctx));
-								}
-							},
-							leave(node: Node) {
-								if (map.has(node)) child_scope = child_scope.parent;
-							}
-						});
-					} else if (dependencies.size === 0 && contextual_dependencies.size === 0) {
-						// we can hoist this out of the component completely
-						component.fully_hoisted.push(declaration);
-
-						this.replace(id as any);
-
-						component.add_var(node, {
-							name: id.name,
-							internal: true,
-							hoistable: true,
-							referenced: true
-						});
-					} else if (contextual_dependencies.size === 0) {
-						// function can be hoisted inside the component init
-						component.partly_hoisted.push(declaration);
-
-						block.renderer.add_to_context(id.name);
-						this.replace(block.renderer.reference(id));
-					} else {
-						// we need a combo block/init recipe
+					const extract_functions = () => {
 						const deps = Array.from(contextual_dependencies);
 						const function_expression = node as FunctionExpression;
 
@@ -318,7 +284,7 @@ export default class Expression {
 							...function_expression.params
 						];
 
-						const context_args = deps.map(name => block.renderer.reference(name));
+						const context_args = deps.map(name => block.renderer.reference(name, ctx));
 
 						component.partly_hoisted.push(declaration);
 
@@ -334,6 +300,50 @@ export default class Expression {
 							: b`function ${id}() {
 								return ${callee}(${context_args});
 							}`;
+						return { deps, func_declaration };
+					};
+
+					if (owner.type === 'ConstTag') {
+						// we need a combo block/init recipe
+						if (contextual_dependencies.size === 0) {
+							let child_scope = scope;
+							walk(node, {
+								enter(node: Node, parent: any) {
+									if (map.has(node)) child_scope = map.get(node);
+									if (node.type === 'Identifier' && is_reference(node, parent)) {
+										if (child_scope.has(node.name)) return;
+										this.replace(block.renderer.reference(node, ctx));
+									}
+								},
+								leave(node: Node) {
+									if (map.has(node)) child_scope = child_scope.parent;
+								}
+							});
+						} else {
+							const { func_declaration } = extract_functions();
+							this.replace(func_declaration[0]);
+						}
+					} else if (dependencies.size === 0 && contextual_dependencies.size === 0) {
+						// we can hoist this out of the component completely
+						component.fully_hoisted.push(declaration);
+
+						this.replace(id as any);
+
+						component.add_var(node, {
+							name: id.name,
+							internal: true,
+							hoistable: true,
+							referenced: true
+						});
+					} else if (contextual_dependencies.size === 0) {
+						// function can be hoisted inside the component init
+						component.partly_hoisted.push(declaration);
+
+						block.renderer.add_to_context(id.name);
+						this.replace(block.renderer.reference(id));
+					} else {
+						// we need a combo block/init recipe
+						const { deps, func_declaration } = extract_functions();
 
 						if (owner.type === 'Attribute' && owner.parent.name === 'slot') {
 							const dep_scopes = new Set<INode>(deps.map(name => template_scope.get_owner(name)));
diff --git a/test/runtime/samples/const-tag-invalidate/_config.js b/test/runtime/samples/const-tag-invalidate/_config.js
new file mode 100644
index 0000000000..ffb1f14816
--- /dev/null
+++ b/test/runtime/samples/const-tag-invalidate/_config.js
@@ -0,0 +1,34 @@
+export default {
+	html: `
+		<div>[Y] A <button>Toggle</button></div>
+		<div>[N] B <button>Toggle</button></div>
+		<div>[N] C <button>Toggle</button></div>
+	`,
+	async test({ component, target, assert, window }) {
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+		await btn1.dispatchEvent(new window.MouseEvent('click'));
+		await btn2.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>[N] A <button>Toggle</button></div>
+			<div>[Y] B <button>Toggle</button></div>
+			<div>[N] C <button>Toggle</button></div>
+		`);
+
+		await btn2.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>[N] A <button>Toggle</button></div>
+			<div>[N] B <button>Toggle</button></div>
+			<div>[N] C <button>Toggle</button></div>
+		`);
+
+		await btn3.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>[N] A <button>Toggle</button></div>
+			<div>[N] B <button>Toggle</button></div>
+			<div>[Y] C <button>Toggle</button></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-invalidate/main.svelte b/test/runtime/samples/const-tag-invalidate/main.svelte
new file mode 100644
index 0000000000..6e58cbd9e2
--- /dev/null
+++ b/test/runtime/samples/const-tag-invalidate/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let items = [
+		{ name: 'A', selected: true },
+		{ name: 'B', selected: false },
+		{ name: 'C', selected: false },
+	]
+</script>
+
+{#each items as item}
+	{@const toggle = () => item.selected = !item.selected}
+	<div>
+		{item.selected ? '[Y]' : '[N]'}
+		{item.name}
+		<button on:click={toggle}>Toggle</button>
+	</div>
+{/each}

From d8c6ab87df1edf28e7a286818434bda8443d3f15 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Tue, 6 Dec 2022 00:02:21 +0900
Subject: [PATCH 137/145] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1209f74131..a055b2f9d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044))
 * Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025))
 * Prevent to call unnecessary init binding ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298))
+* Allow updating variables from `@const` declared function ([#7843](https://github.com/sveltejs/svelte/issues/7843))
 
 ## 3.53.1
 

From f45b8237704573fb736bd40cf7751063f61deb91 Mon Sep 17 00:00:00 2001
From: Daniel Huang <99danielh@gmail.com>
Date: Mon, 5 Dec 2022 10:14:11 -0500
Subject: [PATCH 138/145] [docs] fix inconsistent margin in svelte/motion
 spring tutorial (#8081)

---
 site/content/tutorial/09-motion/02-spring/app-b/App.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/content/tutorial/09-motion/02-spring/app-b/App.svelte b/site/content/tutorial/09-motion/02-spring/app-b/App.svelte
index d8a0287c2c..3ded9350a9 100644
--- a/site/content/tutorial/09-motion/02-spring/app-b/App.svelte
+++ b/site/content/tutorial/09-motion/02-spring/app-b/App.svelte
@@ -33,6 +33,7 @@
 	svg {
 		width: 100%;
 		height: 100%;
+		margin: -8px;
 	}
 	circle {
 		fill: #ff3e00;

From cc52dc442be8cb3207005d13bf9b1d521b2b0afd Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Tue, 6 Dec 2022 00:18:29 +0900
Subject: [PATCH 139/145] [docs] add explanation about property binding order
 (#7833)

* update document

* update sentence and position

* update the sentence

* update
---
 site/content/docs/03-template-syntax.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index de7ded9d6c..2d92813e89 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -124,6 +124,10 @@ An element or component can have multiple spread attributes, interspersed with r
 
 > The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable.
 
+> Sometimes, the attribute order matters as Svelte sets attributes sequentially in JavaScript. For example, `<input type="range" min="0" max="1" value={0.5} step="0.1"/>`, Svelte will attempt to set the value to `1` (rounding up from 0.5 as the step by default is 1), and then set the step to `0.1`. To fix this, change it to `<input type="range" min="0" max="1" step="0.1" value={0.5}/>`.
+
+> Another example is `<img src="..." loading="lazy" />`. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to `<img loading="lazy" src="...">` to make the image lazily loaded.
+
 ---
 
 ### Text expressions

From 75c3a48245295c3748a135165a4ac9947bf11ef8 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 6 Dec 2022 14:22:36 -0500
Subject: [PATCH 140/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a055b2f9d5..0aa980597e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,11 +2,11 @@
 
 ## Unreleased
 
-* Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918))
+* Pass `options.direction` argument to custom transition functions ([#3918](https://github.com/sveltejs/svelte/issues/3918))
 * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044))
-* Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025))
-* Prevent to call unnecessary init binding ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298))
+* Prevent running init binding unnecessarily ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298))
 * Allow updating variables from `@const` declared function ([#7843](https://github.com/sveltejs/svelte/issues/7843))
+* Do not emit `a11y-no-noninteractive-tabindex` warning if element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025))
 
 ## 3.53.1
 

From 94e51df07b0512de0716a0109d29c8a1d1f1ce20 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Wed, 7 Dec 2022 04:23:23 +0900
Subject: [PATCH 141/145] [fix] escape style attribute for SSR (#8087)

---
 src/runtime/internal/ssr.ts                          |  2 +-
 test/runtime/samples/css-vars-escape/Sub.svelte      |  7 +++++++
 test/runtime/samples/css-vars-escape/_config.js      | 12 ++++++++++++
 test/runtime/samples/css-vars-escape/main.svelte     |  6 ++++++
 .../samples/inline-style-directive-escape/_config.js | 12 ++++++++++++
 .../inline-style-directive-escape/main.svelte        |  5 +++++
 6 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/css-vars-escape/Sub.svelte
 create mode 100644 test/runtime/samples/css-vars-escape/_config.js
 create mode 100644 test/runtime/samples/css-vars-escape/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-escape/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-escape/main.svelte

diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts
index 571a25f1ac..e6d747dc18 100644
--- a/src/runtime/internal/ssr.ts
+++ b/src/runtime/internal/ssr.ts
@@ -205,7 +205,7 @@ export function add_classes(classes) {
 function style_object_to_string(style_object) {
 	return Object.keys(style_object)
 		.filter(key => style_object[key])
-		.map(key => `${key}: ${style_object[key]};`)
+		.map(key => `${key}: ${escape_attribute_value(style_object[key])};`)
 		.join(' ');
 }
 
diff --git a/test/runtime/samples/css-vars-escape/Sub.svelte b/test/runtime/samples/css-vars-escape/Sub.svelte
new file mode 100644
index 0000000000..4781b65b36
--- /dev/null
+++ b/test/runtime/samples/css-vars-escape/Sub.svelte
@@ -0,0 +1,7 @@
+<div>hi</div>
+
+<style>
+	div {
+		background-color: var(--color);
+	}
+</style>
diff --git a/test/runtime/samples/css-vars-escape/_config.js b/test/runtime/samples/css-vars-escape/_config.js
new file mode 100644
index 0000000000..04defbdae8
--- /dev/null
+++ b/test/runtime/samples/css-vars-escape/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
+			<div class="svelte-271qee">hi</div>
+		</div>
+	`,
+	ssrHtml: `
+		<div style="display: contents; --color:&quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
+			<div class="svelte-271qee">hi</div>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/css-vars-escape/main.svelte b/test/runtime/samples/css-vars-escape/main.svelte
new file mode 100644
index 0000000000..d18e2d57f2
--- /dev/null
+++ b/test/runtime/samples/css-vars-escape/main.svelte
@@ -0,0 +1,6 @@
+<script>
+import Sub from './Sub.svelte';
+  export let attack = '" onload="alert(\'uhoh\')" data-nothing="not important';
+</script>
+
+<Sub --color={attack} />
diff --git a/test/runtime/samples/inline-style-directive-escape/_config.js b/test/runtime/samples/inline-style-directive-escape/_config.js
new file mode 100644
index 0000000000..31666815d9
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-escape/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div style="--css-variable: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;"></div>
+	`,
+
+	test({ assert, component, target }) {
+		component.attack = '" onload="alert(\'uhoh2\')" data-nothing="not important';
+		assert.htmlEqual(target.innerHTML, `
+			<div style="--css-variable: &quot; onload=&quot;alert('uhoh2')&quot; data-nothing=&quot;not important;"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-escape/main.svelte b/test/runtime/samples/inline-style-directive-escape/main.svelte
new file mode 100644
index 0000000000..fd27bfda6a
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-escape/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let attack = '" onload="alert(\'uhoh\')" data-nothing="not important';
+</script>
+
+<div style:--css-variable={attack} />

From 86524181a9b825ad2a49f3af52f501950ea627ba Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 6 Dec 2022 14:24:27 -0500
Subject: [PATCH 142/145] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0aa980597e..315db36a18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Prevent running init binding unnecessarily ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298))
 * Allow updating variables from `@const` declared function ([#7843](https://github.com/sveltejs/svelte/issues/7843))
 * Do not emit `a11y-no-noninteractive-tabindex` warning if element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025))
+* Fix escaping SSR'd values in `style:` directive ([#8085](https://github.com/sveltejs/svelte/issues/8085))
 
 ## 3.53.1
 

From aa5a1cdf1a21845f8d174ebadee76564394daa81 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 6 Dec 2022 14:25:16 -0500
Subject: [PATCH 143/145] -> v3.54.0

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 315db36a18..30e5136d0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Svelte changelog
 
-## Unreleased
+## 3.54.0
 
 * Pass `options.direction` argument to custom transition functions ([#3918](https://github.com/sveltejs/svelte/issues/3918))
 * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044))
diff --git a/package-lock.json b/package-lock.json
index 59c853fa4b..d57d0b3436 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.53.1",
+  "version": "3.54.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.53.1",
+      "version": "3.54.0",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index 4fde354b6a..7996fd5583 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.53.1",
+  "version": "3.54.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From a0a6bd1f546096d9e5cac8edbec7b21d5f2d580e Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 7 Dec 2022 11:04:50 -0800
Subject: [PATCH 144/145] [docs] add some basic docs about bundler plugins
 (#8092)

---
 site/content/docs/01-getting-started.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/site/content/docs/01-getting-started.md b/site/content/docs/01-getting-started.md
index 48cdbcc231..03dfb4bbcf 100644
--- a/site/content/docs/01-getting-started.md
+++ b/site/content/docs/01-getting-started.md
@@ -6,17 +6,16 @@ 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:
-
+To create a project locally we recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
 ```
-npm create vite@latest myapp -- --template svelte
+npm create svelte@latest myapp
 cd myapp
 npm install
 npm run dev
 ```
 
-Or use [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team (currently in release candidate status).
+SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment. [SvelteKit](https://kit.svelte.dev/) utilizes [Vite](https://vitejs.dev/) to build your code and handle server-side rendering (SSR). There are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation, which will output `.js` and `.css` that you can insert into your HTML, but most others won't handle SSR.
 
-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).
+The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well.
 
 If you're having trouble, get help on [Discord](https://svelte.dev/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).

From 512eda7a84c342b2798b2e5cffcd16068744d798 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sun, 11 Dec 2022 21:45:11 +0100
Subject: [PATCH 145/145] [feat] add html typings (#7649)

This adds typings for HTML elements and their attributes. It's supposed to be used by the new transformation in language-tools.

Co-authored-by: Ignatius Bagus <ignatius.mbs@gmail.com>
Co-authored-by: Lyu, Wei-Da <36730922+jasonlyu123@users.noreply.github.com>
---
 CHANGELOG.md          |    4 +
 elements/index.d.ts   | 1581 +++++++++++++++++++++++++++++++++++++++++
 elements/package.json |    3 +
 package.json          |    4 +
 4 files changed, 1592 insertions(+)
 create mode 100644 elements/index.d.ts
 create mode 100644 elements/package.json

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30e5136d0f..a92cb4472c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Add `svelte/elements` for HTML/Svelte typings ([#7649](https://github.com/sveltejs/svelte/pull/7649))
+
 ## 3.54.0
 
 * Pass `options.direction` argument to custom transition functions ([#3918](https://github.com/sveltejs/svelte/issues/3918))
diff --git a/elements/index.d.ts b/elements/index.d.ts
new file mode 100644
index 0000000000..2534bfaf40
--- /dev/null
+++ b/elements/index.d.ts
@@ -0,0 +1,1581 @@
+// Type definitions for Svelte HTML, based on JSX React 18 typings
+// Original Project/Authors:
+// Type definitions for React 18.0
+// Project: http://facebook.github.io/react/
+// Definitions by: Asana <https://asana.com>
+//                 AssureSign <http://www.assuresign.com>
+//                 Microsoft <https://microsoft.com>
+//                 John Reilly <https://github.com/johnnyreilly>
+//                 Benoit Benezech <https://github.com/bbenezech>
+//                 Patricio Zavolinsky <https://github.com/pzavolinsky>
+//                 Eric Anderson <https://github.com/ericanderson>
+//                 Dovydas Navickas <https://github.com/DovydasNavickas>
+//                 Josh Rutherford <https://github.com/theruther4d>
+//                 Guilherme Hübner <https://github.com/guilhermehubner>
+//                 Ferdy Budhidharma <https://github.com/ferdaber>
+//                 Johann Rakotoharisoa <https://github.com/jrakotoharisoa>
+//                 Olivier Pascal <https://github.com/pascaloliv>
+//                 Martin Hochel <https://github.com/hotell>
+//                 Frank Li <https://github.com/franklixuefei>
+//                 Jessica Franco <https://github.com/Jessidhia>
+//                 Saransh Kataria <https://github.com/saranshkataria>
+//                 Kanitkorn Sujautra <https://github.com/lukyth>
+//                 Sebastian Silbermann <https://github.com/eps1lon>
+//                 Kyle Scully <https://github.com/zieka>
+//                 Cong Zhang <https://github.com/dancerphil>
+//                 Dimitri Mitropoulos <https://github.com/dimitropoulos>
+//                 JongChan Choi <https://github.com/disjukr>
+//                 Victor Magalhães <https://github.com/vhfmag>
+//                 Dale Tan <https://github.com/hellatan>
+//                 Priyanshu Rav <https://github.com/priyanshurav>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+// Note: We also allow `null` as a valid value because Svelte treats this the same as `undefined`
+
+type Booleanish = boolean | 'true' | 'false';
+
+//
+// Event Handler Types
+// ----------------------------------------------------------------------
+
+type EventHandler<E extends Event = Event, T extends EventTarget = Element> =
+(event: E & { currentTarget: EventTarget & T}) => any;
+
+export type ClipboardEventHandler<T extends EventTarget> = EventHandler<ClipboardEvent, T>;
+export type CompositionEventHandler<T extends EventTarget> = EventHandler<CompositionEvent, T>;
+export type DragEventHandler<T extends EventTarget> = EventHandler<DragEvent, T>;
+export type FocusEventHandler<T extends EventTarget> = EventHandler<FocusEvent, T>;
+export type FormEventHandler<T extends EventTarget> = EventHandler<Event, T>;
+export type ChangeEventHandler<T extends EventTarget> = EventHandler<Event, T>;
+export type KeyboardEventHandler<T extends EventTarget> = EventHandler<KeyboardEvent, T>;
+export type MouseEventHandler<T extends EventTarget> = EventHandler<MouseEvent, T>;
+export type TouchEventHandler<T extends EventTarget> = EventHandler<TouchEvent, T>;
+export type PointerEventHandler<T extends EventTarget> = EventHandler<PointerEvent, T>;
+export type UIEventHandler<T extends EventTarget> = EventHandler<UIEvent, T>;
+export type WheelEventHandler<T extends EventTarget> = EventHandler<WheelEvent, T>;
+export type AnimationEventHandler<T extends EventTarget> = EventHandler<AnimationEvent, T>;
+export type TransitionEventHandler<T extends EventTarget> = EventHandler<TransitionEvent, T>;
+export type MessageEventHandler<T extends EventTarget> = EventHandler<MessageEvent, T>;
+
+//
+// DOM Attributes
+// ----------------------------------------------------------------------
+
+export interface DOMAttributes<T extends EventTarget> {
+	// Clipboard Events
+	'on:copy'?: ClipboardEventHandler<T> | undefined | null;
+	'on:cut'?: ClipboardEventHandler<T> | undefined | null;
+	'on:paste'?: ClipboardEventHandler<T> | undefined | null;
+
+	// Composition Events
+	'on:compositionend'?: CompositionEventHandler<T> | undefined | null;
+	'on:compositionstart'?: CompositionEventHandler<T> | undefined | null;
+	'on:compositionupdate'?: CompositionEventHandler<T> | undefined | null;
+
+	// Focus Events
+	'on:focus'?: FocusEventHandler<T> | undefined | null;
+	'on:focusin'?: FocusEventHandler<T> | undefined | null;
+	'on:focusout'?: FocusEventHandler<T> | undefined | null;
+	'on:blur'?: FocusEventHandler<T> | undefined | null;
+
+	// Form Events
+	'on:change'?: FormEventHandler<T> | undefined | null;
+	'on:beforeinput'?: EventHandler<InputEvent, T> | undefined | null;
+	'on:input'?: FormEventHandler<T> | undefined | null;
+	'on:reset'?: FormEventHandler<T> | undefined | null;
+	'on:submit'?: EventHandler<Event, T> | undefined | null; // TODO make this SubmitEvent once we require TS>=4.4
+	'on:invalid'?: EventHandler<Event, T> | undefined | null;
+	'on:formdata'?: EventHandler<Event & { readonly formData: FormData; }, T> | undefined | null; // TODO make this FormDataEvent once we require TS>=4.4
+
+	// Image Events
+	'on:load'?: EventHandler | undefined | null;
+	'on:error'?: EventHandler | undefined | null; // also a Media Event
+
+	// Detail Events
+	'on:toggle'?: EventHandler<Event, T> | undefined | null;
+
+	// Keyboard Events
+	'on:keydown'?: KeyboardEventHandler<T> | undefined | null;
+	'on:keypress'?: KeyboardEventHandler<T> | undefined | null;
+	'on:keyup'?: KeyboardEventHandler<T> | undefined | null;
+
+	// Media Events
+	'on:abort'?: EventHandler<Event, T> | undefined | null;
+	'on:canplay'?: EventHandler<Event, T> | undefined | null;
+	'on:canplaythrough'?: EventHandler<Event, T> | undefined | null;
+	'on:cuechange'?: EventHandler<Event, T> | undefined | null;
+	'on:durationchange'?: EventHandler<Event, T> | undefined | null;
+	'on:emptied'?: EventHandler<Event, T> | undefined | null;
+	'on:encrypted'?: EventHandler<Event, T> | undefined | null;
+	'on:ended'?: EventHandler<Event, T> | undefined | null;
+	'on:loadeddata'?: EventHandler<Event, T> | undefined | null;
+	'on:loadedmetadata'?: EventHandler<Event, T> | undefined | null;
+	'on:loadstart'?: EventHandler<Event, T> | undefined | null;
+	'on:pause'?: EventHandler<Event, T> | undefined | null;
+	'on:play'?: EventHandler<Event, T> | undefined | null;
+	'on:playing'?: EventHandler<Event, T> | undefined | null;
+	'on:progress'?: EventHandler<Event, T> | undefined | null;
+	'on:ratechange'?: EventHandler<Event, T> | undefined | null;
+	'on:seeked'?: EventHandler<Event, T> | undefined | null;
+	'on:seeking'?: EventHandler<Event, T> | undefined | null;
+	'on:stalled'?: EventHandler<Event, T> | undefined | null;
+	'on:suspend'?: EventHandler<Event, T> | undefined | null;
+	'on:timeupdate'?: EventHandler<Event, T> | undefined | null;
+	'on:volumechange'?: EventHandler<Event, T> | undefined | null;
+	'on:waiting'?: EventHandler<Event, T> | undefined | null;
+
+	// MouseEvents
+	'on:auxclick'?: MouseEventHandler<T> | undefined | null;
+	'on:click'?: MouseEventHandler<T> | undefined | null;
+	'on:contextmenu'?: MouseEventHandler<T> | undefined | null;
+	'on:dblclick'?: MouseEventHandler<T> | undefined | null;
+	'on:drag'?: DragEventHandler<T> | undefined | null;
+	'on:dragend'?: DragEventHandler<T> | undefined | null;
+	'on:dragenter'?: DragEventHandler<T> | undefined | null;
+	'on:dragexit'?: DragEventHandler<T> | undefined | null;
+	'on:dragleave'?: DragEventHandler<T> | undefined | null;
+	'on:dragover'?: DragEventHandler<T> | undefined | null;
+	'on:dragstart'?: DragEventHandler<T> | undefined | null;
+	'on:drop'?: DragEventHandler<T> | undefined | null;
+	'on:mousedown'?: MouseEventHandler<T> | undefined | null;
+	'on:mouseenter'?: MouseEventHandler<T> | undefined | null;
+	'on:mouseleave'?: MouseEventHandler<T> | undefined | null;
+	'on:mousemove'?: MouseEventHandler<T> | undefined | null;
+	'on:mouseout'?: MouseEventHandler<T> | undefined | null;
+	'on:mouseover'?: MouseEventHandler<T> | undefined | null;
+	'on:mouseup'?: MouseEventHandler<T> | undefined | null;
+
+	// Selection Events
+	'on:select'?: EventHandler<Event, T> | undefined | null;
+	'on:selectionchange'?: EventHandler<Event, T> | undefined | null;
+	'on:selectstart'?: EventHandler<Event, T> | undefined | null;
+
+	// Touch Events
+	'on:touchcancel'?: TouchEventHandler<T> | undefined | null;
+	'on:touchend'?: TouchEventHandler<T> | undefined | null;
+	'on:touchmove'?: TouchEventHandler<T> | undefined | null;
+	'on:touchstart'?: TouchEventHandler<T> | undefined | null;
+
+	// Pointer Events
+	'on:gotpointercapture'?: PointerEventHandler<T> | undefined | null;
+	'on:pointercancel'?: PointerEventHandler<T> | undefined | null;
+	'on:pointerdown'?: PointerEventHandler<T> | undefined | null;
+	'on:pointerenter'?: PointerEventHandler<T> | undefined | null;
+	'on:pointerleave'?: PointerEventHandler<T> | undefined | null;
+	'on:pointermove'?: PointerEventHandler<T> | undefined | null;
+	'on:pointerout'?: PointerEventHandler<T> | undefined | null;
+	'on:pointerover'?: PointerEventHandler<T> | undefined | null;
+	'on:pointerup'?: PointerEventHandler<T> | undefined | null;
+	'on:lostpointercapture'?: PointerEventHandler<T> | undefined | null;
+
+	// UI Events
+	'on:scroll'?: UIEventHandler<T> | undefined | null;
+	'on:resize'?: UIEventHandler<T> | undefined | null;
+
+	// Wheel Events
+	'on:wheel'?: WheelEventHandler<T> | undefined | null;
+
+	// Animation Events
+	'on:animationstart'?: AnimationEventHandler<T> | undefined | null;
+	'on:animationend'?: AnimationEventHandler<T> | undefined | null;
+	'on:animationiteration'?: AnimationEventHandler<T> | undefined | null;
+
+	// Transition Events
+	'on:transitionstart'?: TransitionEventHandler<T> | undefined | null;
+	'on:transitionrun'?: TransitionEventHandler<T> | undefined | null;
+	'on:transitionend'?: TransitionEventHandler<T> | undefined | null;
+	'on:transitioncancel'?: TransitionEventHandler<T> | undefined | null;
+
+	// Svelte Transition Events
+	'on:outrostart'?: EventHandler<CustomEvent<null>, T> | undefined | null;
+	'on:outroend'?: EventHandler<CustomEvent<null>, T> | undefined | null;
+	'on:introstart'?: EventHandler<CustomEvent<null>, T> | undefined | null;
+	'on:introend'?: EventHandler<CustomEvent<null>, T> | undefined | null;
+
+	// Message Events
+	'on:message'?: MessageEventHandler<T> | undefined | null;
+	'on:messageerror'?: MessageEventHandler<T> | undefined | null;
+
+	// Global Events
+	'on:cancel'?: EventHandler<Event, T> | undefined | null;
+	'on:close'?: EventHandler<Event, T> | undefined | null;
+	'on:fullscreenchange'?: EventHandler<Event, T> | undefined | null;
+	'on:fullscreenerror'?: EventHandler<Event, T> | undefined | null;
+}
+
+// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
+export interface AriaAttributes {
+	/** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
+	'aria-activedescendant'?: string | undefined | null;
+	/** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
+	'aria-atomic'?: Booleanish | undefined | null;
+	/**
+	 * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
+	 * presented if they are made.
+	 */
+	'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined | null;
+	/** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
+	'aria-busy'?: Booleanish | undefined | null;
+	/**
+	 * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
+	 * @see aria-pressed @see aria-selected.
+	 */
+	'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined | null;
+	/**
+	 * Defines the total number of columns in a table, grid, or treegrid.
+	 * @see aria-colindex.
+	 */
+	'aria-colcount'?: number | undefined | null;
+	/**
+	 * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
+	 * @see aria-colcount @see aria-colspan.
+	 */
+	'aria-colindex'?: number | undefined | null;
+	/**
+	 * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
+	 * @see aria-colindex @see aria-rowspan.
+	 */
+	'aria-colspan'?: number | undefined | null;
+	/**
+	 * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+	 * @see aria-owns.
+	 */
+	'aria-controls'?: string | undefined | null;
+	/** Indicates the element that represents the current item within a container or set of related elements. */
+	'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time' | undefined | null;
+	/**
+	 * Identifies the element (or elements) that describes the object.
+	 * @see aria-labelledby
+	 */
+	'aria-describedby'?: string | undefined | null;
+	/**
+	 * Identifies the element that provides a detailed, extended description for the object.
+	 * @see aria-describedby.
+	 */
+	'aria-details'?: string | undefined | null;
+	/**
+	 * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+	 * @see aria-hidden @see aria-readonly.
+	 */
+	'aria-disabled'?: Booleanish | undefined | null;
+	/**
+	 * Indicates what functions can be performed when a dragged object is released on the drop target.
+	 * @deprecated in ARIA 1.1
+	 */
+	'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined | null;
+	/**
+	 * Identifies the element that provides an error message for the object.
+	 * @see aria-invalid @see aria-describedby.
+	 */
+	'aria-errormessage'?: string | undefined | null;
+	/** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+	'aria-expanded'?: Booleanish | undefined | null;
+	/**
+	 * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+	 * allows assistive technology to override the general default of reading in document source order.
+	 */
+	'aria-flowto'?: string | undefined | null;
+	/**
+	 * Indicates an element's "grabbed" state in a drag-and-drop operation.
+	 * @deprecated in ARIA 1.1
+	 */
+	'aria-grabbed'?: Booleanish | undefined | null;
+	/** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
+	'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined | null;
+	/**
+	 * Indicates whether the element is exposed to an accessibility API.
+	 * @see aria-disabled.
+	 */
+	'aria-hidden'?: Booleanish | undefined | null;
+	/**
+	 * Indicates the entered value does not conform to the format expected by the application.
+	 * @see aria-errormessage.
+	 */
+	'aria-invalid'?: Booleanish | 'grammar' | 'spelling' | undefined | null;
+	/** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
+	'aria-keyshortcuts'?: string | undefined | null;
+	/**
+	 * Defines a string value that labels the current element.
+	 * @see aria-labelledby.
+	 */
+	'aria-label'?: string | undefined | null;
+	/**
+	 * Identifies the element (or elements) that labels the current element.
+	 * @see aria-describedby.
+	 */
+	'aria-labelledby'?: string | undefined | null;
+	/** Defines the hierarchical level of an element within a structure. */
+	'aria-level'?: number | undefined | null;
+	/** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
+	'aria-live'?: 'off' | 'assertive' | 'polite' | undefined | null;
+	/** Indicates whether an element is modal when displayed. */
+	'aria-modal'?: Booleanish | undefined | null;
+	/** Indicates whether a text box accepts multiple lines of input or only a single line. */
+	'aria-multiline'?: Booleanish | undefined | null;
+	/** Indicates that the user may select more than one item from the current selectable descendants. */
+	'aria-multiselectable'?: Booleanish | undefined | null;
+	/** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
+	'aria-orientation'?: 'horizontal' | 'vertical' | undefined | null;
+	/**
+	 * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
+	 * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
+	 * @see aria-controls.
+	 */
+	'aria-owns'?: string | undefined | null;
+	/**
+	 * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
+	 * A hint could be a sample value or a brief description of the expected format.
+	 */
+	'aria-placeholder'?: string | undefined | null;
+	/**
+	 * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+	 * @see aria-setsize.
+	 */
+	'aria-posinset'?: number | undefined | null;
+	/**
+	 * Indicates the current "pressed" state of toggle buttons.
+	 * @see aria-checked @see aria-selected.
+	 */
+	'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined | null;
+	/**
+	 * Indicates that the element is not editable, but is otherwise operable.
+	 * @see aria-disabled.
+	 */
+	'aria-readonly'?: Booleanish | undefined | null;
+	/**
+	 * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+	 * @see aria-atomic.
+	 */
+	'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined | null;
+	/** Indicates that user input is required on the element before a form may be submitted. */
+	'aria-required'?: Booleanish | undefined | null;
+	/** Defines a human-readable, author-localized description for the role of an element. */
+	'aria-roledescription'?: string | undefined | null;
+	/**
+	 * Defines the total number of rows in a table, grid, or treegrid.
+	 * @see aria-rowindex.
+	 */
+	'aria-rowcount'?: number | undefined | null;
+	/**
+	 * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
+	 * @see aria-rowcount @see aria-rowspan.
+	 */
+	'aria-rowindex'?: number | undefined | null;
+	/**
+	 * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
+	 * @see aria-rowindex @see aria-colspan.
+	 */
+	'aria-rowspan'?: number | undefined | null;
+	/**
+	 * Indicates the current "selected" state of various widgets.
+	 * @see aria-checked @see aria-pressed.
+	 */
+	'aria-selected'?: Booleanish | undefined | null;
+	/**
+	 * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+	 * @see aria-posinset.
+	 */
+	'aria-setsize'?: number | undefined | null;
+	/** Indicates if items in a table or grid are sorted in ascending or descending order. */
+	'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined | null;
+	/** Defines the maximum allowed value for a range widget. */
+	'aria-valuemax'?: number | undefined | null;
+	/** Defines the minimum allowed value for a range widget. */
+	'aria-valuemin'?: number | undefined | null;
+	/**
+	 * Defines the current value for a range widget.
+	 * @see aria-valuetext.
+	 */
+	'aria-valuenow'?: number | undefined | null;
+	/** Defines the human readable text alternative of aria-valuenow for a range widget. */
+	'aria-valuetext'?: string | undefined | null;
+}
+
+// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
+export type AriaRole =
+	| 'alert'
+	| 'alertdialog'
+	| 'application'
+	| 'article'
+	| 'banner'
+	| 'button'
+	| 'cell'
+	| 'checkbox'
+	| 'columnheader'
+	| 'combobox'
+	| 'complementary'
+	| 'contentinfo'
+	| 'definition'
+	| 'dialog'
+	| 'directory'
+	| 'document'
+	| 'feed'
+	| 'figure'
+	| 'form'
+	| 'grid'
+	| 'gridcell'
+	| 'group'
+	| 'heading'
+	| 'img'
+	| 'link'
+	| 'list'
+	| 'listbox'
+	| 'listitem'
+	| 'log'
+	| 'main'
+	| 'marquee'
+	| 'math'
+	| 'menu'
+	| 'menubar'
+	| 'menuitem'
+	| 'menuitemcheckbox'
+	| 'menuitemradio'
+	| 'navigation'
+	| 'none'
+	| 'note'
+	| 'option'
+	| 'presentation'
+	| 'progressbar'
+	| 'radio'
+	| 'radiogroup'
+	| 'region'
+	| 'row'
+	| 'rowgroup'
+	| 'rowheader'
+	| 'scrollbar'
+	| 'search'
+	| 'searchbox'
+	| 'separator'
+	| 'slider'
+	| 'spinbutton'
+	| 'status'
+	| 'switch'
+	| 'tab'
+	| 'table'
+	| 'tablist'
+	| 'tabpanel'
+	| 'term'
+	| 'textbox'
+	| 'timer'
+	| 'toolbar'
+	| 'tooltip'
+	| 'tree'
+	| 'treegrid'
+	| 'treeitem'
+	| (string & {});
+
+export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, DOMAttributes<T> {
+	// Standard HTML Attributes
+	accesskey?: string  | undefined | null;
+	autofocus?: boolean | undefined | null;
+	class?: string | undefined | null;
+	contenteditable?: Booleanish | 'inherit' | undefined | null;
+	contextmenu?: string | undefined | null;
+	dir?: string | undefined | null;
+	draggable?: Booleanish | undefined | null;
+	enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined | null;
+	hidden?: boolean | undefined | null;
+	id?: string | undefined | null;
+	lang?: string | undefined | null;
+	placeholder?: string | undefined | null;
+	slot?: string | undefined | null;
+	spellcheck?: Booleanish | undefined | null;
+	style?: string | undefined | null;
+	tabindex?: number | undefined | null;
+	title?: string | undefined | null;
+	translate?: 'yes' | 'no' | '' | undefined | null;
+	inert?: boolean | undefined | null;
+
+	// Unknown
+	radiogroup?: string | undefined | null; // <command>, <menuitem>
+
+	// WAI-ARIA
+	role?: AriaRole | undefined | null;
+
+	// RDFa Attributes
+	about?: string | undefined | null;
+	datatype?: string | undefined | null;
+	inlist?: any;
+	prefix?: string | undefined | null;
+	property?: string | undefined | null;
+	resource?: string | undefined | null;
+	typeof?: string | undefined | null;
+	vocab?: string | undefined | null;
+
+	// Non-standard Attributes
+	autocapitalize?: string | undefined | null;
+	autocorrect?: string | undefined | null;
+	autosave?: string | undefined | null;
+	color?: string | undefined | null;
+	itemprop?: string | undefined | null;
+	itemscope?: boolean | undefined | null;
+	itemtype?: string | undefined | null;
+	itemid?: string | undefined | null;
+	itemref?: string | undefined | null;
+	results?: number | undefined | null;
+	security?: string | undefined | null;
+	unselectable?: 'on' | 'off' | undefined | null;
+
+	// Living Standard
+	/**
+	 * Hints at the type of data that might be entered by the user while editing the element or its contents
+	 * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
+	 */
+	inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined | null;
+	/**
+	 * Specify that a standard HTML element should behave like a defined custom built-in element
+	 * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
+	 */
+	is?: string | undefined | null;
+
+	/**
+	 * Elements with the contenteditable attribute support innerHTML and textContent bindings.
+	 */
+	'bind:innerHTML'?: string | undefined | null;
+	/**
+	 * Elements with the contenteditable attribute support innerHTML and textContent bindings.
+	 */
+	'bind:textContent'?: string | undefined | null;
+
+	// SvelteKit
+	'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
+	'data-sveltekit-preload-code'?: true | '' | 'eager' | 'viewport' | 'hover' | 'tap' | 'off' | undefined | null;
+	'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
+	'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
+}
+
+export type HTMLAttributeAnchorTarget =
+	| '_self'
+	| '_blank'
+	| '_parent'
+	| '_top'
+	| (string & {});
+
+export interface HTMLAnchorAttributes extends HTMLAttributes<HTMLAnchorElement> {
+	download?: any;
+	href?: string | undefined | null;
+	hreflang?: string | undefined | null;
+	media?: string | undefined | null;
+	ping?: string | undefined | null;
+	rel?: string | undefined | null;
+	target?: HTMLAttributeAnchorTarget | undefined | null;
+	type?: string | undefined | null;
+	referrerpolicy?: ReferrerPolicy | undefined | null;
+
+	// Sapper
+	'sapper:noscroll'?: true | undefined | null;
+	'sapper:prefetch'?: true | undefined | null;
+}
+
+export interface HTMLAudioAttributes extends HTMLMediaAttributes<HTMLAudioElement> {}
+
+export interface HTMLAreaAttributes extends HTMLAttributes<HTMLAreaElement> {
+	alt?: string | undefined | null;
+	coords?: string | undefined | null;
+	download?: any;
+	href?: string | undefined | null;
+	hreflang?: string | undefined | null;
+	media?: string | undefined | null;
+	referrerpolicy?: ReferrerPolicy | undefined | null;
+	rel?: string | undefined | null;
+	shape?: string | undefined | null;
+	target?: string | undefined | null;
+	ping?: string | undefined | null;
+}
+
+export interface HTMLBaseAttributes extends HTMLAttributes<HTMLBaseElement> {
+	href?: string | undefined | null;
+	target?: string | undefined | null;
+}
+
+export interface HTMLBlockquoteAttributes extends HTMLAttributes<HTMLQuoteElement> {
+	cite?: string | undefined | null;
+}
+
+export interface HTMLButtonAttributes extends HTMLAttributes<HTMLButtonElement> {
+	disabled?: boolean | undefined | null;
+	form?: string | undefined | null;
+	formaction?: string | undefined | null;
+	formenctype?: string | undefined | null;
+	formmethod?: string | undefined | null;
+	formnovalidate?: boolean | undefined | null;
+	formtarget?: string | undefined | null;
+	name?: string | undefined | null;
+	type?: 'submit' | 'reset' | 'button' | undefined | null;
+	value?: string | string[] | number | undefined | null;
+}
+
+export interface HTMLCanvasAttributes extends HTMLAttributes<HTMLCanvasElement> {
+	height?: number | string | undefined | null;
+	width?: number | string | undefined | null;
+}
+
+export interface HTMLColAttributes extends HTMLAttributes<HTMLTableColElement> {
+	span?: number | undefined | null;
+	width?: number | string | undefined | null;
+}
+
+export interface HTMLColgroupAttributes extends HTMLAttributes<HTMLTableColElement> {
+	span?: number | undefined | null;
+}
+
+export interface HTMLDataAttributes extends HTMLAttributes<HTMLDataElement> {
+	value?: string | string[] | number | undefined | null;
+}
+
+export interface HTMLDetailsAttributes extends HTMLAttributes<HTMLDetailsElement> {
+	open?: boolean | undefined | null;
+
+	'bind:open'?: boolean | undefined | null;
+}
+
+export interface HTMLDelAttributes extends HTMLAttributes<HTMLModElement> {
+	cite?: string | undefined | null;
+	datetime?: string | undefined | null;
+}
+
+export interface HTMLDialogAttributes extends HTMLAttributes<HTMLDialogElement> {
+	open?: boolean | undefined | null;
+}
+
+export interface HTMLEmbedAttributes extends HTMLAttributes<HTMLEmbedElement> {
+	height?: number | string | undefined | null;
+	src?: string | undefined | null;
+	type?: string | undefined | null;
+	width?: number | string | undefined | null;
+}
+
+export interface HTMLFieldsetAttributes extends HTMLAttributes<HTMLFieldSetElement> {
+	disabled?: boolean | undefined | null;
+	form?: string | undefined | null;
+	name?: string | undefined | null;
+}
+
+export interface HTMLFormAttributes extends HTMLAttributes<HTMLFormElement> {
+	acceptcharset?: string | undefined | null;
+	action?: string | undefined | null;
+	autocomplete?: string | undefined | null;
+	enctype?: string | undefined | null;
+	method?: string | undefined | null;
+	name?: string | undefined | null;
+	novalidate?: boolean | undefined | null;
+	target?: string | undefined | null;
+	rel?: string | undefined | null;
+}
+
+export interface HTMLHtmlAttributes extends HTMLAttributes<HTMLHtmlElement> {
+	manifest?: string | undefined | null;
+}
+
+export interface HTMLIframeAttributes extends HTMLAttributes<HTMLIFrameElement> {
+	allow?: string | undefined | null;
+	allowfullscreen?: boolean | undefined | null;
+	allowtransparency?: boolean | undefined | null;
+	/** @deprecated */
+	frameborder?: number | string | undefined | null;
+	height?: number | string | undefined | null;
+	loading?: 'eager' | 'lazy' | undefined | null;
+	/** @deprecated */
+	marginheight?: number | undefined | null;
+	/** @deprecated */
+	marginwidth?: number | undefined | null;
+	name?: string | undefined | null;
+	referrerpolicy?: ReferrerPolicy | undefined | null;
+	sandbox?: string | undefined | null;
+	/** @deprecated */
+	scrolling?: string | undefined | null;
+	seamless?: boolean | undefined | null;
+	src?: string | undefined | null;
+	srcdoc?: string | undefined | null;
+	width?: number | string | undefined | null;
+}
+
+export interface HTMLImgAttributes extends HTMLAttributes<HTMLImageElement> {
+	alt?: string | undefined | null;
+	crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null;
+	decoding?: 'async' | 'auto' | 'sync' | undefined | null;
+	height?: number | string | undefined | null;
+	ismap?: boolean | undefined | null;
+	loading?: 'eager' | 'lazy' | undefined | null;
+	referrerpolicy?: ReferrerPolicy | undefined | null;
+	sizes?: string | undefined | null;
+	src?: string | undefined | null;
+	srcset?: string | undefined | null;
+	usemap?: string | undefined | null;
+	width?: number | string | undefined | null;
+}
+
+export interface HTMLInsAttributes extends HTMLAttributes<HTMLModElement> {
+	cite?: string | undefined | null;
+	datetime?: string | undefined | null;
+}
+
+export type HTMLInputTypeAttribute =
+	| 'button'
+	| 'checkbox'
+	| 'color'
+	| 'date'
+	| 'datetime-local'
+	| 'email'
+	| 'file'
+	| 'hidden'
+	| 'image'
+	| 'month'
+	| 'number'
+	| 'password'
+	| 'radio'
+	| 'range'
+	| 'reset'
+	| 'search'
+	| 'submit'
+	| 'tel'
+	| 'text'
+	| 'time'
+	| 'url'
+	| 'week'
+	| (string & {});
+
+export interface HTMLInputAttributes extends HTMLAttributes<HTMLInputElement> {
+	accept?: string | undefined | null;
+	alt?: string | undefined | null;
+	autocomplete?: string | undefined | null;
+	capture?: boolean | 'user' | 'environment' | undefined | null; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute
+	checked?: boolean | undefined | null;
+	crossorigin?: string | undefined | null;
+	disabled?: boolean | undefined | null;
+	form?: string | undefined | null;
+	formaction?: string | undefined | null;
+	formenctype?: string | undefined | null;
+	formmethod?: string | undefined | null;
+	formnovalidate?: boolean | undefined | null;
+	formtarget?: string | undefined | null;
+	height?: number | string | undefined | null;
+	list?: string | undefined | null;
+	max?: number | string | undefined | null;
+	maxlength?: number | undefined | null;
+	min?: number | string | undefined | null;
+	minlength?: number | undefined | null;
+	multiple?: boolean | undefined | null;
+	name?: string | undefined | null;
+	pattern?: string | undefined | null;
+	placeholder?: string | undefined | null;
+	readonly?: boolean | undefined | null;
+	required?: boolean | undefined | null;
+	size?: number | undefined | null;
+	src?: string | undefined | null;
+	step?: number | string | undefined | null;
+	type?: HTMLInputTypeAttribute | undefined | null;
+	value?: any;
+	width?: number | string | undefined | null;
+
+	'on:change'?: ChangeEventHandler<HTMLInputElement> | undefined | null;
+
+	'bind:checked'?: boolean | undefined | null;
+	'bind:value'?: any;
+	'bind:group'?: any | undefined | null;
+	'bind:files'?: FileList | undefined | null;
+	'bind:indeterminate'?: boolean | undefined | null;
+}
+
+export interface HTMLKeygenAttributes extends HTMLAttributes<HTMLElement> {
+	challenge?: string | undefined | null;
+	disabled?: boolean | undefined | null;
+	form?: string | undefined | null;
+	keytype?: string | undefined | null;
+	keyparams?: string | undefined | null;
+	name?: string | undefined | null;
+}
+
+export interface HTMLLabelAttributes extends HTMLAttributes<HTMLLabelElement> {
+	form?: string | undefined | null;
+	for?: string | undefined | null;
+}
+
+export interface HTMLLiAttributes extends HTMLAttributes<HTMLLIElement> {
+	value?: string | string[] | number | undefined | null;
+}
+
+export interface HTMLLinkAttributes extends HTMLAttributes<HTMLLinkElement> {
+	as?: string | undefined | null;
+	crossorigin?: string | undefined | null;
+	href?: string | undefined | null;
+	hreflang?: string | undefined | null;
+	integrity?: string | undefined | null;
+	media?: string | undefined | null;
+	imagesrcset?: string | undefined | null;
+	imagesizes?: string | undefined | null;
+	referrerpolicy?: ReferrerPolicy | undefined | null;
+	rel?: string | undefined | null;
+	sizes?: string | undefined | null;
+	type?: string | undefined | null;
+	charset?: string | undefined | null;
+}
+
+export interface HTMLMapAttributes extends HTMLAttributes<HTMLMapElement> {
+	name?: string | undefined | null;
+}
+
+export interface HTMLMenuAttributes extends HTMLAttributes<HTMLMenuElement> {
+	type?: string | undefined | null;
+}
+
+export interface HTMLMediaAttributes<T extends HTMLMediaElement> extends HTMLAttributes<T> {
+	autoplay?: boolean | undefined | null;
+	controls?: boolean | undefined | null;
+	controlslist?: 'nodownload' | 'nofullscreen' | 'noplaybackrate' | 'noremoteplayback' | (string & {}) | undefined | null;
+	crossorigin?: string | undefined | null;
+	currenttime?: number | undefined | null;
+	defaultmuted?: boolean | undefined | null;
+	defaultplaybackrate?: number | undefined | null;
+	loop?: boolean | undefined | null;
+	mediagroup?: string | undefined | null;
+	muted?: boolean | undefined | null;
+	playsinline?: boolean | undefined | null;
+	preload?: string | undefined | null;
+	src?: string | undefined | null;
+	/**
+	 * a value between 0 and 1
+	 */
+	volume?: number | undefined | null;
+
+	readonly 'bind:duration'?: number | undefined | null;
+	readonly 'bind:buffered'?: SvelteMediaTimeRange[] | undefined | null;
+	readonly 'bind:played'?: SvelteMediaTimeRange[] | undefined | null;
+	readonly 'bind:seekable'?: SvelteMediaTimeRange[] | undefined | null;
+	readonly 'bind:seeking'?: boolean | undefined | null;
+	readonly 'bind:ended'?: boolean | undefined | null;
+	'bind:muted'?: boolean | undefined | null;
+	'bind:volume'?: number | undefined | null;
+	/**
+	 * the current playback time in the video, in seconds
+	 */
+	'bind:currentTime'?: number | undefined | null;
+	/**
+	 * how fast or slow to play the video, where 1 is 'normal'
+	 */
+	'bind:playbackRate'?: number | undefined | null;
+	'bind:paused'?: boolean | undefined | null;
+}
+
+export interface HTMLMetaAttributes extends HTMLAttributes<HTMLMetaElement> {
+	charSet?: string | undefined | null;
+	content?: string | undefined | null;
+	httpequiv?: string | undefined | null;
+	name?: string | undefined | null;
+	media?: string | undefined | null;
+}
+
+export interface HTMLMeterAttributes extends HTMLAttributes<HTMLMeterElement> {
+	form?: string | undefined | null;
+	high?: number | undefined | null;
+	low?: number | undefined | null;
+	max?: number | string | undefined | null;
+	min?: number | string | undefined | null;
+	optimum?: number | undefined | null;
+	value?: string | string[] | number | undefined | null;
+}
+
+export interface HTMLQuoteAttributes extends HTMLAttributes<HTMLQuoteElement> {
+	cite?: string | undefined | null;
+}
+
+export interface HTMLObjectAttributes extends HTMLAttributes<HTMLObjectElement> {
+	classid?: string | undefined | null;
+	data?: string | undefined | null;
+	form?: string | undefined | null;
+	height?: number | string | undefined | null;
+	name?: string | undefined | null;
+	type?: string | undefined | null;
+	usemap?: string | undefined | null;
+	width?: number | string | undefined | null;
+	wmode?: string | undefined | null;
+}
+
+export interface HTMLOlAttributes extends HTMLAttributes<HTMLOListElement> {
+	reversed?: boolean | undefined | null;
+	start?: number | undefined | null;
+	type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined | null;
+}
+
+export interface HTMLOptgroupAttributes extends HTMLAttributes<HTMLOptGroupElement> {
+	disabled?: boolean | undefined | null;
+	label?: string | undefined | null;
+}
+
+export interface HTMLOptionAttributes extends HTMLAttributes<HTMLOptionElement> {
+	disabled?: boolean | undefined | null;
+	label?: string | undefined | null;
+	selected?: boolean | undefined | null;
+	value?: any;
+}
+
+export interface HTMLOutputAttributes extends HTMLAttributes<HTMLOutputElement> {
+	form?: string | undefined | null;
+	for?: string | undefined | null;
+	name?: string | undefined | null;
+}
+
+export interface HTMLParamAttributes extends HTMLAttributes<HTMLParamElement> {
+	name?: string | undefined | null;
+	value?: string | string[] | number | undefined | null;
+}
+
+export interface HTMLProgressAttributes extends HTMLAttributes<HTMLProgressElement> {
+	max?: number | string | undefined | null;
+	value?: string | string[] | number | undefined | null;
+}
+
+export interface HTMLSlotAttributes extends HTMLAttributes<HTMLSlotElement> {
+	name?: string | undefined | null;
+}
+
+export interface HTMLScriptAttributes extends HTMLAttributes<HTMLScriptElement> {
+	async?: boolean | undefined | null;
+	/** @deprecated */
+	charset?: string | undefined | null;
+	crossorigin?: string | undefined | null;
+	defer?: boolean | undefined | null;
+	integrity?: string | undefined | null;
+	nomodule?: boolean | undefined | null;
+	nonce?: string | undefined | null;
+	referrerpolicy?: ReferrerPolicy | undefined | null;
+	src?: string | undefined | null;
+	type?: string | undefined | null;
+}
+
+export interface HTMLSelectAttributes extends HTMLAttributes<HTMLSelectElement> {
+	autocomplete?: string | undefined | null;
+	disabled?: boolean | undefined | null;
+	form?: string | undefined | null;
+	multiple?: boolean | undefined | null;
+	name?: string | undefined | null;
+	required?: boolean | undefined | null;
+	size?: number | undefined | null;
+	value?: any;
+
+	'on:change'?: ChangeEventHandler<HTMLSelectElement> | undefined | null;
+
+	'bind:value'?: any;
+}
+
+export interface HTMLSourceAttributes extends HTMLAttributes<HTMLSourceElement> {
+	height?: number | string | undefined | null;
+	media?: string | undefined | null;
+	sizes?: string | undefined | null;
+	src?: string | undefined | null;
+	srcset?: string | undefined | null;
+	type?: string | undefined | null;
+	width?: number | string | undefined | null;
+}
+
+export interface HTMLStyleAttributes extends HTMLAttributes<HTMLStyleElement> {
+	media?: string | undefined | null;
+	nonce?: string | undefined | null;
+	scoped?: boolean | undefined | null;
+	type?: string | undefined | null;
+}
+
+export interface HTMLTableAttributes extends HTMLAttributes<HTMLTableElement> {
+	align?: 'left' | 'center' | 'right' | undefined | null;
+	bgcolor?: string | undefined | null;
+	border?: number | undefined | null;
+	cellpadding?: number | string | undefined | null;
+	cellspacing?: number | string | undefined | null;
+	frame?: boolean | undefined | null;
+	rules?: 'none' | 'groups' | 'rows' | 'columns' | 'all' | undefined | null;
+	summary?: string | undefined | null;
+	width?: number | string | undefined | null;
+}
+
+export interface HTMLTextareaAttributes extends HTMLAttributes<HTMLTextAreaElement> {
+	autocomplete?: string | undefined | null;
+	cols?: number | undefined | null;
+	dirname?: string | undefined | null;
+	disabled?: boolean | undefined | null;
+	form?: string | undefined | null;
+	maxlength?: number | undefined | null;
+	minlength?: number | undefined | null;
+	name?: string | undefined | null;
+	placeholder?: string | undefined | null;
+	readonly?: boolean | undefined | null;
+	required?: boolean | undefined | null;
+	rows?: number | undefined | null;
+	value?: string | string[] | number | undefined | null;
+	wrap?: string | undefined | null;
+
+	'on:change'?: ChangeEventHandler<HTMLTextAreaElement> | undefined | null;
+
+	'bind:value'?: any;
+}
+
+export interface HTMLTdAttributes extends HTMLAttributes<HTMLTableCellElement> {
+	align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined | null;
+	colspan?: number | undefined | null;
+	headers?: string | undefined | null;
+	rowspan?: number | undefined | null;
+	scope?: string | undefined | null;
+	abbr?: string | undefined | null;
+	height?: number | string | undefined | null;
+	width?: number | string | undefined | null;
+	valign?: 'top' | 'middle' | 'bottom' | 'baseline' | undefined | null;
+}
+
+export interface HTMLThAttributes extends HTMLAttributes<HTMLTableCellElement> {
+	align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined | null;
+	colspan?: number | undefined | null;
+	headers?: string | undefined | null;
+	rowspan?: number | undefined | null;
+	scope?: string | undefined | null;
+	abbr?: string | undefined | null;
+}
+
+export interface HTMLTimeAttributes extends HTMLAttributes<HTMLTimeElement> {
+	datetime?: string | undefined | null;
+}
+
+export interface HTMLTrackAttributes extends HTMLAttributes<HTMLTrackElement> {
+	default?: boolean | undefined | null;
+	kind?: string | undefined | null;
+	label?: string | undefined | null;
+	src?: string | undefined | null;
+	srclang?: string | undefined | null;
+}
+
+export interface HTMLVideoAttributes extends HTMLMediaAttributes<HTMLVideoElement> {
+	height?: number | string | undefined | null;
+	playsinline?: boolean | undefined | null;
+	poster?: string | undefined | null;
+	width?: number | string | undefined | null;
+	disablepictureinpicture?: boolean | undefined | null;
+	disableremoteplayback?: boolean | undefined | null;
+
+	readonly 'bind:videoWidth'?: number | undefined | null;
+	readonly 'bind:videoHeight'?: number | undefined | null;
+}
+
+export interface SvelteMediaTimeRange {
+	start: number;
+	end: number;
+}
+
+export interface SvelteWindowAttributes extends HTMLAttributes<Window> {
+	readonly 'bind:innerWidth'?: Window['innerWidth'] | undefined | null;
+	readonly 'bind:innerHeight'?: Window['innerHeight'] | undefined | null;
+	readonly 'bind:outerWidth'?: Window['outerWidth'] | undefined | null;
+	readonly 'bind:outerHeight'?: Window['outerHeight'] | undefined | null;
+	'bind:scrollX'?: Window['scrollX'] | undefined | null;
+	'bind:scrollY'?: Window['scrollY'] | undefined | null;
+	readonly 'bind:online'?: Window['navigator']['onLine'] | undefined | null;
+
+	// SvelteKit
+	'on:sveltekit:start'?: EventHandler<CustomEvent, Window> | undefined | null;
+	'on:sveltekit:navigation-start'?: EventHandler<CustomEvent, Window> | undefined | null;
+	'on:sveltekit:navigation-end'?: EventHandler<CustomEvent, Window> | undefined | null;
+
+	'on:devicelight'?: EventHandler<Event, Window> | undefined | null;
+	'on:beforeinstallprompt'?: EventHandler<Event, Window> | undefined | null;
+	'on:deviceproximity'?: EventHandler<Event, Window> | undefined | null;
+	'on:paint'?: EventHandler<Event, Window> | undefined | null;
+	'on:userproximity'?: EventHandler<Event, Window> | undefined | null;
+	'on:beforeprint'?: EventHandler<Event, Window> | undefined | null;
+	'on:afterprint'?: EventHandler<Event, Window> | undefined | null;
+	'on:languagechange'?: EventHandler<Event, Window> | undefined | null;
+	'on:orientationchange'?: EventHandler<Event, Window> | undefined | null;
+	'on:message'?: EventHandler<MessageEvent, Window> | undefined | null;
+	'on:messageerror'?: EventHandler<MessageEvent, Window> | undefined | null;
+	'on:offline'?: EventHandler<Event, Window> | undefined | null;
+	'on:online'?: EventHandler<Event, Window> | undefined | null;
+	'on:beforeunload'?: EventHandler<BeforeUnloadEvent, Window> | undefined | null;
+	'on:unload'?: EventHandler<Event, Window> | undefined | null;
+	'on:storage'?: EventHandler<StorageEvent, Window> | undefined | null;
+	'on:hashchange'?: EventHandler<HashChangeEvent, Window> | undefined | null;
+	'on:pagehide'?: EventHandler<PageTransitionEvent, Window> | undefined | null;
+	'on:pageshow'?: EventHandler<PageTransitionEvent, Window> | undefined | null;
+	'on:popstate'?: EventHandler<PopStateEvent, Window> | undefined | null;
+	'on:devicemotion'?: EventHandler<DeviceMotionEvent> | undefined | null;
+	'on:deviceorientation'?: EventHandler<DeviceOrientationEvent, Window> | undefined | null;
+	'on:deviceorientationabsolute'?: EventHandler<DeviceOrientationEvent, Window> | undefined | null;
+	'on:unhandledrejection'?: EventHandler<PromiseRejectionEvent, Window> | undefined | null;
+	'on:rejectionhandled'?: EventHandler<PromiseRejectionEvent, Window> | undefined | null;
+}
+
+export interface SVGAttributes<T extends EventTarget> extends AriaAttributes, DOMAttributes<T> {
+	// Attributes which also defined in HTMLAttributes
+	className?: string | undefined | null;
+	class?: string | undefined | null;
+	color?: string | undefined | null;
+	height?: number | string | undefined | null;
+	id?: string | undefined | null;
+	lang?: string | undefined | null;
+	max?: number | string | undefined | null;
+	media?: string | undefined | null;
+	method?: string | undefined | null;
+	min?: number | string | undefined | null;
+	name?: string | undefined | null;
+	style?: string | undefined | null;
+	target?: string | undefined | null;
+	type?: string | undefined | null;
+	width?: number | string | undefined | null;
+
+	// Other HTML properties supported by SVG elements in browsers
+	role?: AriaRole | undefined | null;
+	tabindex?: number | undefined | null;
+	crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null;
+
+	// SVG Specific attributes
+	'accent-height'?: number | string | undefined | null;
+	accumulate?: 'none' | 'sum' | undefined | null;
+	additive?: 'replace' | 'sum' | undefined | null;
+	'alignment-baseline'?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' |
+	  'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' |
+	  'mathematical' | 'inherit' | undefined | null;
+	allowReorder?: 'no' | 'yes' | undefined | null;
+	alphabetic?: number | string | undefined | null;
+	amplitude?: number | string | undefined | null;
+	'arabic-form'?: 'initial' | 'medial' | 'terminal' | 'isolated' | undefined | null;
+	ascent?: number | string | undefined | null;
+	attributeName?: string | undefined | null;
+	attributeType?: string | undefined | null;
+	autoReverse?: number | string | undefined | null;
+	azimuth?: number | string | undefined | null;
+	baseFrequency?: number | string | undefined | null;
+	'baseline-shift'?: number | string | undefined | null;
+	baseProfile?: number | string | undefined | null;
+	bbox?: number | string | undefined | null;
+	begin?: number | string | undefined | null;
+	bias?: number | string | undefined | null;
+	by?: number | string | undefined | null;
+	calcMode?: number | string | undefined | null;
+	'cap-height'?: number | string | undefined | null;
+	clip?: number | string | undefined | null;
+	'clip-path'?: string | undefined | null;
+	clipPathUnits?: number | string | undefined | null;
+	'clip-rule'?: number | string | undefined | null;
+	'color-interpolation'?: number | string | undefined | null;
+	'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit' | undefined | null;
+	'color-profile'?: number | string | undefined | null;
+	'color-rendering'?: number | string | undefined | null;
+	contentScriptType?: number | string | undefined | null;
+	contentStyleType?: number | string | undefined | null;
+	cursor?: number | string | undefined | null;
+	cx?: number | string | undefined | null;
+	cy?: number | string | undefined | null;
+	d?: string | undefined | null;
+	decelerate?: number | string | undefined | null;
+	descent?: number | string | undefined | null;
+	diffuseConstant?: number | string | undefined | null;
+	direction?: number | string | undefined | null;
+	display?: number | string | undefined | null;
+	divisor?: number | string | undefined | null;
+	'dominant-baseline'?: number | string | undefined | null;
+	dur?: number | string | undefined | null;
+	dx?: number | string | undefined | null;
+	dy?: number | string | undefined | null;
+	edgeMode?: number | string | undefined | null;
+	elevation?: number | string | undefined | null;
+	'enable-background'?: number | string | undefined | null;
+	end?: number | string | undefined | null;
+	exponent?: number | string | undefined | null;
+	externalResourcesRequired?: number | string | undefined | null;
+	fill?: string | undefined | null;
+	'fill-opacity'?: number | string | undefined | null;
+	'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' | undefined | null;
+	filter?: string | undefined | null;
+	filterRes?: number | string | undefined | null;
+	filterUnits?: number | string | undefined | null;
+	'flood-color'?: number | string | undefined | null;
+	'flood-opacity'?: number | string | undefined | null;
+	focusable?: number | string | undefined | null;
+	'font-family'?: string | undefined | null;
+	'font-size'?: number | string | undefined | null;
+	'font-size-adjust'?: number | string | undefined | null;
+	'font-stretch'?: number | string | undefined | null;
+	'font-style'?: number | string | undefined | null;
+	'font-variant'?: number | string | undefined | null;
+	'font-weight'?: number | string | undefined | null;
+	format?: number | string | undefined | null;
+	from?: number | string | undefined | null;
+	fx?: number | string | undefined | null;
+	fy?: number | string | undefined | null;
+	g1?: number | string | undefined | null;
+	g2?: number | string | undefined | null;
+	'glyph-name'?: number | string | undefined | null;
+	'glyph-orientation-horizontal'?: number | string | undefined | null;
+	'glyph-orientation-vertical'?: number | string | undefined | null;
+	glyphRef?: number | string | undefined | null;
+	gradientTransform?: string | undefined | null;
+	gradientUnits?: string | undefined | null;
+	hanging?: number | string | undefined | null;
+	href?: string | undefined | null;
+	'horiz-adv-x'?: number | string | undefined | null;
+	'horiz-origin-x'?: number | string | undefined | null;
+	ideographic?: number | string | undefined | null;
+	'image-rendering'?: number | string | undefined | null;
+	in2?: number | string | undefined | null;
+	in?: string | undefined | null;
+	intercept?: number | string | undefined | null;
+	k1?: number | string | undefined | null;
+	k2?: number | string | undefined | null;
+	k3?: number | string | undefined | null;
+	k4?: number | string | undefined | null;
+	k?: number | string | undefined | null;
+	kernelMatrix?: number | string | undefined | null;
+	kernelUnitLength?: number | string | undefined | null;
+	kerning?: number | string | undefined | null;
+	keyPoints?: number | string | undefined | null;
+	keySplines?: number | string | undefined | null;
+	keyTimes?: number | string | undefined | null;
+	lengthAdjust?: number | string | undefined | null;
+	'letter-spacing'?: number | string | undefined | null;
+	'lighting-color'?: number | string | undefined | null;
+	limitingConeAngle?: number | string | undefined | null;
+	local?: number | string | undefined | null;
+	'marker-end'?: string | undefined | null;
+	markerHeight?: number | string | undefined | null;
+	'marker-mid'?: string | undefined | null;
+	'marker-start'?: string | undefined | null;
+	markerUnits?: number | string | undefined | null;
+	markerWidth?: number | string | undefined | null;
+	mask?: string | undefined | null;
+	maskContentUnits?: number | string | undefined | null;
+	maskUnits?: number | string | undefined | null;
+	mathematical?: number | string | undefined | null;
+	mode?: number | string | undefined | null;
+	numOctaves?: number | string | undefined | null;
+	offset?: number | string | undefined | null;
+	opacity?: number | string | undefined | null;
+	operator?: number | string | undefined | null;
+	order?: number | string | undefined | null;
+	orient?: number | string | undefined | null;
+	orientation?: number | string | undefined | null;
+	origin?: number | string | undefined | null;
+	overflow?: number | string | undefined | null;
+	'overline-position'?: number | string | undefined | null;
+	'overline-thickness'?: number | string | undefined | null;
+	'paint-order'?: number | string | undefined | null;
+	'panose-1'?: number | string | undefined | null;
+	path?: string | undefined | null;
+	pathLength?: number | string | undefined | null;
+	patternContentUnits?: string | undefined | null;
+	patternTransform?: number | string | undefined | null;
+	patternUnits?: string | undefined | null;
+	'pointer-events'?: number | string | undefined | null;
+	points?: string | undefined | null;
+	pointsAtX?: number | string | undefined | null;
+	pointsAtY?: number | string | undefined | null;
+	pointsAtZ?: number | string | undefined | null;
+	preserveAlpha?: number | string | undefined | null;
+	preserveAspectRatio?: string | undefined | null;
+	primitiveUnits?: number | string | undefined | null;
+	r?: number | string | undefined | null;
+	radius?: number | string | undefined | null;
+	refX?: number | string | undefined | null;
+	refY?: number | string | undefined | null;
+	'rendering-intent'?: number | string | undefined | null;
+	repeatCount?: number | string | undefined | null;
+	repeatDur?: number | string | undefined | null;
+	requiredExtensions?: number | string | undefined | null;
+	requiredFeatures?: number | string | undefined | null;
+	restart?: number | string | undefined | null;
+	result?: string | undefined | null;
+	rotate?: number | string | undefined | null;
+	rx?: number | string | undefined | null;
+	ry?: number | string | undefined | null;
+	scale?: number | string | undefined | null;
+	seed?: number | string | undefined | null;
+	'shape-rendering'?: number | string | undefined | null;
+	slope?: number | string | undefined | null;
+	spacing?: number | string | undefined | null;
+	specularConstant?: number | string | undefined | null;
+	specularExponent?: number | string | undefined | null;
+	speed?: number | string | undefined | null;
+	spreadMethod?: string | undefined | null;
+	startOffset?: number | string | undefined | null;
+	stdDeviation?: number | string | undefined | null;
+	stemh?: number | string | undefined | null;
+	stemv?: number | string | undefined | null;
+	stitchTiles?: number | string | undefined | null;
+	'stop-color'?: string | undefined | null;
+	'stop-opacity'?: number | string | undefined | null;
+	'strikethrough-position'?: number | string | undefined | null;
+	'strikethrough-thickness'?: number | string | undefined | null;
+	string?: number | string | undefined | null;
+	stroke?: string | undefined | null;
+	'stroke-dasharray'?: string | number | undefined | null;
+	'stroke-dashoffset'?: string | number | undefined | null;
+	'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit' | undefined | null;
+	'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit' | undefined | null;
+	'stroke-miterlimit'?: string | undefined | null;
+	'stroke-opacity'?: number | string | undefined | null;
+	'stroke-width'?: number | string | undefined | null;
+	surfaceScale?: number | string | undefined | null;
+	systemLanguage?: number | string | undefined | null;
+	tableValues?: number | string | undefined | null;
+	targetX?: number | string | undefined | null;
+	targetY?: number | string | undefined | null;
+	'text-anchor'?: string | undefined | null;
+	'text-decoration'?: number | string | undefined | null;
+	textLength?: number | string | undefined | null;
+	'text-rendering'?: number | string | undefined | null;
+	to?: number | string | undefined | null;
+	transform?: string | undefined | null;
+	u1?: number | string | undefined | null;
+	u2?: number | string | undefined | null;
+	'underline-position'?: number | string | undefined | null;
+	'underline-thickness'?: number | string | undefined | null;
+	unicode?: number | string | undefined | null;
+	'unicode-bidi'?: number | string | undefined | null;
+	'unicode-range'?: number | string | undefined | null;
+	'units-per-em'?: number | string | undefined | null;
+	'v-alphabetic'?: number | string | undefined | null;
+	values?: string | undefined | null;
+	'vector-effect'?: number | string | undefined | null;
+	version?: string | undefined | null;
+	'vert-adv-y'?: number | string | undefined | null;
+	'vert-origin-x'?: number | string | undefined | null;
+	'vert-origin-y'?: number | string | undefined | null;
+	'v-hanging'?: number | string | undefined | null;
+	'v-ideographic'?: number | string | undefined | null;
+	viewBox?: string | undefined | null;
+	viewTarget?: number | string | undefined | null;
+	visibility?: number | string | undefined | null;
+	'v-mathematical'?: number | string | undefined | null;
+	widths?: number | string | undefined | null;
+	'word-spacing'?: number | string | undefined | null;
+	'writing-mode'?: number | string | undefined | null;
+	x1?: number | string | undefined | null;
+	x2?: number | string | undefined | null;
+	x?: number | string | undefined | null;
+	xChannelSelector?: string | undefined | null;
+	'x-height'?: number | string | undefined | null;
+	'xlink:actuate'?: string | undefined | null;
+	'xlink:arcrole'?: string | undefined | null;
+	'xlink:href'?: string | undefined | null;
+	'xlink:role'?: string | undefined | null;
+	'xlink:show'?: string | undefined | null;
+	'xlink:title'?: string | undefined | null;
+	'xlink:type'?: string | undefined | null;
+	'xml:base'?: string | undefined | null;
+	'xml:lang'?: string | undefined | null;
+	xmlns?: string | undefined | null;
+	'xmlns:xlink'?: string | undefined | null;
+	'xml:space'?: string | undefined | null;
+	y1?: number | string | undefined | null;
+	y2?: number | string | undefined | null;
+	y?: number | string | undefined | null;
+	yChannelSelector?: string | undefined | null;
+	z?: number | string | undefined | null;
+	zoomAndPan?: string | undefined | null;
+}
+
+export interface HTMLWebViewAttributes extends HTMLAttributes<HTMLElement> {
+	allowfullscreen?: boolean | undefined | null;
+	allowpopups?: boolean | undefined | null;
+	autosize?: boolean | undefined | null;
+	blinkfeatures?: string | undefined | null;
+	disableblinkfeatures?: string | undefined | null;
+	disableguestresize?: boolean | undefined | null;
+	disablewebsecurity?: boolean | undefined | null;
+	guestinstance?: string | undefined | null;
+	httpreferrer?: string | undefined | null;
+	nodeintegration?: boolean | undefined | null;
+	partition?: string | undefined | null;
+	plugins?: boolean | undefined | null;
+	preload?: string | undefined | null;
+	src?: string | undefined | null;
+	useragent?: string | undefined | null;
+	webpreferences?: string | undefined | null;
+}
+
+//
+// DOM Elements
+// ----------------------------------------------------------------------
+
+export interface SvelteHTMLElements {
+	a: HTMLAnchorAttributes;
+	abbr: HTMLAttributes<HTMLElement>;
+	address: HTMLAttributes<HTMLElement>;
+	area: HTMLAreaAttributes;
+	article: HTMLAttributes<HTMLElement>;
+	aside: HTMLAttributes<HTMLElement>;
+	audio: HTMLAudioAttributes;
+	b: HTMLAttributes<HTMLElement>;
+	base: HTMLBaseAttributes;
+	bdi: HTMLAttributes<HTMLElement>;
+	bdo: HTMLAttributes<HTMLElement>;
+	big: HTMLAttributes<HTMLElement>;
+	blockquote: HTMLBlockquoteAttributes;
+	body: HTMLAttributes<HTMLBodyElement>;
+	br: HTMLAttributes<HTMLBRElement>;
+	button: HTMLButtonAttributes;
+	canvas: HTMLCanvasAttributes;
+	caption: HTMLAttributes<HTMLElement>;
+	cite: HTMLAttributes<HTMLElement>;
+	code: HTMLAttributes<HTMLElement>;
+	col: HTMLColAttributes;
+	colgroup: HTMLColgroupAttributes;
+	data: HTMLDataAttributes;
+	datalist: HTMLAttributes<HTMLDataListElement>;
+	dd: HTMLAttributes<HTMLElement>;
+	del: HTMLDelAttributes;
+	details: HTMLDetailsAttributes;
+	dfn: HTMLAttributes<HTMLElement>;
+	dialog: HTMLDialogAttributes;
+	div: HTMLAttributes<HTMLDivElement>;
+	dl: HTMLAttributes<HTMLDListElement>;
+	dt: HTMLAttributes<HTMLElement>;
+	em: HTMLAttributes<HTMLElement>;
+	embed: HTMLEmbedAttributes;
+	fieldset: HTMLFieldsetAttributes;
+	figcaption: HTMLAttributes<HTMLElement>;
+	figure: HTMLAttributes<HTMLElement>;
+	footer: HTMLAttributes<HTMLElement>;
+	form: HTMLFormAttributes;
+	h1: HTMLAttributes<HTMLHeadingElement>;
+	h2: HTMLAttributes<HTMLHeadingElement>;
+	h3: HTMLAttributes<HTMLHeadingElement>;
+	h4: HTMLAttributes<HTMLHeadingElement>;
+	h5: HTMLAttributes<HTMLHeadingElement>;
+	h6: HTMLAttributes<HTMLHeadingElement>;
+	head: HTMLAttributes<HTMLElement>;
+	header: HTMLAttributes<HTMLElement>;
+	hgroup: HTMLAttributes<HTMLElement>;
+	hr: HTMLAttributes<HTMLHRElement>;
+	html: HTMLHtmlAttributes;
+	i: HTMLAttributes<HTMLElement>;
+	iframe: HTMLIframeAttributes;
+	img: HTMLImgAttributes;
+	input: HTMLInputAttributes;
+	ins: HTMLInsAttributes;
+	kbd: HTMLAttributes<HTMLElement>;
+	keygen: HTMLKeygenAttributes;
+	label: HTMLLabelAttributes;
+	legend: HTMLAttributes<HTMLLegendElement>;
+	li: HTMLLiAttributes;
+	link: HTMLLinkAttributes;
+	main: HTMLAttributes<HTMLElement>;
+	map: HTMLMapAttributes;
+	mark: HTMLAttributes<HTMLElement>;
+	menu: HTMLMenuAttributes;
+	menuitem: HTMLAttributes<HTMLElement>;
+	meta: HTMLMetaAttributes;
+	meter: HTMLMeterAttributes;
+	nav: HTMLAttributes<HTMLElement>;
+	noscript: HTMLAttributes<HTMLElement>;
+	object: HTMLObjectAttributes;
+	ol: HTMLOlAttributes;
+	optgroup: HTMLOptgroupAttributes;
+	option: HTMLOptionAttributes;
+	output: HTMLOutputAttributes;
+	p: HTMLAttributes<HTMLParagraphElement>;
+	param: HTMLParamAttributes;
+	picture: HTMLAttributes<HTMLElement>;
+	pre: HTMLAttributes<HTMLPreElement>;
+	progress: HTMLProgressAttributes;
+	q: HTMLQuoteAttributes;
+	rp: HTMLAttributes<HTMLElement>;
+	rt: HTMLAttributes<HTMLElement>;
+	ruby: HTMLAttributes<HTMLElement>;
+	s: HTMLAttributes<HTMLElement>;
+	samp: HTMLAttributes<HTMLElement>;
+	slot: HTMLSlotAttributes;
+	script: HTMLScriptAttributes;
+	section: HTMLAttributes<HTMLElement>;
+	select: HTMLSelectAttributes;
+	small: HTMLAttributes<HTMLElement>;
+	source: HTMLSourceAttributes;
+	span: HTMLAttributes<HTMLSpanElement>;
+	strong: HTMLAttributes<HTMLElement>;
+	style: HTMLStyleAttributes;
+	sub: HTMLAttributes<HTMLElement>;
+	summary: HTMLAttributes<HTMLElement>;
+	sup: HTMLAttributes<HTMLElement>;
+	table: HTMLTableAttributes;
+	template: HTMLAttributes<HTMLTemplateElement>;
+	tbody: HTMLAttributes<HTMLTableSectionElement>;
+	td: HTMLTdAttributes;
+	textarea: HTMLTextareaAttributes;
+	tfoot: HTMLAttributes<HTMLTableSectionElement>;
+	th: HTMLThAttributes;
+	thead: HTMLAttributes<HTMLTableSectionElement>;
+	time: HTMLTimeAttributes;
+	title: HTMLAttributes<HTMLTitleElement>;
+	tr: HTMLAttributes<HTMLTableRowElement>;
+	track: HTMLTrackAttributes;
+	u: HTMLAttributes<HTMLElement>;
+	ul: HTMLAttributes<HTMLUListElement>;
+	var: HTMLAttributes<HTMLElement>;
+	video: HTMLVideoAttributes;
+	wbr: HTMLAttributes<HTMLElement>;
+	webview: HTMLWebViewAttributes;
+	// SVG
+	svg: SVGAttributes<SVGSVGElement>;
+
+	animate: SVGAttributes<SVGAnimateElement>;
+	animateMotion: SVGAttributes<SVGElement>;
+	animateTransform: SVGAttributes<SVGAnimateTransformElement>;
+	circle: SVGAttributes<SVGCircleElement>;
+	clipPath: SVGAttributes<SVGClipPathElement>;
+	defs: SVGAttributes<SVGDefsElement>;
+	desc: SVGAttributes<SVGDescElement>;
+	ellipse: SVGAttributes<SVGEllipseElement>;
+	feBlend: SVGAttributes<SVGFEBlendElement>;
+	feColorMatrix: SVGAttributes<SVGFEColorMatrixElement>;
+	feComponentTransfer: SVGAttributes<SVGFEComponentTransferElement>;
+	feComposite: SVGAttributes<SVGFECompositeElement>;
+	feConvolveMatrix: SVGAttributes<SVGFEConvolveMatrixElement>;
+	feDiffuseLighting: SVGAttributes<SVGFEDiffuseLightingElement>;
+	feDisplacementMap: SVGAttributes<SVGFEDisplacementMapElement>;
+	feDistantLight: SVGAttributes<SVGFEDistantLightElement>;
+	feDropShadow: SVGAttributes<SVGFEDropShadowElement>;
+	feFlood: SVGAttributes<SVGFEFloodElement>;
+	feFuncA: SVGAttributes<SVGFEFuncAElement>;
+	feFuncB: SVGAttributes<SVGFEFuncBElement>;
+	feFuncG: SVGAttributes<SVGFEFuncGElement>;
+	feFuncR: SVGAttributes<SVGFEFuncRElement>;
+	feGaussianBlur: SVGAttributes<SVGFEGaussianBlurElement>;
+	feImage: SVGAttributes<SVGFEImageElement>;
+	feMerge: SVGAttributes<SVGFEMergeElement>;
+	feMergeNode: SVGAttributes<SVGFEMergeNodeElement>;
+	feMorphology: SVGAttributes<SVGFEMorphologyElement>;
+	feOffset: SVGAttributes<SVGFEOffsetElement>;
+	fePointLight: SVGAttributes<SVGFEPointLightElement>;
+	feSpecularLighting: SVGAttributes<SVGFESpecularLightingElement>;
+	feSpotLight: SVGAttributes<SVGFESpotLightElement>;
+	feTile: SVGAttributes<SVGFETileElement>;
+	feTurbulence: SVGAttributes<SVGFETurbulenceElement>;
+	filter: SVGAttributes<SVGFilterElement>;
+	foreignObject: SVGAttributes<SVGForeignObjectElement>;
+	g: SVGAttributes<SVGGElement>;
+	image: SVGAttributes<SVGImageElement>;
+	line: SVGAttributes<SVGLineElement>;
+	linearGradient: SVGAttributes<SVGLinearGradientElement>;
+	marker: SVGAttributes<SVGMarkerElement>;
+	mask: SVGAttributes<SVGMaskElement>;
+	metadata: SVGAttributes<SVGMetadataElement>;
+	mpath: SVGAttributes<SVGElement>;
+	path: SVGAttributes<SVGPathElement>;
+	pattern: SVGAttributes<SVGPatternElement>;
+	polygon: SVGAttributes<SVGPolygonElement>;
+	polyline: SVGAttributes<SVGPolylineElement>;
+	radialGradient: SVGAttributes<SVGRadialGradientElement>;
+	rect: SVGAttributes<SVGRectElement>;
+	stop: SVGAttributes<SVGStopElement>;
+	switch: SVGAttributes<SVGSwitchElement>;
+	symbol: SVGAttributes<SVGSymbolElement>;
+	text: SVGAttributes<SVGTextElement>;
+	textPath: SVGAttributes<SVGTextPathElement>;
+	tspan: SVGAttributes<SVGTSpanElement>;
+	use: SVGAttributes<SVGUseElement>;
+	view: SVGAttributes<SVGViewElement>;
+
+	// Svelte specific
+	'svelte:window': SvelteWindowAttributes;
+	'svelte:body': HTMLAttributes<HTMLElement>;
+	'svelte:fragment': { slot?: string };
+	'svelte:options': { [name: string]: any };
+	'svelte:head': { [name: string]: any };
+
+	[name: string]: { [name: string]: any };
+}
diff --git a/elements/package.json b/elements/package.json
new file mode 100644
index 0000000000..1704e6b78b
--- /dev/null
+++ b/elements/package.json
@@ -0,0 +1,3 @@
+{
+  "types": "./index.d.ts"
+}
diff --git a/package.json b/package.json
index 7996fd5583..fa7a97cbfd 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "easing",
     "motion",
     "action",
+    "elements",
     "README.md"
   ],
   "exports": {
@@ -75,6 +76,9 @@
       "import": "./transition/index.mjs",
       "require": "./transition/index.js"
     },
+    "./elements": {
+      "types": "./elements/index.d.ts"
+    },
     "./ssr": {
       "types": "./types/runtime/index.d.ts",
       "import": "./ssr.mjs",