From 35376f248753d86ea6b38a0676cdb43d803b9efd Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 21 Dec 2021 03:48:19 -0500
Subject: [PATCH 01/66] [docs] fix path to /tutorial/image.gif (#7033)

---
 .../examples/00-introduction/01-dynamic-attributes/App.svelte | 4 ++--
 .../01-introduction/03-dynamic-attributes/app-a/App.svelte    | 4 ++--
 .../01-introduction/03-dynamic-attributes/app-b/App.svelte    | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte b/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte
index 6a76b43dde..6a1ac86e69 100644
--- a/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte
+++ b/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte
@@ -1,7 +1,7 @@
 <script>
-	let src = 'tutorial/image.gif';
+	let src = '/tutorial/image.gif';
 	let name = 'Rick Astley';
 </script>
 
 <!-- {src} is short for src={src} -->
-<img {src} alt="{name} dancing">
\ No newline at end of file
+<img {src} alt="{name} dancing">
diff --git a/site/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte b/site/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
index f4ac7557da..03850a3670 100644
--- a/site/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
+++ b/site/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let src = 'tutorial/image.gif';
+	let src = '/tutorial/image.gif';
 </script>
 
-<img>
\ No newline at end of file
+<img>
diff --git a/site/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte b/site/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
index e61b4d48e0..f2f9101d51 100644
--- a/site/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
+++ b/site/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let src = 'tutorial/image.gif';
+	let src = '/tutorial/image.gif';
 	let name = 'Rick Astley';
 </script>
 

From 04890c73d24428a373e85f52694029b539908ba9 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Wed, 22 Dec 2021 00:46:39 +0700
Subject: [PATCH 02/66] [docs] absolute and future proof links (#7038)

---
 ...17-08-07-the-easiest-way-to-get-started.md |  2 +-
 .../blog/2019-04-20-write-less-code.md        |  4 +-
 ...19-04-22-svelte-3-rethinking-reactivity.md |  8 +--
 site/content/docs/00-introduction.md          |  6 +-
 site/content/docs/01-component-format.md      | 14 ++---
 site/content/docs/02-template-syntax.md       | 18 +++---
 site/content/docs/03-run-time.md              | 58 +++++++++----------
 .../03-logic/05-await-blocks/App.svelte       |  4 +-
 .../02-named-slots/ContactCard.svelte         |  6 +-
 .../00-svelte-self/File.svelte                |  4 +-
 .../00-svelte-self/Folder.svelte              |  4 +-
 .../04-svelte-body/App.svelte                 |  4 +-
 .../05-svelte-head/App.svelte                 |  4 +-
 site/content/faq/100-im-new-to-svelte.md      |  4 +-
 .../01-introduction/01-basics/text.md         |  2 +-
 .../01-introduction/07-making-an-app/text.md  |  6 +-
 .../04-logic/06-await-blocks/app-a/App.svelte |  2 +-
 .../04-logic/06-await-blocks/app-b/App.svelte |  2 +-
 .../05-events/05-event-forwarding/text.md     |  2 +-
 .../07-multiple-select-bindings/text.md       |  2 +-
 .../tutorial/06-bindings/12-bind-this/text.md |  2 +-
 .../tutorial/07-lifecycle/01-onmount/text.md  |  2 +-
 .../08-stores/02-auto-subscriptions/text.md   |  2 +-
 .../08-stores/04-derived-stores/text.md       |  2 +-
 .../04-custom-css-transitions/text.md         |  2 +-
 .../tutorial/11-animations/01-animate/text.md |  2 +-
 .../03-named-slots/app-a/ContactCard.svelte   |  6 +-
 .../03-named-slots/app-b/ContactCard.svelte   |  6 +-
 .../15-context/01-context-api/text.md         |  2 +-
 .../01-svelte-self/app-a/File.svelte          |  4 +-
 .../01-svelte-self/app-a/Folder.svelte        |  4 +-
 .../01-svelte-self/app-b/File.svelte          |  4 +-
 .../01-svelte-self/app-b/Folder.svelte        |  4 +-
 .../03-svelte-window/text.md                  |  2 +-
 .../05-svelte-body/app-a/App.svelte           |  2 +-
 .../05-svelte-body/app-b/App.svelte           |  2 +-
 .../06-svelte-head/app-b/App.svelte           |  4 +-
 .../06-svelte-head/text.md                    |  2 +-
 .../07-svelte-options/text.md                 |  2 +-
 .../19-next-steps/01-congratulations/text.md  |  6 +-
 40 files changed, 109 insertions(+), 109 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 3a25f15b12..497433a8e7 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
@@ -12,7 +12,7 @@ Because of that, getting started with it can be a little bit confusing at first.
 
 ## 1. Use the REPL
 
-The [Svelte REPL](repl) is the easiest way to begin. You can choose from a list of examples to get you started, and tweak them until they do what you want.
+The [Svelte REPL](/repl) is the easiest way to begin. You can choose from a list of examples to get you started, and tweak them until they do what you want.
 
 <aside><p>You'll need to have <a href="https://nodejs.org/">Node.js</a> installed, and know how to use the terminal</p></aside>
 
diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md
index d56c5312e8..97e020af90 100644
--- a/site/content/blog/2019-04-20-write-less-code.md
+++ b/site/content/blog/2019-04-20-write-less-code.md
@@ -159,6 +159,6 @@ In Vue, meanwhile, we have a default export with a `data` function that returns
 
 ## Death to boilerplate
 
-These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
+These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](/tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
 
-How? By choosing a different set of constraints. Because [Svelte is a compiler](blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps.
+How? By choosing a different set of constraints. Because [Svelte is a compiler](/blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps.
diff --git a/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
index 89d71caf32..c372d2a85b 100644
--- a/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
+++ b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
@@ -12,13 +12,13 @@ We think you're going to love it.
 
 ## What is Svelte?
 
-Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write *declarative* state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like [virtual DOM diffing](blog/virtual-dom-is-pure-overhead) that eat into your frame budget and tax the garbage collector.
+Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write *declarative* state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like [virtual DOM diffing](/blog/virtual-dom-is-pure-overhead) that eat into your frame budget and tax the garbage collector.
 
 Instead, Svelte runs at *build time*, converting your components into highly efficient *imperative* code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.
 
-The first version of Svelte was all about [testing a hypothesis](blog/frameworks-without-the-framework) — that a purpose-built compiler could generate rock-solid code that delivered a great user experience. The second was a small upgrade that tidied things up a bit.
+The first version of Svelte was all about [testing a hypothesis](/blog/frameworks-without-the-framework) — that a purpose-built compiler could generate rock-solid code that delivered a great user experience. The second was a small upgrade that tidied things up a bit.
 
-Version 3 is a significant overhaul. Our focus for the last five or six months has been on delivering an outstanding *developer* experience. It's now possible to write components with [significantly less boilerplate](blog/write-less-code) than you'll find elsewhere. Try the brand new [tutorial](tutorial) and see what we mean — if you're familiar with other frameworks we think you'll be pleasantly surprised.
+Version 3 is a significant overhaul. Our focus for the last five or six months has been on delivering an outstanding *developer* experience. It's now possible to write components with [significantly less boilerplate](/blog/write-less-code) than you'll find elsewhere. Try the brand new [tutorial](/tutorial) and see what we mean — if you're familiar with other frameworks we think you'll be pleasantly surprised.
 
 To make that possible we first needed to rethink the concept at the heart of modern UI frameworks: reactivity.
 
@@ -94,4 +94,4 @@ We don't take this lightly: hopefully once you've experienced Svelte 3 you'll un
 
 As grueling as this release has been, we're nowhere near finished. We have a ton of ideas for generating smarter, more compact code, and a long feature wish-list. [Sapper](https://sapper.svelte.dev), our Next.js-style app framework, is still in the middle of being updated to use Svelte 3. The [Svelte Native](https://svelte-native.technology/) community project, which allows you to write Android and iOS apps in Svelte, is making solid progress but deserves more complete support from core. We don't yet have the bounty of editor extensions, syntax highlighters, component kits, devtools and so on that other frameworks have, and we should fix that. We *really* want to add first-class TypeScript support.
 
-But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
\ No newline at end of file
+But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](/tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](/chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
diff --git a/site/content/docs/00-introduction.md b/site/content/docs/00-introduction.md
index 2ca82a8698..2fece5534f 100644
--- a/site/content/docs/00-introduction.md
+++ b/site/content/docs/00-introduction.md
@@ -4,8 +4,8 @@ title: Before we begin
 
 This page contains detailed API reference documentation. It's intended to be a resource for people who already have some familiarity with Svelte.
 
-If that's not you (yet), you may prefer to visit the [interactive tutorial](tutorial) or the [examples](examples) before consulting this reference.
+If that's not you (yet), you may prefer to visit the [interactive tutorial](/tutorial) or the [examples](/examples) before consulting this reference.
 
-Don't be shy about asking for help in the [Discord chatroom](chat).
+Don't be shy about asking for help in the [Discord chatroom](/chat).
 
-Using an older version of Svelte? Have a look at the [v2 docs](https://v2.svelte.dev).
\ No newline at end of file
+Using an older version of Svelte? Have a look at the [v2 docs](https://v2.svelte.dev).
diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index cc2673d941..d1751320c0 100644
--- a/site/content/docs/01-component-format.md
+++ b/site/content/docs/01-component-format.md
@@ -28,7 +28,7 @@ A `<script>` block contains JavaScript that runs when a component instance is cr
 
 ---
 
-Svelte uses the `export` keyword to mark a variable declaration as a *property* or *prop*, which means it becomes accessible to consumers of the component (see the section on [attributes and props](docs#template-syntax-attributes-and-props) for more information).
+Svelte uses the `export` keyword to mark a variable declaration as a *property* or *prop*, which means it becomes accessible to consumers of the component (see the section on [attributes and props](/docs#template-syntax-attributes-and-props) for more information).
 
 ```sv
 <script>
@@ -44,7 +44,7 @@ Svelte uses the `export` keyword to mark a variable declaration as a *property*
 
 You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that whenever a prop is removed by the consumer, its value is set to `undefined` rather than the initial value.
 
-In development mode (see the [compiler options](docs#compile-time-svelte-compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
+In development mode (see the [compiler options](/docs#compile-time-svelte-compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
 
 ```sv
 <script>
@@ -57,7 +57,7 @@ In development mode (see the [compiler options](docs#compile-time-svelte-compile
 
 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-element-directives-bind-element).
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs#template-syntax-element-directives-bind-element).
 
 ```sv
 <script>
@@ -109,7 +109,7 @@ Update expressions (`count += 1`) and property assignments (`obj.x = y`) have th
 
 ---
 
-Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](tutorial/updating-arrays-and-objects).
+Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](/tutorial/updating-arrays-and-objects).
 
 ```sv
 <script>
@@ -191,7 +191,7 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve
 
 ---
 
-A *store* is an object that allows reactive access to a value via a simple *store contract*. The [`svelte/store` module](docs#run-time-svelte-store) contains minimal store implementations which fulfil this contract.
+A *store* is an object that allows reactive access to a value via a simple *store contract*. The [`svelte/store` module](/docs#run-time-svelte-store) contains minimal store implementations which fulfil this contract.
 
 Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialization and unsubscribe when appropriate.
 
@@ -222,7 +222,7 @@ Local variables (that do not represent store values) must *not* have a `$` prefi
 store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
 ```
 
-You can create your own stores without relying on [`svelte/store`](docs#run-time-svelte-store), by implementing the *store contract*:
+You can create your own stores without relying on [`svelte/store`](/docs#run-time-svelte-store), by implementing the *store contract*:
 
 1. A store must contain a `.subscribe` method, which must accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes.
 2. The `.subscribe` method must return an unsubscribe function. Calling an unsubscribe function must stop its subscription, and its corresponding subscription function must not be called again by the store.
@@ -241,7 +241,7 @@ You can `export` bindings from this block, and they will become exports of the c
 
 You cannot `export default`, since the default export is the component itself.
 
-> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](docs#run-time-svelte-store).
+> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](/docs#run-time-svelte-store).
 
 ```sv
 <script context="module">
diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index ec257ad346..aeabeb7a51 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -929,7 +929,7 @@ The `transition:` directive indicates a *bidirectional* transition, which means
 {/if}
 ```
 
-> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](docs#run-time-client-side-component-api).
+> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs#run-time-client-side-component-api).
 
 ##### Transition parameters
 
@@ -1022,7 +1022,7 @@ A custom transition function can also return a `tick` function, which is called
 {/if}
 ```
 
-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.
+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 events
@@ -1148,9 +1148,9 @@ DOMRect {
 
 ---
 
-An animation is triggered when the contents of a [keyed each block](docs#template-syntax-each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an *immediate* child of a keyed each block.
+An animation is triggered when the contents of a [keyed each block](/docs#template-syntax-each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an *immediate* child of a keyed each block.
 
-Animations can be used with Svelte's [built-in animation functions](docs#run-time-svelte-animate) or [custom animation functions](docs#template-syntax-element-directives-animate-fn-custom-animation-functions).
+Animations can be used with Svelte's [built-in animation functions](/docs#run-time-svelte-animate) or [custom animation functions](/docs#template-syntax-element-directives-animate-fn-custom-animation-functions).
 
 ```sv
 <!-- When `list` is reordered the animation will run-->
@@ -1257,7 +1257,7 @@ on:eventname={handler}
 
 ---
 
-Components can emit events using [createEventDispatcher](docs#run-time-svelte-createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
+Components can emit events using [createEventDispatcher](/docs#run-time-svelte-createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
 
 ```sv
 <SomeComponent on:whatever={handler}/>
@@ -1617,7 +1617,7 @@ All except `scrollX` and `scrollY` are readonly.
 
 ---
 
-Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](docs#template-syntax-element-directives-use-action) on the `<body>` element.
+Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs#template-syntax-element-directives-use-action) on the `<body>` element.
 
 `<svelte:body>` also has to appear at the top level of your component.
 
@@ -1644,7 +1644,7 @@ As with `<svelte:window>` and `<svelte:body>`, this element has to appear at the
 
 ```sv
 <svelte:head>
-	<link rel="stylesheet" href="tutorial/dark-theme.css">
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
 </svelte:head>
 ```
 
@@ -1657,7 +1657,7 @@ As with `<svelte:window>` and `<svelte:body>`, this element has to appear at the
 
 ---
 
-The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](docs#compile-time-svelte-compile). The possible options are:
+The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs#compile-time-svelte-compile). The possible options are:
 
 * `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
 * `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
@@ -1672,7 +1672,7 @@ The `<svelte:options>` element provides a place to specify per-component compile
 
 ### `<svelte:fragment>`
 
-The `<svelte:fragment>` element allows you to place content in a [named slot](docs#template-syntax-slot-slot-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+The `<svelte:fragment>` element allows you to place content in a [named slot](/docs#template-syntax-slot-slot-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
 
 ```sv
 <!-- Widget.svelte -->
diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index 457ecd3f00..8c5e15fc9a 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -5,7 +5,7 @@ title: Run time
 
 ### `svelte`
 
-The `svelte` package exposes [lifecycle functions](tutorial/onmount) and the [context API](tutorial/context-api).
+The `svelte` package exposes [lifecycle functions](/tutorial/onmount) and the [context API](/tutorial/context-api).
 
 #### `onMount`
 
@@ -20,7 +20,7 @@ onMount(callback: () => () => void)
 
 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).
+`onMount` does not run inside a [server-side component](/docs#run-time-server-side-component-api).
 
 ```sv
 <script>
@@ -226,7 +226,7 @@ dispatch: ((name: string, detail?: any) => void) = createEventDispatcher();
 
 ---
 
-Creates an event dispatcher that can be used to dispatch [component events](docs#template-syntax-component-directives-on-component-event). Event dispatchers are functions that can take two arguments: `name` and `detail`.
+Creates an event dispatcher that can be used to dispatch [component events](/docs#template-syntax-component-directives-on-component-event). 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) and are not cancellable with `event.preventDefault()`. 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.
 
@@ -256,11 +256,11 @@ Events dispatched from child components can be listened to in their parent. Any
 
 ### `svelte/store`
 
-The `svelte/store` module exports functions for creating [readable](docs#run-time-svelte-store-readable), [writable](docs#run-time-svelte-store-writable) and [derived](docs#run-time-svelte-store-derived) stores.
+The `svelte/store` module exports functions for creating [readable](/docs#run-time-svelte-store-readable), [writable](/docs#run-time-svelte-store-writable) and [derived](/docs#run-time-svelte-store-derived) stores.
 
-Keep in mind that you don't *have* to use these functions to enjoy the [reactive `$store` syntax](docs#component-format-script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](docs#run-time-svelte-store-derived).
+Keep in mind that you don't *have* to use these functions to enjoy the [reactive `$store` syntax](/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs#run-time-svelte-store-derived).
 
-This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](docs#component-format-script-4-prefix-stores-with-$-to-access-their-values-store-contract) to see what a correct implementation looks like.
+This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values-store-contract) to see what a correct implementation looks like.
 
 #### `writable`
 
@@ -446,7 +446,7 @@ Tweened stores update their values over a fixed duration. The following options
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the tween lasts
-* `easing` (`function`, default `t => t`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `t => t`) — an [easing function](/docs#run-time-svelte-easing)
 * `interpolate` (`function`) — see below
 
 `store.set` and `store.update` can accept a second `options` argument that will override the options passed in upon instantiation.
@@ -537,11 +537,11 @@ A `spring` store gradually changes to its target value based on its `stiffness`
 
 ---
 
-As with [`tweened`](docs#run-time-svelte-motion-tweened) stores, `set` and `update` return a Promise that resolves if the spring settles. The `store.stiffness` and `store.damping` properties can be changed while the spring is in motion, and will take immediate effect.
+As with [`tweened`](/docs#run-time-svelte-motion-tweened) stores, `set` and `update` return a Promise that resolves if the spring settles. The `store.stiffness` and `store.damping` properties can be changed while the spring is in motion, and will take immediate effect.
 
 Both `set` and `update` can take a second argument — an object with `hard` or `soft` properties. `{ hard: true }` sets the target value immediately; `{ soft: n }` preserves existing momentum for `n` seconds before settling. `{ soft: true }` is equivalent to `{ soft: 0.5 }`.
 
-[See a full example on the spring tutorial.](tutorial/spring)
+[See a full example on the spring tutorial.](/tutorial/spring)
 
 ```sv
 <script>
@@ -565,7 +565,7 @@ $: $size = big ? 100 : 10;
 
 ### `svelte/transition`
 
-The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](docs#template-syntax-element-directives-transition-fn).
+The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](/docs#template-syntax-element-directives-transition-fn).
 
 #### `fade`
 
@@ -587,9 +587,9 @@ Animates the opacity of an element from 0 to the current opacity for `in` transi
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
-* `easing` (`function`, default `linear`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `linear`) — an [easing function](/docs#run-time-svelte-easing)
 
-You can see the `fade` transition in action in the [transition tutorial](tutorial/transition).
+You can see the `fade` transition in action in the [transition tutorial](/tutorial/transition).
 
 ```sv
 <script>
@@ -623,7 +623,7 @@ Animates a `blur` filter alongside an element's opacity.
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicInOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicInOut`) — an [easing function](/docs#run-time-svelte-easing)
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 * `amount` (`number`, default 5) - the size of the blur in pixels
 
@@ -659,12 +659,12 @@ Animates the x and y positions and the opacity of an element. `in` transitions a
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
 * `x` (`number`, default 0) - the x offset to animate out to and in from
 * `y` (`number`, default 0) - the y offset to animate out to and in from
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 
-You can see the `fly` transition in action in the [transition tutorial](tutorial/adding-parameters-to-transitions).
+You can see the `fly` transition in action in the [transition tutorial](/tutorial/adding-parameters-to-transitions).
 
 ```sv
 <script>
@@ -699,7 +699,7 @@ Slides an element in and out.
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
 
 ```sv
 <script>
@@ -734,7 +734,7 @@ Animates the opacity and scale of an element. `in` transitions animate from an e
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
 * `start` (`number`, default 0) - the scale value to animate out to and in from
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 
@@ -772,7 +772,7 @@ Animates the stroke of an SVG element, like a snake in a tube. `in` transitions
 * `delay` (`number`, default 0) — milliseconds before starting
 * `speed` (`number`, default undefined) - the speed of the animation, see below.
 * `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicInOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicInOut`) — an [easing function](/docs#run-time-svelte-easing)
 
 The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
 
@@ -799,7 +799,7 @@ The `speed` parameter is a means of setting the duration of the transition relat
 
 #### `crossfade`
 
-The `crossfade` function creates a pair of [transitions](docs#template-syntax-element-directives-transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+The `crossfade` function creates a pair of [transitions](/docs#template-syntax-element-directives-transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
 
 ---
 
@@ -807,8 +807,8 @@ The `crossfade` function creates a pair of [transitions](docs#template-syntax-el
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
-* `easing` (`function`, default `cubicOut`) — an [easing function](docs#run-time-svelte-easing)
-* `fallback` (`function`) — A fallback [transition](docs#template-syntax-element-directives-transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent. 
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
+* `fallback` (`function`) — A fallback [transition](/docs#template-syntax-element-directives-transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent. 
 
 ```sv
 <script>
@@ -831,7 +831,7 @@ The `crossfade` function creates a pair of [transitions](docs#template-syntax-el
 
 ### `svelte/animate`
 
-The `svelte/animate` module exports one function for use with Svelte [animations](docs#template-syntax-element-directives-animate-fn).
+The `svelte/animate` module exports one function for use with Svelte [animations](/docs#template-syntax-element-directives-animate-fn).
 
 #### `flip`
 
@@ -845,7 +845,7 @@ The `flip` function calculates the start and end position of an element and anim
 
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number` | `function`, default `d => Math.sqrt(d) * 120`) — see below
-* `easing` (`function`, default `cubicOut`) — an [easing function](docs#run-time-svelte-easing)
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
 
 
 `duration` can be provided as either:
@@ -855,7 +855,7 @@ The `flip` function calculates the start and end position of an element and anim
 
 ---
 
-You can see a full example on the [animations tutorial](tutorial/animate)
+You can see a full example on the [animations tutorial](/tutorial/animate)
 
 
 ```sv
@@ -879,7 +879,7 @@ You can see a full example on the [animations tutorial](tutorial/animate)
 
 Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`.
 
-You can explore the various eases using the [ease visualiser](examples#easing) in the [examples section](examples).
+You can explore the various eases using the [ease visualiser](/examples#easing) in the [examples section](/examples).
 
 
 | ease | in | out | inOut |
@@ -961,7 +961,7 @@ Existing children of `target` are left where they are.
 
 ---
 
-The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](docs#compile-time-svelte-compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.
+The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs#compile-time-svelte-compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.
 
 Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.
 
@@ -1045,7 +1045,7 @@ app.count += 1;
 
 ---
 
-Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](docs#template-syntax-svelte-options).
+Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](/docs#template-syntax-svelte-options).
 
 ```sv
 <svelte:options tag="my-element" />
@@ -1082,7 +1082,7 @@ document.body.innerHTML = `
 
 ---
 
-By default, custom elements are compiled with `accessors: true`, which means that any [props](docs#template-syntax-attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
+By default, custom elements are compiled with `accessors: true`, which means that any [props](/docs#template-syntax-attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
 
 To prevent this, add `accessors={false}` to `<svelte:options>`.
 
@@ -1119,7 +1119,7 @@ Unlike client-side components, server-side components don't have a lifespan afte
 
 A server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `<svelte:head>` elements encountered.
 
-You can import a Svelte component directly into Node using [`svelte/register`](docs#run-time-svelte-register).
+You can import a Svelte component directly into Node using [`svelte/register`](/docs#run-time-svelte-register).
 
 ```js
 require('svelte/register');
diff --git a/site/content/examples/03-logic/05-await-blocks/App.svelte b/site/content/examples/03-logic/05-await-blocks/App.svelte
index 8c8036c0f1..a6d0346733 100644
--- a/site/content/examples/03-logic/05-await-blocks/App.svelte
+++ b/site/content/examples/03-logic/05-await-blocks/App.svelte
@@ -2,7 +2,7 @@
 	let promise = getRandomNumber();
 
 	async function getRandomNumber() {
-		const res = await fetch(`tutorial/random-number`);
+		const res = await fetch(`/tutorial/random-number`);
 		const text = await res.text();
 
 		if (res.ok) {
@@ -27,4 +27,4 @@
 	<p>The number is {number}</p>
 {:catch error}
 	<p style="color: red">{error.message}</p>
-{/await}
\ No newline at end of file
+{/await}
diff --git a/site/content/examples/15-composition/02-named-slots/ContactCard.svelte b/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
index 87bd392afa..1068641891 100644
--- a/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
+++ b/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
@@ -41,7 +41,7 @@
 		line-height: 1.2;
 	}
 
-	.address { background-image: url(tutorial/icons/map-marker.svg) }
-	.email   { background-image: url(tutorial/icons/email.svg) }
+	.address { background-image: url(/tutorial/icons/map-marker.svg) }
+	.email   { background-image: url(/tutorial/icons/email.svg) }
 	.missing { color: #999 }
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/examples/17-special-elements/00-svelte-self/File.svelte b/site/content/examples/17-special-elements/00-svelte-self/File.svelte
index 8a0048dd68..e769ab4841 100644
--- a/site/content/examples/17-special-elements/00-svelte-self/File.svelte
+++ b/site/content/examples/17-special-elements/00-svelte-self/File.svelte
@@ -3,7 +3,7 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
 
 <style>
 	span {
@@ -11,4 +11,4 @@
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte b/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
index c65e177983..7e9f667dd2 100644
--- a/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
+++ b/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
@@ -30,14 +30,14 @@
 <style>
 	span {
 		padding: 0 0 0 1.5em;
-		background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
 	}
 
 	.expanded {
-		background-image: url(tutorial/icons/folder-open.svg);
+		background-image: url(/tutorial/icons/folder-open.svg);
 	}
 
 	ul {
diff --git a/site/content/examples/17-special-elements/04-svelte-body/App.svelte b/site/content/examples/17-special-elements/04-svelte-body/App.svelte
index d3245ab447..fddc8f8d0a 100644
--- a/site/content/examples/17-special-elements/04-svelte-body/App.svelte
+++ b/site/content/examples/17-special-elements/04-svelte-body/App.svelte
@@ -14,7 +14,7 @@
 <img
 	class:curious={hereKitty}
 	alt="Kitten wants to know what's going on"
-	src="tutorial/kitten.png"
+	src="/tutorial/kitten.png"
 >
 
 <style>
@@ -34,4 +34,4 @@
 	:global(body) {
 		overflow: hidden;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/examples/17-special-elements/05-svelte-head/App.svelte b/site/content/examples/17-special-elements/05-svelte-head/App.svelte
index 38089c9fdd..8323b56ad0 100644
--- a/site/content/examples/17-special-elements/05-svelte-head/App.svelte
+++ b/site/content/examples/17-special-elements/05-svelte-head/App.svelte
@@ -1,5 +1,5 @@
 <svelte:head>
-	<link rel="stylesheet" href="tutorial/dark-theme.css">
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
 </svelte:head>
 
-<h1>Hello world!</h1>
\ No newline at end of file
+<h1>Hello world!</h1>
diff --git a/site/content/faq/100-im-new-to-svelte.md b/site/content/faq/100-im-new-to-svelte.md
index 0f1df9cff5..cfe5eb8ec0 100644
--- a/site/content/faq/100-im-new-to-svelte.md
+++ b/site/content/faq/100-im-new-to-svelte.md
@@ -2,6 +2,6 @@
 question: I'm new to Svelte. Where should I start?
 ---
 
-We think the best way to get started is playing through the interactive [Tutorial](tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
+We think the best way to get started is playing through the interactive [Tutorial](/tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
 
-Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
\ No newline at end of file
+Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
diff --git a/site/content/tutorial/01-introduction/01-basics/text.md b/site/content/tutorial/01-introduction/01-basics/text.md
index c0fa2f48a3..08ba922b42 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](/blog/the-easiest-way-to-get-started).
 
 
 ## What is Svelte?
diff --git a/site/content/tutorial/01-introduction/07-making-an-app/text.md b/site/content/tutorial/01-introduction/07-making-an-app/text.md
index ea387120e4..3e1589cd87 100644
--- a/site/content/tutorial/01-introduction/07-making-an-app/text.md
+++ b/site/content/tutorial/01-introduction/07-making-an-app/text.md
@@ -12,9 +12,9 @@ First, you'll need to integrate Svelte with a build tool. There are officially m
 
 ...and a variety of [community-maintained ones](https://sveltesociety.dev/tools).
 
-Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](blog/svelte-for-new-developers), which walks you through the process.
+Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process.
 
-You'll also want to configure your text editor. There are [plugins](https://sveltesociety.dev/tools#editor-support) for many popular editors as well as an official [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If your editor does not have a Svelte plugin then you can follow [this guide](blog/setting-up-your-editor) to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting.
+You'll also want to configure your text editor. There are [plugins](https://sveltesociety.dev/tools#editor-support) for many popular editors as well as an official [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If your editor does not have a Svelte plugin then you can follow [this guide](/blog/setting-up-your-editor) to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting.
 
 Then, once you've got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with `new`:
 
@@ -30,4 +30,4 @@ const app = new App({
 });
 ```
 
-You can then interact with `app` using the [component API](docs#run-time-client-side-component-api) if you need to.
+You can then interact with `app` using the [component API](/docs#run-time-client-side-component-api) if you need to.
diff --git a/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
index ae2acecf8b..c473065f63 100644
--- a/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
+++ b/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
@@ -1,6 +1,6 @@
 <script>
 	async function getRandomNumber() {
-		const res = await fetch(`tutorial/random-number`);
+		const res = await fetch(`/tutorial/random-number`);
 		const text = await res.text();
 
 		if (res.ok) {
diff --git a/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
index ccb12ba4fb..a05bd884d1 100644
--- a/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
+++ b/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
@@ -1,6 +1,6 @@
 <script>
 	async function getRandomNumber() {
-		const res = await fetch(`tutorial/random-number`);
+		const res = await fetch(`/tutorial/random-number`);
 		const text = await res.text();
 
 		if (res.ok) {
diff --git a/site/content/tutorial/05-events/05-event-forwarding/text.md b/site/content/tutorial/05-events/05-event-forwarding/text.md
index b65a028f27..514b812aba 100644
--- a/site/content/tutorial/05-events/05-event-forwarding/text.md
+++ b/site/content/tutorial/05-events/05-event-forwarding/text.md
@@ -4,7 +4,7 @@ title: Event forwarding
 
 Unlike DOM events, component events don't *bubble*. If you want to listen to an event on some deeply nested component, the intermediate components must *forward* the event.
 
-In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
+In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
 
 One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
 
diff --git a/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md b/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md
index 42263e5ec1..e607100c56 100644
--- a/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md
+++ b/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md
@@ -4,7 +4,7 @@ title: Select multiple
 
 A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
 
-Returning to our [earlier ice cream example](tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
+Returning to our [earlier ice cream example](/tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
 
 ```html
 <h2>Flavours</h2>
diff --git a/site/content/tutorial/06-bindings/12-bind-this/text.md b/site/content/tutorial/06-bindings/12-bind-this/text.md
index 4784b6b13f..6602e4de76 100644
--- a/site/content/tutorial/06-bindings/12-bind-this/text.md
+++ b/site/content/tutorial/06-bindings/12-bind-this/text.md
@@ -12,4 +12,4 @@ The readonly `this` binding applies to every element (and component) and allows
 ></canvas>
 ```
 
-Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorial/onmount).
+Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/text.md b/site/content/tutorial/07-lifecycle/01-onmount/text.md
index 54b385e889..f24fce5fc2 100644
--- a/site/content/tutorial/07-lifecycle/01-onmount/text.md
+++ b/site/content/tutorial/07-lifecycle/01-onmount/text.md
@@ -4,7 +4,7 @@ title: onMount
 
 Every component has a *lifecycle* that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
 
-The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
+The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](/tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
 
 We'll add an `onMount` handler that loads some data over the network:
 
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/text.md b/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
index 27d3251c6e..fc7967f658 100644
--- a/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
@@ -13,7 +13,7 @@ const unsubscribe = count.subscribe(value => {
 ```
 > Calling a `subscribe` method returns an `unsubscribe` function.
 
-You now declared `unsubscribe`, but it still needs to be called, for example through the `onDestroy` [lifecycle hook](tutorial/ondestroy):
+You now declared `unsubscribe`, but it still needs to be called, for example through the `onDestroy` [lifecycle hook](/tutorial/ondestroy):
 
 ```html
 <script>
diff --git a/site/content/tutorial/08-stores/04-derived-stores/text.md b/site/content/tutorial/08-stores/04-derived-stores/text.md
index 43af56a087..8c2c3e2839 100644
--- a/site/content/tutorial/08-stores/04-derived-stores/text.md
+++ b/site/content/tutorial/08-stores/04-derived-stores/text.md
@@ -11,4 +11,4 @@ export const elapsed = derived(
 );
 ```
 
-> It's possible to derive a store from multiple inputs, and to explicitly `set` a value instead of returning it (which is useful for deriving values asynchronously). Consult the [API reference](docs#run-time-svelte-store-derived) for more information.
+> It's possible to derive a store from multiple inputs, and to explicitly `set` a value instead of returning it (which is useful for deriving values asynchronously). Consult the [API reference](/docs#run-time-svelte-store-derived) for more information.
diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
index b9b062302a..138d3de3b6 100644
--- a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
+++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
@@ -23,7 +23,7 @@ The function takes two arguments — the node to which the transition is applied
 
 * `delay` — milliseconds before the transition begins
 * `duration` — length of the transition in milliseconds
-* `easing` — a `p => t` easing function (see the chapter on [tweening](tutorial/tweened))
+* `easing` — a `p => t` easing function (see the chapter on [tweening](/tutorial/tweened))
 * `css` — a `(t, u) => css` function, where `u === 1 - t`
 * `tick` — a `(t, u) => {...}` function that has some effect on the node
 
diff --git a/site/content/tutorial/11-animations/01-animate/text.md b/site/content/tutorial/11-animations/01-animate/text.md
index 9a1808e259..fc09f39cad 100644
--- a/site/content/tutorial/11-animations/01-animate/text.md
+++ b/site/content/tutorial/11-animations/01-animate/text.md
@@ -2,7 +2,7 @@
 title: The animate directive
 ---
 
-In the [previous chapter](tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
+In the [previous chapter](/tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
 
 To complete the illusion, we also need to apply motion to the elements that *aren't* transitioning. For this, we use the `animate` directive.
 
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte b/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
index 4d8ba30e75..af21dbf379 100644
--- a/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
+++ b/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
@@ -42,12 +42,12 @@
 	}
 
 	.address {
-		background-image: url(tutorial/icons/map-marker.svg);
+		background-image: url(/tutorial/icons/map-marker.svg);
 	}
 	.email {
-		background-image: url(tutorial/icons/email.svg);
+		background-image: url(/tutorial/icons/email.svg);
 	}
 	.missing {
 		color: #999;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte b/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
index 0348b70c55..6f07d2aecb 100644
--- a/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
+++ b/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
@@ -42,12 +42,12 @@
 	}
 
 	.address {
-		background-image: url(tutorial/icons/map-marker.svg);
+		background-image: url(/tutorial/icons/map-marker.svg);
 	}
 	.email {
-		background-image: url(tutorial/icons/email.svg);
+		background-image: url(/tutorial/icons/email.svg);
 	}
 	.missing {
 		color: #999;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md
index dc5f2d7e8b..53695b7d69 100644
--- a/site/content/tutorial/15-context/01-context-api/text.md
+++ b/site/content/tutorial/15-context/01-context-api/text.md
@@ -19,7 +19,7 @@ setContext(key, {
 });
 ```
 
-The context object can be anything you like. Like [lifecycle functions](tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. Calling it afterwards - for example inside `onMount` - will throw an error. In this example, since `map` isn't created until the component has mounted, our context object contains a `getMap` function rather than `map` itself.
+The context object can be anything you like. Like [lifecycle functions](/tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. Calling it afterwards - for example inside `onMount` - will throw an error. In this example, since `map` isn't created until the component has mounted, our context object contains a `getMap` function rather than `map` itself.
 
 On the other side of the equation, in `MapMarker.svelte`, we can now get a reference to the Mapbox instance:
 
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
index 8a0048dd68..e769ab4841 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
@@ -3,7 +3,7 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
 
 <style>
 	span {
@@ -11,4 +11,4 @@
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
\ No newline at end of file
+</style>
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 1108b3575c..e93ffdc548 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
@@ -29,14 +29,14 @@
 <style>
 	span {
 		padding: 0 0 0 1.5em;
-		background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
 	}
 
 	.expanded {
-		background-image: url(tutorial/icons/folder-open.svg);
+		background-image: url(/tutorial/icons/folder-open.svg);
 	}
 
 	ul {
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
index 8a0048dd68..e769ab4841 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
@@ -3,7 +3,7 @@
 	$: type = name.slice(name.lastIndexOf('.') + 1);
 </script>
 
-<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
+<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
 
 <style>
 	span {
@@ -11,4 +11,4 @@
 		background: 0 0.1em no-repeat;
 		background-size: 1em 1em;
 	}
-</style>
\ No newline at end of file
+</style>
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 11049c2e52..d3fc3a431f 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
@@ -29,14 +29,14 @@
 <style>
 	span {
 		padding: 0 0 0 1.5em;
-		background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
 	}
 
 	.expanded {
-		background-image: url(tutorial/icons/folder-open.svg);
+		background-image: url(/tutorial/icons/folder-open.svg);
 	}
 
 	ul {
diff --git a/site/content/tutorial/16-special-elements/03-svelte-window/text.md b/site/content/tutorial/16-special-elements/03-svelte-window/text.md
index 3c6c71a730..ea01dd3bdf 100644
--- a/site/content/tutorial/16-special-elements/03-svelte-window/text.md
+++ b/site/content/tutorial/16-special-elements/03-svelte-window/text.md
@@ -10,4 +10,4 @@ On line 11, add the `keydown` listener:
 <svelte:window on:keydown={handleKeydown}/>
 ```
 
-> As with DOM elements, you can add [event modifiers](tutorial/event-modifiers) like `preventDefault`.
+> As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`.
diff --git a/site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte b/site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte
index d9505bb0c9..e74bcc6a4c 100644
--- a/site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte
+++ b/site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte
@@ -11,7 +11,7 @@
 <img
 	class:curious={hereKitty}
 	alt="Kitten wants to know what's going on"
-	src="tutorial/kitten.png"
+	src="/tutorial/kitten.png"
 >
 
 <style>
diff --git a/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte b/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte
index 238da2ab18..fddc8f8d0a 100644
--- a/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte
@@ -14,7 +14,7 @@
 <img
 	class:curious={hereKitty}
 	alt="Kitten wants to know what's going on"
-	src="tutorial/kitten.png"
+	src="/tutorial/kitten.png"
 >
 
 <style>
diff --git a/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte b/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte
index 38089c9fdd..8323b56ad0 100644
--- a/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte
+++ b/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte
@@ -1,5 +1,5 @@
 <svelte:head>
-	<link rel="stylesheet" href="tutorial/dark-theme.css">
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
 </svelte:head>
 
-<h1>Hello world!</h1>
\ No newline at end of file
+<h1>Hello world!</h1>
diff --git a/site/content/tutorial/16-special-elements/06-svelte-head/text.md b/site/content/tutorial/16-special-elements/06-svelte-head/text.md
index 22dcc7fdab..a7876b9cbf 100644
--- a/site/content/tutorial/16-special-elements/06-svelte-head/text.md
+++ b/site/content/tutorial/16-special-elements/06-svelte-head/text.md
@@ -6,7 +6,7 @@ The `<svelte:head>` element allows you to insert elements inside the `<head>` of
 
 ```html
 <svelte:head>
-	<link rel="stylesheet" href="tutorial/dark-theme.css">
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
 </svelte:head>
 ```
 
diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/text.md b/site/content/tutorial/16-special-elements/07-svelte-options/text.md
index c3f9f50ce0..1a0105a09a 100644
--- a/site/content/tutorial/16-special-elements/07-svelte-options/text.md
+++ b/site/content/tutorial/16-special-elements/07-svelte-options/text.md
@@ -27,4 +27,4 @@ The options that can be set here are:
 * `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
 * `tag="..."` — the name to use when compiling this component as a custom element
 
-Consult the [API reference](docs) for more information on these options.
+Consult the [API reference](/docs) for more information on these options.
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 558cf6bda6..6905d80c20 100644
--- a/site/content/tutorial/19-next-steps/01-congratulations/text.md
+++ b/site/content/tutorial/19-next-steps/01-congratulations/text.md
@@ -2,10 +2,10 @@
 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).
+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](/blog/the-easiest-way-to-get-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).
 
-Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
+Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](/chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.

From 7db797eb1bb316583f1f9bdaac91c7dc8ea6883c Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Fri, 24 Dec 2021 21:37:36 +0700
Subject: [PATCH 03/66] [docs] absolute assets links (#7049)

---
 site/content/blog/2017-09-06-the-zen-of-just-writing-css.md | 2 +-
 .../content/blog/2018-12-27-virtual-dom-is-pure-overhead.md | 2 +-
 site/content/blog/2020-07-17-svelte-and-typescript.md       | 2 +-
 site/content/examples/05-bindings/11-bind-this/App.svelte   | 6 +++---
 .../tutorial/06-bindings/12-bind-this/app-a/App.svelte      | 4 ++--
 .../tutorial/06-bindings/12-bind-this/app-b/App.svelte      | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md b/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md
index a467ac3d7f..2bf3a2e8a5 100644
--- a/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md
+++ b/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md
@@ -28,7 +28,7 @@ The consequence of all this is the **append-only stylesheet**. There's no way of
 The idea behind SFCs is simple: you write your components in an HTML file that (optionally) contains a `<style>` and `<script>` attribute describing the component's styles and behaviour. Svelte, Ractive, Vue and Polymer all follow this basic pattern.
 
 <aside>
-	<p><a href="blog/frameworks-without-the-framework">Read the introductory blog post</a> if you're new to Svelte. Or <a href="https://twitter.com/padolsey/status/899717303234908160">read</a> <a href="https://twitter.com/sveltejs/status/901818357644701696">the</a> <a href="https://twitter.com/sveltejs/status/901818106309476352">testimonials</a>.</p>
+	<p><a href="/blog/frameworks-without-the-framework">Read the introductory blog post</a> if you're new to Svelte. Or <a href="https://twitter.com/padolsey/status/899717303234908160">read</a> <a href="https://twitter.com/sveltejs/status/901818357644701696">the</a> <a href="https://twitter.com/sveltejs/status/901818106309476352">testimonials</a>.</p>
 </aside>
 
 (For the rest of this article we'll be using Svelte, obviously. But if the idea of using a template language makes you shudder — your fears are misplaced, but that's a topic for another day — then just use Vue which lets you use JSX in your SFCs.)
diff --git a/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md b/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md
index d71652fe8d..199ae2aa66 100644
--- a/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md
+++ b/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md
@@ -47,7 +47,7 @@ Misunderstood claims about virtual DOM performance date back to the launch of Re
 > This is actually extremely fast, primarily because most DOM operations tend to be slow. There's been a lot of performance work on the DOM, but most DOM operations tend to drop frames.
 
 <figure>
-	<img alt="Pete Hunt at JSConfEU 2013" src="media/rethinking-best-practices.jpg">
+	<img alt="Pete Hunt at JSConfEU 2013" src="/media/rethinking-best-practices.jpg">
 	<figcaption>Screenshot from <a href="https://www.youtube.com/watch?v=x7cQ3mrcKaY">Rethinking Best Practices</a> at JSConfEU 2013</figcaption>
 </figure>
 
diff --git a/site/content/blog/2020-07-17-svelte-and-typescript.md b/site/content/blog/2020-07-17-svelte-and-typescript.md
index 16b3f7f260..aaedd6da96 100644
--- a/site/content/blog/2020-07-17-svelte-and-typescript.md
+++ b/site/content/blog/2020-07-17-svelte-and-typescript.md
@@ -10,7 +10,7 @@ It's been by far the most requested feature for a while, and it's finally here:
 We think it'll give you a much nicer development experience — one that also scales beautifully to larger Svelte code bases — regardless of whether you use TypeScript or JavaScript.
 
 <figure>
-	<img alt="Screenshot of TypeScript in Svelte" src="media/svelte-ts.png">
+	<img alt="Screenshot of TypeScript in Svelte" src="/media/svelte-ts.png">
 	<figcaption>Image of TypeScript + Svelte in VS Code (theme is <a href="https://marketplace.visualstudio.com/items?itemName=karyfoundation.theme-karyfoundation-themes">Kary Pro</a>.)</figcaption>
 </figure>
 
diff --git a/site/content/examples/05-bindings/11-bind-this/App.svelte b/site/content/examples/05-bindings/11-bind-this/App.svelte
index 8612e8f5e3..ddf37a9be3 100644
--- a/site/content/examples/05-bindings/11-bind-this/App.svelte
+++ b/site/content/examples/05-bindings/11-bind-this/App.svelte
@@ -49,7 +49,7 @@
 		width: 100%;
 		height: 100%;
 		background-color: #666;
-		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
-		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
+		-webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
+		mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte b/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
index cf08455942..9c30979ace 100644
--- a/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
@@ -46,7 +46,7 @@
 		width: 100%;
 		height: 100%;
 		background-color: #666;
-		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
-		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
+		-webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
+		mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
 	}
 </style>
diff --git a/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte b/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
index 0e53c533ac..5714f3149a 100644
--- a/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
@@ -47,7 +47,7 @@
 		width: 100%;
 		height: 100%;
 		background-color: #666;
-		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
-		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
+		-webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
+		mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
 	}
 </style>

From c183bae3d107cdc0a646ecae493d2ba044b009fb Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 24 Dec 2021 22:47:32 +0100
Subject: [PATCH 04/66] [chore] adjust stale bot actions per run

Only one action per hour to not flood the issue tracker with too many stale messages at once
---
 .github/stale.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/stale.yml b/.github/stale.yml
index 3bc3fa6b99..c95bc4cf22 100644
--- a/.github/stale.yml
+++ b/.github/stale.yml
@@ -28,7 +28,7 @@ staleLabel: stale-bot
 #   Your comment here.
 
 # Limit the number of actions per hour, from 1-30. Default is 30
-limitPerRun: 30
+limitPerRun: 1
 
 # Optionally, specify configuration settings that are specific to just 'issues' or 'pulls':
 pulls:

From f73dc07980f027d4ce2486f386b1f1dcd51e5be8 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Sat, 25 Dec 2021 09:31:09 +0700
Subject: [PATCH 05/66] [docs] absolute sibling links (#7051)

---
 .../content/blog/2017-08-07-the-easiest-way-to-get-started.md | 2 +-
 .../2017-12-31-sapper-towards-the-ideal-web-app-framework.md  | 4 ++--
 2 files changed, 3 insertions(+), 3 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 497433a8e7..72d9d8895b 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
@@ -52,7 +52,7 @@ npm run dev
 
 This will create a new project in the `my-svelte-project` directory, install its dependencies, and start a server on http://localhost:5000.
 
-You can find more information about using TypeScript [here](blog/svelte-and-typescript).
+You can find more information about using TypeScript [here](/blog/svelte-and-typescript).
 
 Once you've tinkered a bit and understood how everything fits together, you can fork [sveltejs/template](https://github.com/sveltejs/template) and start doing this instead:
 
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 a79042c63f..42ed7012b9 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
@@ -38,7 +38,7 @@ We can do better!
 
 ## The compiler-as-framework paradigm shift
 
-[Svelte introduced a radical idea](blog/frameworks-without-the-framework): what if your UI framework wasn't a framework at all, but a compiler that turned your components into standalone JavaScript modules? Instead of using a library like React or Vue, which knows nothing about your app and must therefore be a one-size-fits-all solution, we can ship highly-optimised vanilla JavaScript. Just the code your app needs, and without the memory and performance overhead of solutions based on a virtual DOM.
+[Svelte introduced a radical idea](/blog/frameworks-without-the-framework): what if your UI framework wasn't a framework at all, but a compiler that turned your components into standalone JavaScript modules? Instead of using a library like React or Vue, which knows nothing about your app and must therefore be a one-size-fits-all solution, we can ship highly-optimised vanilla JavaScript. Just the code your app needs, and without the memory and performance overhead of solutions based on a virtual DOM.
 
 The JavaScript world is [moving towards this model](https://tomdale.net/2017/09/compilers-are-the-new-frameworks/). [Stencil](https://stenciljs.com), a Svelte-inspired framework from the Ionic team, compiles to web components. [Glimmer](https://glimmerjs.com) *doesn't* compile to standalone JavaScript (the pros and cons of which deserve a separate blog post), but the team is doing some fascinating research around compiling templates to bytecode. (React is [getting in on the action](https://twitter.com/trueadm/status/944908776896978946), though their current research focuses on optimising your JSX app code, which is arguably more similar to the ahead-of-time optimisations that Angular, Ractive and Vue have been doing for a few years.)
 
@@ -66,7 +66,7 @@ But size is only part of the story. Svelte apps are also extremely performant an
 
 The biggest drawback for many developers evaluating Sapper would be 'but I like React, and I already know how to use it', which is fair.
 
-If you're in that camp, I'd invite you to at least try alternative frameworks. You might be pleasantly surprised! The [Sapper RealWorld](https://github.com/sveltejs/realworld) implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you're able to express concepts very concisely using Svelte's template syntax (which [takes all of five minutes to master](https://v2.svelte.dev/guide#template-syntax)). You get [scoped CSS](blog/the-zen-of-just-writing-css), with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it's just string concatenation. And we recently introduced [svelte/store](https://v2.svelte.dev/guide#state-management), a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you'll end up feeling vindicated!
+If you're in that camp, I'd invite you to at least try alternative frameworks. You might be pleasantly surprised! The [Sapper RealWorld](https://github.com/sveltejs/realworld) implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you're able to express concepts very concisely using Svelte's template syntax (which [takes all of five minutes to master](https://v2.svelte.dev/guide#template-syntax)). You get [scoped CSS](/blog/the-zen-of-just-writing-css), with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it's just string concatenation. And we recently introduced [svelte/store](https://v2.svelte.dev/guide#state-management), a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you'll end up feeling vindicated!
 
 But there are trade-offs nonetheless. Some people have a pathological aversion to any form of 'template language', and maybe that applies to you. JSX proponents will clobber you with the 'it's just JavaScript' mantra, and therein lies React's greatest strength, which is that it is infinitely flexible. That flexibility comes with its own set of trade-offs, but we're not here to discuss those.
 

From 84669b5a6c085a2528725684995581721a0d2687 Mon Sep 17 00:00:00 2001
From: Tyler Smith <tylerlwsmith@gmail.com>
Date: Sun, 26 Dec 2021 20:23:12 -0800
Subject: [PATCH 06/66] [docs] Updated link to the ease visualizer in the docs
 (#7054)

---
 site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md | 2 +-
 site/content/docs/03-run-time.md                               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 d009d37391..45a03444c7 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
@@ -10,7 +10,7 @@ Lots to cover this month with releases from across the Svelte ecosystem. Most im
 Let's dive into the news 🐬
 
 ## What's new in `sveltejs/svelte`
-* SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples#custom-stores) and [Server-side component API ](https://svelte.dev/docs#run-time-server-side-component-api))
+* SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples/custom-stores) and [Server-side component API ](https://svelte.dev/docs#run-time-server-side-component-api))
 * Multiple instances of the same action are now allowed on an element (**3.32.0**, [example](https://svelte.dev/repl/01a14375951749dab9579cb6860eccde?version=3.32.0))
 * The new `foreign` namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (**3.32.0**, [more info](https://github.com/sveltejs/svelte/pull/5652))
 * Support for inline comment sourcemaps in code from preprocessors (**3.32.0**)
diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index 8c5e15fc9a..c4a8b76e65 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -879,7 +879,7 @@ You can see a full example on the [animations tutorial](/tutorial/animate)
 
 Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`.
 
-You can explore the various eases using the [ease visualiser](/examples#easing) in the [examples section](/examples).
+You can explore the various eases using the [ease visualiser](/examples/easing) in the [examples section](/examples).
 
 
 | ease | in | out | inOut |

From 6f2ebaa76dca1e146389f2d682a54cadfa06e21d Mon Sep 17 00:00:00 2001
From: Enrico Spinielli <enrico.spinielli@gmail.com>
Date: Mon, 27 Dec 2021 19:40:47 +0100
Subject: [PATCH 07/66] [docs] use proper symbol for Celsius and Fahrenheit
 (#7061)

---
 .../examples/20-7guis/02-7guis-temperature/App.svelte       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/content/examples/20-7guis/02-7guis-temperature/App.svelte b/site/content/examples/20-7guis/02-7guis-temperature/App.svelte
index fce279ed76..a98a5fd06c 100644
--- a/site/content/examples/20-7guis/02-7guis-temperature/App.svelte
+++ b/site/content/examples/20-7guis/02-7guis-temperature/App.svelte
@@ -14,11 +14,11 @@
 </script>
 
 <!-- https://eugenkiss.github.io/7guis/tasks/#temp -->
-<input value={c} on:input="{e => setBothFromC(e.target.value)}" type=number> °c =
-<input value={f} on:input="{e => setBothFromF(e.target.value)}" type=number> °f
+<input value={c} on:input="{e => setBothFromC(e.target.value)}" type=number> °C =
+<input value={f} on:input="{e => setBothFromF(e.target.value)}" type=number> °F
 
 <style>
 	input {
 		width: 5em;
 	}
-</style>
\ No newline at end of file
+</style>

From 72d40e99b0337ff2ec0369b4c75a30acb3aa1e95 Mon Sep 17 00:00:00 2001
From: Maxi Ferreira <charca@gmail.com>
Date: Mon, 27 Dec 2021 22:03:36 -0800
Subject: [PATCH 08/66] [docs] fix typo in Context API tutorial (#7063)

---
 site/content/tutorial/15-context/01-context-api/text.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md
index 53695b7d69..efb6157652 100644
--- a/site/content/tutorial/15-context/01-context-api/text.md
+++ b/site/content/tutorial/15-context/01-context-api/text.md
@@ -11,7 +11,7 @@ There are two halves to the context API — `setContext` and `getContext`. If a
 Let's set the context first. In `Map.svelte`, import `setContext` from `svelte` and `key` from `mapbox.js` and call `setContext`:
 
 ```js
-import { onMount, setContext } from 'svelte';
+import { onDestroy, setContext } from 'svelte';
 import { mapbox, key } from './mapbox.js';
 
 setContext(key, {

From 99a04c464d07cd87e2ebd878a1ef629bc27b2a4c Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Tue, 28 Dec 2021 13:17:44 +0700
Subject: [PATCH 09/66] [docs] mention tweened duration as function

Resolves #3353
---
 site/content/docs/03-run-time.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index c4a8b76e65..54228f5c2a 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -445,7 +445,7 @@ store = tweened(value: any, options)
 Tweened stores update their values over a fixed duration. The following options are available:
 
 * `delay` (`number`, default 0) — milliseconds before starting
-* `duration` (`number`, default 400) — milliseconds the tween lasts
+* `duration` (`number` | `function`, default 400) — milliseconds the tween lasts
 * `easing` (`function`, default `t => t`) — an [easing function](/docs#run-time-svelte-easing)
 * `interpolate` (`function`) — see below
 

From a4963d7c0e7c23a682b22b194966fd05bc9d52c3 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 30 Dec 2021 16:10:46 +0100
Subject: [PATCH 10/66] [chore] delete stale bot yaml config

The stale bot was removed so there's no use for having the config anymore
---
 .github/stale.yml | 52 -----------------------------------------------
 1 file changed, 52 deletions(-)
 delete mode 100644 .github/stale.yml

diff --git a/.github/stale.yml b/.github/stale.yml
deleted file mode 100644
index c95bc4cf22..0000000000
--- a/.github/stale.yml
+++ /dev/null
@@ -1,52 +0,0 @@
-# Configuration for probot-stale - https://github.com/probot/stale
-
-# Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled)
-onlyLabels: []
-
-# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
-exemptLabels:
-  - popular
-  - pinned
-  - security
-  - bug
-  - "[Status] Maybe Later"
-
-# Set to true to ignore issues in a project (defaults to false)
-exemptProjects: false
-
-# Set to true to ignore issues in a milestone (defaults to false)
-exemptMilestones: false
-
-# Set to true to ignore issues with an assignee (defaults to false)
-exemptAssignees: false
-
-# Label to use when marking as stale
-staleLabel: stale-bot
-
-# Comment to post when removing the stale label.
-# unmarkComment: >
-#   Your comment here.
-
-# Limit the number of actions per hour, from 1-30. Default is 30
-limitPerRun: 1
-
-# Optionally, specify configuration settings that are specific to just 'issues' or 'pulls':
-pulls:
-  daysUntilStale: 210
-  daysUntilClose: 25
-  markComment: >
-    This pull request has been automatically marked as stale because it has not had
-    recent activity. It will be closed if no further activity occurs. Thank you
-    for your contributions.
-  closeComment: >
-    This pull request has been closed as it was previously marked as stale and saw no subsequent activity.
-
-issues:
-  daysUntilStale: 180
-  daysUntilClose: 14
-  markComment: >
-    This issue has been automatically marked as stale because it has not had
-    recent activity. It will be closed if no further activity occurs. Thank you
-    for your contributions.
-  closeComment: >
-    This issue has been closed as it was previously marked as stale and saw no subsequent activity.

From ca2aedfb6c2d5f8eab07cac9ab31f14f043e209e Mon Sep 17 00:00:00 2001
From: Daniel Sandoval <dani@chippercash.com>
Date: Sat, 1 Jan 2022 04:47:02 -1000
Subject: [PATCH 11/66] [docs] "What's new in Svelte" January newsletter
 (#7074)

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

diff --git a/site/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md b/site/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md
new file mode 100644
index 0000000000..bf7bc3df57
--- /dev/null
+++ b/site/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md
@@ -0,0 +1,77 @@
+---
+title: "What's new in Svelte: January 2022"
+description: "Faster builds with SvelteKit and a much anticipated REPL feature"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Happy new year, Svelte Community! Lots to share this month across Svelte, SvelteKit, Language Tools and the Showcase. Thanks to everyone who made 2021 a great year to use Svelte. Looking forward to the next one 🚀
+
+## What's new in SvelteKit
+- `@sveltejs/adapter-static` for SvelteKit now has a `precompress` option to make brotli compression of assets and pages easier to do out of the box ([#3079](https://github.com/sveltejs/kit/pull/3079))
+- Concurrency mode in SvelteKit will now prerender pages in parallel ([#3120](https://github.com/sveltejs/kit/pull/3120)). It is enabled by default in `1.0.0-next.205` and later
+- CSS is now automatically included before JS for improved page performance ([d13efe](https://github.com/sveltejs/kit/commit/d138efe21692f5925f1e89afc0a33f42d6a1a711))
+- A new config option adds the ability to disable service worker registration to do your own custom registration ([#2988](https://github.com/sveltejs/kit/pull/2988))
+- SSR route-splitting is here - breaking monolithic builds into smaller pieces for improved startup and routing performance ([#2931](https://github.com/sveltejs/kit/pull/2931))
+- `request.origin/path/query` is now `request.url` - simplifying the config and page `load` functions ([#3126](https://github.com/sveltejs/kit/pull/3126))
+- After the [update to Vite 2.7](https://github.com/sveltejs/kit/pull/3018), SvelteKit users are [reporting significant performance improvements](https://www.reddit.com/r/sveltejs/comments/rljhfc/sveltekit_massive_compiler_improvement_by/) and loading third-parties libraries in SSR has also been greatly improved
+- SvelteKit server will now automatically restart when the config files is changed ([vite-plugin-svelte#237](https://github.com/sveltejs/vite-plugin-svelte/pull/237))
+
+
+## Other new bits from `svelte/*`
+- [Svelte 3.44.3](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3443) is out with a few bug fixes in the binding and loop code
+- Svelte Language Tools has introduced support for the then/catch shorthands from Svelte 3.41 and TypeScript's "go to" functionality ([105.8.0 and later](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.8.0))
+- The Svelte REPL got a nice upgrade as well - letting you delete saved REPLs. Try it out by logging in at [svelte.dev/apps](https://svelte.dev/apps)
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [Discover Twitter Spaces](https://github.com/navneetsharmaui/discover-twitter-spaces) is a tool that helps you find the Twitter Spaces
+- [Modern Fluid Typography Editor](https://github.com/codeAdrian/modern-fluid-typography-editor) helps create beautiful fluid typography using CSS clamp
+- [Unnwhiteboard](https://github.com/AviKKi/unnwhiteboard) is a job board for companies (or teams) that don't do "whiteboard" interviews
+- [Secret Santa](https://gitlab.com/arturoguzman/secret-santa-sveltekit) is a gift giving coordination app developed with easiness in mind
+- [LogSnag](https://logsnag.com/) notifies you of your projects' events and provides you with a timeline to keep track of anything important that happens
+- [Version 0.2 of Tangent](http://tangentnotes.com/Download), a Svelte-based note writing app, is now in beta
+- [Intl Explorer](https://github.com/jesperorb/intl-explorer) is a tool for viewing output for all possible formatters for Intl
+
+A lot of work this month has gone into migrating the Svelte main website and Svelte REPL to live in the https://github.com/sveltejs/sites repository - including a brand new homepage for [svelte.dev](https://svelte.dev/). Thanks to all the contributors who made this possible!
+
+If you're looking for a fun SvelteKit project to work on, [you can contribute to the Svelte Society site rewrite](https://github.com/svelte-society/sveltesociety-2021/issues) 💅
+
+
+**Learning and Listening**
+
+_To Read_
+- [Mutating Query Params in SvelteKit Without Page Reloads or Navigations](https://dev.to/mohamadharith/mutating-query-params-in-sveltekit-without-page-reloads-or-navigations-2i2b) by Mohamad Harith
+- [Svelte for Reactaholics : A guide for React developers](https://www.100ms.live/blog/svelte-guide-for-react-developers) by Puru Vijay
+- [Svelte's lifecycle methods can be used anywhere](https://geoffrich.net/posts/svelte-lifecycle-examples/) and [The many meanings of $ in Svelte](https://geoffrich.net/posts/svelte-$-meanings/) by Geoff Rich
+- [Vercel and Svelte: A Perfect Match for Web Developers](https://thenewstack.io/vercel-and-svelte-a-perfect-match-for-web-developers/) by Darryl K. Taft
+- [User-defined TailwindCSS Color Scheme with Svelte Stores](https://blog.dayslice.io/user-defined-tailwindcss-color-scheme-with-svelte-stores-ad80ca2cf038) by jeremy zaborowski
+- [Ionic 6 + Svelte 🚀](https://medium.com/@raymondboswel/ionic-6-svelte-ae904caa82df) by Raymond Boswel
+- [What happened in #Svelte language tools this year](https://twitter.com/dummdidumm_/status/1474158105395179525?t=ytj2K2Q52iD5-lNyLnQaAQ&s=19) by Simon H
+
+_To Watch_
+- [The Future of Svelte (Interview with Rich Harris)](https://www.youtube.com/watch?v=uQntFkK8Z54) by Lee Robinson, Director of Developer Relations at Vercel
+- [Svelte is becoming the go-to framework](https://www.youtube.com/watch?v=fo6BKY2xR2w&t=1834s) for Obsidian plugin developers
+- [Sveltekit WordPress Headless Blog](https://www.youtube.com/watch?v=c0UDVgjPxFw) by WebJeda
+- [Getting started with SvelteKit](https://www.youtube.com/watch?v=i2suPKMPUFA) by Lihau Tan
+- [Deploy a full-stack SvelteKit app on Cloudflare Pages](https://www.youtube.com/watch?v=Wc1_U6Dy5Tw) by 1nf
+
+_To Listen To_
+- [Syntax podcast: How To Do Things In Svelte](https://podcasts.apple.com/ca/podcast/how-to-do-things-in-svelte/id1253186678?i=1000544796072)
+- [JS Party #205: So much Sveltey goodness (w/ Rich Harris)](https://changelog.com/jsparty/205)
+
+**Libraries, Tools & Components**
+- [svelte-headlessui](https://github.com/rgossiaux/svelte-headlessui) is an unofficial, complete Svelte port of the Headless UI component library
+- [svelte-forms v2](https://chainlist.github.io/svelte-forms/) has been released - the author is [looking for feedback](https://www.reddit.com/r/sveltejs/comments/r6354j/svelteforms_v2_has_been_released/)
+- [Percival](https://github.com/ekzhang/percival) is a declarative data query and visualization language
+- [Svelte FlatList](https://github.com/snuffyDev/svelte-flatlist) is a mobile-friendly, simple, and customizable draggable menu
+- [svelte-keyed](https://github.com/bryanmylee/svelte-keyed) is a writable derived store for objects and arrays
+- [Svemix](https://github.com/svemix/svemix) is Remix for Svelte - providing server scripts inside your Svelte components/routes, which will be transformed into endpoints
+
+Want to add something to the showcase? Need help bringing your next idea to life in Svelte? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs).
+
+See ya next month!

From 9221f216c6af7531c6f32671cd84d4f7eebb0003 Mon Sep 17 00:00:00 2001
From: Gabriel Francisco <gabrinelson27@gmail.com>
Date: Sun, 2 Jan 2022 17:47:24 -0300
Subject: [PATCH 12/66] Update license year (#7091)

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

diff --git a/LICENSE.md b/LICENSE.md
index cbf510847f..cd8f94f4ca 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,4 +1,4 @@
-Copyright (c) 2016-21 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
+Copyright (c) 2016-22 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

From 84a4ef07c97cd70f92ec58fbb310719db0f48f42 Mon Sep 17 00:00:00 2001
From: James Bradbury <me@jamesbradbury.net>
Date: Mon, 3 Jan 2022 10:33:08 +0000
Subject: [PATCH 13/66] [feat] add a11y-no-redundant-roles check (#7067)

Part of #820
Closes #5361

Co-authored-by: mhatvan <markus_hatvan@aon.at>
---
 src/compiler/compile/compiler_warnings.ts     |   4 +
 src/compiler/compile/nodes/Element.ts         |  73 ++
 .../a11y-no-redundant-roles/input.svelte      |  44 ++
 .../a11y-no-redundant-roles/warnings.json     | 632 ++++++++++++++++++
 4 files changed, 753 insertions(+)
 create mode 100644 test/validator/samples/a11y-no-redundant-roles/input.svelte
 create mode 100644 test/validator/samples/a11y-no-redundant-roles/warnings.json

diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index bfcd779fc7..86ec98cb8b 100644
--- a/src/compiler/compile/compiler_warnings.ts
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -76,6 +76,10 @@ export default {
 		code: 'a11y-unknown-role',
 		message: `A11y: Unknown role '${role}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')
 	}),
+	a11y_no_redundant_roles: (role: string | boolean) => ({
+		code: 'a11y-no-redundant-roles',
+		message: `A11y: Redundant role '${role}'`
+	}),
 	a11y_accesskey: {
 		code: 'a11y-accesskey',
 		message: 'A11y: Avoid using accesskey'
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 837a0296d0..bf81599bf6 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -70,6 +70,46 @@ const a11y_labelable = new Set([
 	'textarea'
 ]);
 
+const a11y_nested_implicit_semantics = new Map([
+	['header', 'banner'],
+	['footer', 'contentinfo']
+]);
+
+const a11y_implicit_semantics = new Map([
+	['a', 'link'],
+	['aside', 'complementary'],
+	['body', 'document'],
+	['datalist', 'listbox'],
+	['dd', 'definition'],
+	['dfn', 'term'],
+	['details', 'group'],
+	['dt', 'term'],
+	['fieldset', 'group'],
+	['form', 'form'],
+	['h1', 'heading'],
+	['h2', 'heading'],
+	['h3', 'heading'],
+	['h4', 'heading'],
+	['h5', 'heading'],
+	['h6', 'heading'],
+	['hr', 'separator'],
+	['li', 'listitem'],
+	['menu', 'list'],
+	['nav', 'navigation'],
+	['ol', 'list'],
+	['optgroup', 'group'],
+	['output', 'status'],
+	['progress', 'progressbar'],
+	['section', 'region'],
+	['summary', 'button'],
+	['tbody', 'rowgroup'],
+	['textarea', 'textbox'],
+	['tfoot', 'rowgroup'],
+	['thead', 'rowgroup'],
+	['tr', 'row'],
+	['ul', 'list']
+]);
+
 const invisible_elements = new Set(['meta', 'html', 'script', 'style']);
 
 const valid_modifiers = new Set([
@@ -98,6 +138,23 @@ const react_attributes = new Map([
 
 const attributes_to_compact_whitespace = ['class', 'style'];
 
+function is_parent(parent: INode, elements: string[]) {
+	let check = false;
+
+	while (parent) {
+		const parent_name = (parent as Element).name;
+		if (elements.includes(parent_name)) {
+			check = true;
+			break;
+		}
+		if (parent.type === 'Element') {
+			break;
+		}
+		parent = parent.parent;
+	}
+	return check;
+}
+
 function get_namespace(parent: Element, element: Element, explicit_namespace: string) {
 	const parent_element = parent.find_nearest(/^Element/);
 
@@ -351,6 +408,22 @@ export default class Element extends Node {
 					const match = fuzzymatch(value, aria_roles);
 					component.warn(attribute, compiler_warnings.a11y_unknown_role(value, match));
 				}
+
+				// no-redundant-roles
+				const has_redundant_role = value === a11y_implicit_semantics.get(this.name);
+
+				if (this.name === value || has_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 = value === a11y_nested_implicit_semantics.get(this.name);
+					if (has_nested_redundant_role) {
+						component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(value));
+					}
+				}
 			}
 
 			// no-access-key
diff --git a/test/validator/samples/a11y-no-redundant-roles/input.svelte b/test/validator/samples/a11y-no-redundant-roles/input.svelte
new file mode 100644
index 0000000000..05525effb6
--- /dev/null
+++ b/test/validator/samples/a11y-no-redundant-roles/input.svelte
@@ -0,0 +1,44 @@
+<a href="/" role="link">a link</a>
+<article role="article" />
+<aside role="complementary" />
+<body role="document" />
+<button role="button" />
+<datalist role="listbox" />
+<dd role="definition" />
+<dfn role="term" />
+<details role="group" />
+<dialog role="dialog" />
+<dt role="term" />
+<fieldset role="group" />
+<figure role="figure" />
+<form role="form">foo</form>
+<h1 role="heading">heading</h1>
+<h2 role="heading">heading</h2>
+<h3 role="heading">heading</h3>
+<h4 role="heading">heading</h4>
+<h5 role="heading">heading</h5>
+<h6 role="heading">heading</h6>
+<hr role="separator" />
+<li role="listitem" />
+<link role="link" />
+<main role="main"></main>
+<menu role="list" />
+<nav role="navigation" />
+<ol role="list" />
+<optgroup role="group" />
+<option role="option" />
+<output role="status" />
+<progress role="progressbar" />
+<section role="region" />
+<summary role="button" />
+<table role="table" />
+<tbody role="rowgroup" />
+<textarea role="textbox" />
+<tfoot role="rowgroup" />
+<thead role="rowgroup" />
+<tr role="row" />
+<ul role="list" />
+
+<!-- Tested header/footer not nested in section/article -->
+<header role="banner"></header>
+<footer role="contentinfo"></footer>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-no-redundant-roles/warnings.json b/test/validator/samples/a11y-no-redundant-roles/warnings.json
new file mode 100644
index 0000000000..8aa3520b32
--- /dev/null
+++ b/test/validator/samples/a11y-no-redundant-roles/warnings.json
@@ -0,0 +1,632 @@
+[
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 23,
+            "column": 23,
+            "line": 1
+        },
+        "message": "A11y: Redundant role 'link'",
+        "pos": 12,
+        "start": {
+            "character": 12,
+            "column": 12,
+            "line": 1
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 58,
+            "column": 23,
+            "line": 2
+        },
+        "message": "A11y: Redundant role 'article'",
+        "pos": 44,
+        "start": {
+            "character": 44,
+            "column": 9,
+            "line": 2
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 89,
+            "column": 27,
+            "line": 3
+        },
+        "message": "A11y: Redundant role 'complementary'",
+        "pos": 69,
+        "start": {
+            "character": 69,
+            "column": 7,
+            "line": 3
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 114,
+            "column": 21,
+            "line": 4
+        },
+        "message": "A11y: Redundant role 'document'",
+        "pos": 99,
+        "start": {
+            "character": 99,
+            "column": 6,
+            "line": 4
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 139,
+            "column": 21,
+            "line": 5
+        },
+        "message": "A11y: Redundant role 'button'",
+        "pos": 126,
+        "start": {
+            "character": 126,
+            "column": 8,
+            "line": 5
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 167,
+            "column": 24,
+            "line": 6
+        },
+        "message": "A11y: Redundant role 'listbox'",
+        "pos": 153,
+        "start": {
+            "character": 153,
+            "column": 10,
+            "line": 6
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 192,
+            "column": 21,
+            "line": 7
+        },
+        "message": "A11y: Redundant role 'definition'",
+        "pos": 175,
+        "start": {
+            "character": 175,
+            "column": 4,
+            "line": 7
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 212,
+            "column": 16,
+            "line": 8
+        },
+        "message": "A11y: Redundant role 'term'",
+        "pos": 201,
+        "start": {
+            "character": 201,
+            "column": 5,
+            "line": 8
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 237,
+            "column": 21,
+            "line": 9
+        },
+        "message": "A11y: Redundant role 'group'",
+        "pos": 225,
+        "start": {
+            "character": 225,
+            "column": 9,
+            "line": 9
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 262,
+            "column": 21,
+            "line": 10
+        },
+        "message": "A11y: Redundant role 'dialog'",
+        "pos": 249,
+        "start": {
+            "character": 249,
+            "column": 8,
+            "line": 10
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 281,
+            "column": 15,
+            "line": 11
+        },
+        "message": "A11y: Redundant role 'term'",
+        "pos": 270,
+        "start": {
+            "character": 270,
+            "column": 4,
+            "line": 11
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 307,
+            "column": 22,
+            "line": 12
+        },
+        "message": "A11y: Redundant role 'group'",
+        "pos": 295,
+        "start": {
+            "character": 295,
+            "column": 10,
+            "line": 12
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 332,
+            "column": 21,
+            "line": 13
+        },
+        "message": "A11y: Redundant role 'figure'",
+        "pos": 319,
+        "start": {
+            "character": 319,
+            "column": 8,
+            "line": 13
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 353,
+            "column": 17,
+            "line": 14
+        },
+        "message": "A11y: Redundant role 'form'",
+        "pos": 342,
+        "start": {
+            "character": 342,
+            "column": 6,
+            "line": 14
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 383,
+            "column": 18,
+            "line": 15
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 369,
+        "start": {
+            "character": 369,
+            "column": 4,
+            "line": 15
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 415,
+            "column": 18,
+            "line": 16
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 401,
+        "start": {
+            "character": 401,
+            "column": 4,
+            "line": 16
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 447,
+            "column": 18,
+            "line": 17
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 433,
+        "start": {
+            "character": 433,
+            "column": 4,
+            "line": 17
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 479,
+            "column": 18,
+            "line": 18
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 465,
+        "start": {
+            "character": 465,
+            "column": 4,
+            "line": 18
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 511,
+            "column": 18,
+            "line": 19
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 497,
+        "start": {
+            "character": 497,
+            "column": 4,
+            "line": 19
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 543,
+            "column": 18,
+            "line": 20
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 529,
+        "start": {
+            "character": 529,
+            "column": 4,
+            "line": 20
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 577,
+            "column": 20,
+            "line": 21
+        },
+        "message": "A11y: Redundant role 'separator'",
+        "pos": 561,
+        "start": {
+            "character": 561,
+            "column": 4,
+            "line": 21
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 600,
+            "column": 19,
+            "line": 22
+        },
+        "message": "A11y: Redundant role 'listitem'",
+        "pos": 585,
+        "start": {
+            "character": 585,
+            "column": 4,
+            "line": 22
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 621,
+            "column": 17,
+            "line": 23
+        },
+        "message": "A11y: Redundant role 'link'",
+        "pos": 610,
+        "start": {
+            "character": 610,
+            "column": 6,
+            "line": 23
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 642,
+            "column": 17,
+            "line": 24
+        },
+        "message": "A11y: Redundant role 'main'",
+        "pos": 631,
+        "start": {
+            "character": 631,
+            "column": 6,
+            "line": 24
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 668,
+            "column": 17,
+            "line": 25
+        },
+        "message": "A11y: Redundant role 'list'",
+        "pos": 657,
+        "start": {
+            "character": 657,
+            "column": 6,
+            "line": 25
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 694,
+            "column": 22,
+            "line": 26
+        },
+        "message": "A11y: Redundant role 'navigation'",
+        "pos": 677,
+        "start": {
+            "character": 677,
+            "column": 5,
+            "line": 26
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 713,
+            "column": 15,
+            "line": 27
+        },
+        "message": "A11y: Redundant role 'list'",
+        "pos": 702,
+        "start": {
+            "character": 702,
+            "column": 4,
+            "line": 27
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 739,
+            "column": 22,
+            "line": 28
+        },
+        "message": "A11y: Redundant role 'group'",
+        "pos": 727,
+        "start": {
+            "character": 727,
+            "column": 10,
+            "line": 28
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 764,
+            "column": 21,
+            "line": 29
+        },
+        "message": "A11y: Redundant role 'option'",
+        "pos": 751,
+        "start": {
+            "character": 751,
+            "column": 8,
+            "line": 29
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 789,
+            "column": 21,
+            "line": 30
+        },
+        "message": "A11y: Redundant role 'status'",
+        "pos": 776,
+        "start": {
+            "character": 776,
+            "column": 8,
+            "line": 30
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 821,
+            "column": 28,
+            "line": 31
+        },
+        "message": "A11y: Redundant role 'progressbar'",
+        "pos": 803,
+        "start": {
+            "character": 803,
+            "column": 10,
+            "line": 31
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 847,
+            "column": 22,
+            "line": 32
+        },
+        "message": "A11y: Redundant role 'region'",
+        "pos": 834,
+        "start": {
+            "character": 834,
+            "column": 9,
+            "line": 32
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 873,
+            "column": 22,
+            "line": 33
+        },
+        "message": "A11y: Redundant role 'button'",
+        "pos": 860,
+        "start": {
+            "character": 860,
+            "column": 9,
+            "line": 33
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 896,
+            "column": 19,
+            "line": 34
+        },
+        "message": "A11y: Redundant role 'table'",
+        "pos": 884,
+        "start": {
+            "character": 884,
+            "column": 7,
+            "line": 34
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 922,
+            "column": 22,
+            "line": 35
+        },
+        "message": "A11y: Redundant role 'rowgroup'",
+        "pos": 907,
+        "start": {
+            "character": 907,
+            "column": 7,
+            "line": 35
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 950,
+            "column": 24,
+            "line": 36
+        },
+        "message": "A11y: Redundant role 'textbox'",
+        "pos": 936,
+        "start": {
+            "character": 936,
+            "column": 10,
+            "line": 36
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 976,
+            "column": 22,
+            "line": 37
+        },
+        "message": "A11y: Redundant role 'rowgroup'",
+        "pos": 961,
+        "start": {
+            "character": 961,
+            "column": 7,
+            "line": 37
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 1002,
+            "column": 22,
+            "line": 38
+        },
+        "message": "A11y: Redundant role 'rowgroup'",
+        "pos": 987,
+        "start": {
+            "character": 987,
+            "column": 7,
+            "line": 38
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 1020,
+            "column": 14,
+            "line": 39
+        },
+        "message": "A11y: Redundant role 'row'",
+        "pos": 1010,
+        "start": {
+            "character": 1010,
+            "column": 4,
+            "line": 39
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 1039,
+            "column": 15,
+            "line": 40
+        },
+        "message": "A11y: Redundant role 'list'",
+        "pos": 1028,
+        "start": {
+            "character": 1028,
+            "column": 4,
+            "line": 40
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 1125,
+            "column": 21,
+            "line": 43
+        },
+        "message": "A11y: Redundant role 'banner'",
+        "pos": 1112,
+        "start": {
+            "character": 1112,
+            "column": 8,
+            "line": 43
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 1162,
+            "column": 26,
+            "line": 44
+        },
+        "message": "A11y: Redundant role 'contentinfo'",
+        "pos": 1144,
+        "start": {
+            "character": 1144,
+            "column": 8,
+            "line": 44
+        }
+    }
+]
\ No newline at end of file

From 897a21087cb9add684eec8f6125bb9f929c78aa4 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 3 Jan 2022 11:36:56 +0100
Subject: [PATCH 14/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ffb41e35b..4081405811 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Add `a11y-no-redundant-roles` warning ([#7067](https://github.com/sveltejs/svelte/pull/7067))
+
 ## 3.44.3
 
 * Fix `bind:this` binding inside `onMount` for manually instantiated component ([#6760](https://github.com/sveltejs/svelte/issues/6760))

From eb663d5caef45edfa618826a83a931c49dcad4e7 Mon Sep 17 00:00:00 2001
From: Yongwook Choi <hyperflow@kakao.com>
Date: Tue, 4 Jan 2022 16:14:42 +0900
Subject: [PATCH 15/66] [docs] force externalize chatroom link (#7097)

---
 site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md | 2 +-
 site/content/docs/00-introduction.md                           | 2 +-
 site/content/tutorial/19-next-steps/01-congratulations/text.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
index c372d2a85b..672fe1b777 100644
--- a/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
+++ b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
@@ -94,4 +94,4 @@ We don't take this lightly: hopefully once you've experienced Svelte 3 you'll un
 
 As grueling as this release has been, we're nowhere near finished. We have a ton of ideas for generating smarter, more compact code, and a long feature wish-list. [Sapper](https://sapper.svelte.dev), our Next.js-style app framework, is still in the middle of being updated to use Svelte 3. The [Svelte Native](https://svelte-native.technology/) community project, which allows you to write Android and iOS apps in Svelte, is making solid progress but deserves more complete support from core. We don't yet have the bounty of editor extensions, syntax highlighters, component kits, devtools and so on that other frameworks have, and we should fix that. We *really* want to add first-class TypeScript support.
 
-But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](/tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](/chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
+But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](/tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](https://svelte.dev/chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
diff --git a/site/content/docs/00-introduction.md b/site/content/docs/00-introduction.md
index 2fece5534f..11f82117e9 100644
--- a/site/content/docs/00-introduction.md
+++ b/site/content/docs/00-introduction.md
@@ -6,6 +6,6 @@ This page contains detailed API reference documentation. It's intended to be a r
 
 If that's not you (yet), you may prefer to visit the [interactive tutorial](/tutorial) or the [examples](/examples) before consulting this reference.
 
-Don't be shy about asking for help in the [Discord chatroom](/chat).
+Don't be shy about asking for help in the [Discord chatroom](https://svelte.dev/chat).
 
 Using an older version of Svelte? Have a look at the [v2 docs](https://v2.svelte.dev).
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 6905d80c20..5b8256463e 100644
--- a/site/content/tutorial/19-next-steps/01-congratulations/text.md
+++ b/site/content/tutorial/19-next-steps/01-congratulations/text.md
@@ -8,4 +8,4 @@ To get set up in your local development environment, check out [the quickstart g
 
 If you're looking for a more expansive framework that includes routing, server-side rendering and everything else, take a look at [SvelteKit](https://kit.svelte.dev).
 
-Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](/chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
+Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](https://svelte.dev/chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.

From 6bfd2724a056cd88e5519e5b916b02a6d6a1154a Mon Sep 17 00:00:00 2001
From: Austin Walela <austinmasibo@gmail.com>
Date: Tue, 4 Jan 2022 19:10:34 +0300
Subject: [PATCH 16/66] [docs] update links to Blender Studio (#7098)

---
 site/content/examples/05-bindings/09-media-elements/App.svelte  | 2 +-
 .../tutorial/06-bindings/10-media-elements/app-a/App.svelte     | 2 +-
 .../tutorial/06-bindings/10-media-elements/app-b/App.svelte     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/content/examples/05-bindings/09-media-elements/App.svelte b/site/content/examples/05-bindings/09-media-elements/App.svelte
index b4c5907f6d..de89b1be8d 100644
--- a/site/content/examples/05-bindings/09-media-elements/App.svelte
+++ b/site/content/examples/05-bindings/09-media-elements/App.svelte
@@ -50,7 +50,7 @@
 </script>
 
 <h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
 
 <div>
 	<video
diff --git a/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte b/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
index 0b3b4f0881..33d6e3f6eb 100644
--- a/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
@@ -50,7 +50,7 @@
 </script>
 
 <h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
 
 <div>
 	<video
diff --git a/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte b/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
index e6a0635a12..8048f7e133 100644
--- a/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
@@ -50,7 +50,7 @@
 </script>
 
 <h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://cloud.blender.org/open-projects">Blender Open Projects</a>. CC-BY</p>
+<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
 
 <div>
 	<video

From 2012124e87304a8ebd288a7522f6e57d252b7e94 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Wed, 5 Jan 2022 04:41:42 +0700
Subject: [PATCH 17/66] [fix] foreign namespace hash link (#7080)

---
 src/compiler/utils/namespaces.ts                           | 2 +-
 test/js/samples/src-attribute-check-in-foreign/expected.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/compiler/utils/namespaces.ts b/src/compiler/utils/namespaces.ts
index 01d9bd60b3..7da64afc8c 100644
--- a/src/compiler/utils/namespaces.ts
+++ b/src/compiler/utils/namespaces.ts
@@ -1,6 +1,6 @@
 // The `foreign` namespace covers all DOM implementations that aren't HTML5.
 // It opts out of HTML5-specific a11y checks and case-insensitive attribute names.
-export const foreign = 'https://svelte.dev/docs#svelte_options';
+export const foreign = 'https://svelte.dev/docs#template-syntax-svelte-options';
 export const html = 'http://www.w3.org/1999/xhtml';
 export const mathml = 'http://www.w3.org/1998/Math/MathML';
 export const svg = 'http://www.w3.org/2000/svg';
diff --git a/test/js/samples/src-attribute-check-in-foreign/expected.js b/test/js/samples/src-attribute-check-in-foreign/expected.js
index 3d781b72d4..2eb4c0713c 100644
--- a/test/js/samples/src-attribute-check-in-foreign/expected.js
+++ b/test/js/samples/src-attribute-check-in-foreign/expected.js
@@ -18,8 +18,8 @@ function create_fragment(ctx) {
 
 	return {
 		c() {
-			svg = document.createElementNS("https://svelte.dev/docs#svelte_options", "svg");
-			img = document.createElementNS("https://svelte.dev/docs#svelte_options", "img");
+			svg = document.createElementNS("https://svelte.dev/docs#template-syntax-svelte-options", "svg");
+			img = document.createElementNS("https://svelte.dev/docs#template-syntax-svelte-options", "img");
 			this.h();
 		},
 		l(nodes) {

From 966c03a317ceab6b015e5f1fcd946cb5d5ad7678 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Thu, 6 Jan 2022 03:30:02 +0900
Subject: [PATCH 18/66] [chore] fix test flakiness (#7076)

---
 package.json                        |  4 +--
 test/custom-elements/index.ts       | 40 ++++++++++------------
 test/helpers.ts                     | 51 +++++++++++++++++++++++++++--
 test/runtime-puppeteer/index.ts     | 46 +++++++++++++-------------
 test/runtime/index.ts               |  8 +++--
 test/server-side-rendering/index.ts | 25 +++++++-------
 6 files changed, 109 insertions(+), 65 deletions(-)

diff --git a/package.json b/package.json
index ee6c781860..233772b8a2 100644
--- a/package.json
+++ b/package.json
@@ -83,8 +83,8 @@
   },
   "types": "types/runtime/index.d.ts",
   "scripts": {
-    "test": "mocha",
-    "test:unit": "mocha --require sucrase/register --recursive src/**/__test__.ts",
+    "test": "mocha --exit",
+    "test:unit": "mocha --require sucrase/register --recursive src/**/__test__.ts --exit",
     "quicktest": "mocha",
     "precoverage": "c8 mocha",
     "coverage": "c8 report --reporter=text-lcov > coverage.lcov && c8 report --reporter=html",
diff --git a/test/custom-elements/index.ts b/test/custom-elements/index.ts
index 35df156879..42b27eebd3 100644
--- a/test/custom-elements/index.ts
+++ b/test/custom-elements/index.ts
@@ -4,7 +4,7 @@ import * as http from 'http';
 import { rollup } from 'rollup';
 import virtual from '@rollup/plugin-virtual';
 import puppeteer from 'puppeteer';
-import { addLineNumbers, loadConfig, loadSvelte } from '../helpers';
+import { addLineNumbers, loadConfig, loadSvelte, retryAsync, executeBrowserTest } from '../helpers';
 import { deepEqual } from 'assert';
 
 const page = `
@@ -17,8 +17,8 @@ const page = `
 const assert = fs.readFileSync(`${__dirname}/assert.js`, 'utf-8');
 
 describe('custom-elements', function() {
+	// Note: Increase the timeout in preparation for restarting Chromium due to SIGSEGV.
 	this.timeout(10000);
-
 	let svelte;
 	let server;
 	let browser;
@@ -44,12 +44,16 @@ describe('custom-elements', function() {
 		});
 	}
 
+	async function launchPuppeteer() {
+		return await retryAsync(() => puppeteer.launch());
+	}
+
 	before(async () => {
 		svelte = loadSvelte();
 		console.log('[custom-element] Loaded Svelte');
 		server = await create_server();
 		console.log('[custom-element] Started server');
-		browser = await puppeteer.launch();
+		browser = await launchPuppeteer();
 		console.log('[custom-element] Launched puppeteer browser');
 	});
 
@@ -108,26 +112,7 @@ describe('custom-elements', function() {
 			const result = await bundle.generate({ format: 'iife', name: 'test' });
 			code = result.output[0].code;
 
-			const page = await browser.newPage();
-
-			page.on('console', (type) => {
-				console[type._type](type._text);
-			});
-
-			page.on('error', error => {
-				console.log('>>> an error happened');
-				console.error(error);
-			});
-
-			try {
-				await page.goto('http://localhost:6789');
-
-				const result = await page.evaluate(() => test(document.querySelector('main')));
-				if (result) console.log(result);
-			} catch (err) {
-				console.log(addLineNumbers(code));
-				throw err;
-			} finally {
+			function assertWarnings() {
 				if (expected_warnings) {
 					deepEqual(warnings.map(w => ({
 						code: w.code,
@@ -138,6 +123,15 @@ describe('custom-elements', function() {
 					})), expected_warnings);
 				}
 			}
+
+			browser = await executeBrowserTest(
+				browser,
+				launchPuppeteer,
+				assertWarnings,
+				() => {
+					console.log(addLineNumbers(code));
+					assertWarnings();
+				});
 		});
 	});
 });
diff --git a/test/helpers.ts b/test/helpers.ts
index 101490d4dc..1ea0b19880 100644
--- a/test/helpers.ts
+++ b/test/helpers.ts
@@ -8,7 +8,7 @@ export const assert = (assert$1 as unknown) as typeof assert$1 & { htmlEqual: (a
 
 // for coverage purposes, we need to test source files,
 // but for sanity purposes, we need to test dist files
-export function loadSvelte(test) {
+export function loadSvelte(test: boolean = false) {
 	process.env.TEST = test ? 'true' : '';
 
 	const resolved = require.resolve('../compiler.js');
@@ -55,7 +55,7 @@ export function cleanRequireCache() {
 const virtualConsole = new jsdom.VirtualConsole();
 virtualConsole.sendTo(console);
 
-const window = new jsdom.JSDOM('<main></main>', {virtualConsole}).window;
+const window = new jsdom.JSDOM('<main></main>', { virtualConsole }).window;
 global.document = window.document;
 global.navigator = window.navigator;
 global.getComputedStyle = window.getComputedStyle;
@@ -279,3 +279,50 @@ export function prettyPrintPuppeteerAssertionError(message) {
 		assert.equal(match[1], match[2]);
 	}
 }
+
+export async function retryAsync<T>(fn: () => Promise<T>, maxAttempts: number = 3, interval: number = 1000): Promise<T> {
+	let attempts = 0;
+	while (attempts <= maxAttempts) {
+		try {
+			return await fn();
+		} catch (err) {
+			if (++attempts >= maxAttempts) throw err;
+			await new Promise(resolve => setTimeout(resolve, interval));
+		}
+	}
+}
+
+// NOTE: Chromium may exit with SIGSEGV, so retry in that case
+export async function executeBrowserTest<T>(browser, launchPuppeteer: () => Promise<T>, additionalAssertion: () => void, onError: (err: Error) => void) {
+	let count = 0;
+	do {
+		count++;
+		try {
+			const page = await browser.newPage();
+
+			page.on('console', (type) => {
+				console[type._type](type._text);
+			});
+
+			page.on('error', error => {
+				console.log('>>> an error happened');
+				console.error(error);
+			});
+			await page.goto('http://localhost:6789');
+			const result = await page.evaluate(() => test(document.querySelector('main')));
+			if (result) console.log(result);
+			additionalAssertion();
+			await page.close();
+			break;
+		} catch (err) {
+			if (count === 5 || browser.isConnected()) {
+				onError(err);
+				throw err;
+			}
+			console.debug(err.stack || err);
+			console.log('RESTARTING Chromium...');
+			browser = await launchPuppeteer();
+		}
+	} while (count <= 5);
+	return browser;
+}
diff --git a/test/runtime-puppeteer/index.ts b/test/runtime-puppeteer/index.ts
index b700d47945..8e6f813de4 100644
--- a/test/runtime-puppeteer/index.ts
+++ b/test/runtime-puppeteer/index.ts
@@ -9,7 +9,9 @@ import {
 	loadConfig,
 	loadSvelte,
 	mkdirp,
-	prettyPrintPuppeteerAssertionError
+	prettyPrintPuppeteerAssertionError,
+	retryAsync,
+	executeBrowserTest
 } from '../helpers';
 import { deepEqual } from 'assert';
 
@@ -48,15 +50,21 @@ function create_server() {
 	});
 }
 
+async function launchPuppeteer() {
+	return await retryAsync(() => puppeteer.launch());
+}
+
 const assert = fs.readFileSync(`${__dirname}/assert.js`, 'utf-8');
 
-describe('runtime (puppeteer)', () => {
+describe('runtime (puppeteer)', function() {
+	// Note: Increase the timeout in preparation for restarting Chromium due to SIGSEGV.
+	this.timeout(10000);
 	before(async () => {
 		svelte = loadSvelte(false);
 		console.log('[runtime-puppeteer] Loaded Svelte');
 		server = await create_server();
 		console.log('[runtime-puppeteer] Started server');
-		browser = await puppeteer.launch();
+		browser = await launchPuppeteer();
 		console.log('[runtime-puppeteer] Launched puppeteer browser');
 	});
 
@@ -205,27 +213,7 @@ describe('runtime (puppeteer)', () => {
 			const result = await bundle.generate({ format: 'iife', name: 'test' });
 			code = result.output[0].code;
 
-			const page = await browser.newPage();
-
-			page.on('console', (type) => {
-				console[type._type](type._text);
-			});
-
-			page.on('error', error => {
-				console.log('>>> an error happened');
-				console.error(error);
-			});
-
-			try {
-				await page.goto('http://localhost:6789');
-
-				const result = await page.evaluate(() => test(document.querySelector('main')));
-				if (result) console.log(result);
-			} catch (err) {
-				failed.add(dir);
-				prettyPrintPuppeteerAssertionError(err.message);
-				throw err;
-			} finally {
+			function assertWarnings() {
 				if (config.warnings) {
 					deepEqual(warnings.map(w => ({
 						code: w.code,
@@ -240,6 +228,16 @@ describe('runtime (puppeteer)', () => {
 					throw new Error('Received unexpected warnings');
 				}
 			}
+
+			browser = await executeBrowserTest(
+				browser,
+				launchPuppeteer,
+				assertWarnings,
+				(err) => {
+					failed.add(dir);
+					prettyPrintPuppeteerAssertionError(err.message);
+					assertWarnings();
+				});
 		});
 	}
 
diff --git a/test/runtime/index.ts b/test/runtime/index.ts
index e777196ae2..4fc3880208 100644
--- a/test/runtime/index.ts
+++ b/test/runtime/index.ts
@@ -65,7 +65,7 @@ describe('runtime', () => {
 		}
 
 		const testName = `${dir} ${hydrate ? `(with hydration${from_ssr_html ? ' from ssr rendered html' : ''})` : ''}`;
-		(config.skip ? it.skip : solo ? it.only : it)(testName, () => {
+		(config.skip ? it.skip : solo ? it.only : it)(testName, (done) => {
 			if (failed.has(dir)) {
 				// this makes debugging easier, by only printing compiled output once
 				throw new Error('skipping test, already failed');
@@ -96,7 +96,7 @@ describe('runtime', () => {
 			glob('**/*.svelte', { cwd }).forEach(file => {
 				if (file[0] === '_') return;
 
-				const dir  = `${cwd}/_output/${hydrate ? 'hydratable' : 'normal'}`;
+				const dir = `${cwd}/_output/${hydrate ? 'hydratable' : 'normal'}`;
 				const out = `${dir}/${file.replace(/\.svelte$/, '.js')}`;
 
 				if (fs.existsSync(out)) {
@@ -120,7 +120,7 @@ describe('runtime', () => {
 				}
 			});
 
-			return Promise.resolve()
+			Promise.resolve()
 				.then(() => {
 					// hack to support transition tests
 					clear_loops();
@@ -245,6 +245,7 @@ describe('runtime', () => {
 				.catch(err => {
 					// print a clickable link to open the directory
 					err.stack += `\n\ncmd-click: ${path.relative(process.cwd(), cwd)}/main.svelte`;
+					done();
 					throw err;
 				})
 				.then(() => {
@@ -255,6 +256,7 @@ describe('runtime', () => {
 					flush();
 
 					if (config.after_test) config.after_test();
+					done();
 				});
 		});
 	}
diff --git a/test/server-side-rendering/index.ts b/test/server-side-rendering/index.ts
index cc3f20d637..f4175c73a6 100644
--- a/test/server-side-rendering/index.ts
+++ b/test/server-side-rendering/index.ts
@@ -52,21 +52,23 @@ describe('ssr', () => {
 			throw new Error('Forgot to remove `solo: true` from test');
 		}
 
-		(solo ? it.only : it)(dir, () => {
-			dir = path.resolve(`${__dirname}/samples`, dir);
+		(solo ? it.only : it)(dir, (done) => {
 
-			cleanRequireCache();
+			try {
 
-			const compileOptions = {
-				sveltePath,
-				...config.compileOptions,
-				generate: 'ssr',
-				format: 'cjs'
-			};
+				dir = path.resolve(`${__dirname}/samples`, dir);
 
-			require('../../register')(compileOptions);
+				cleanRequireCache();
+
+				const compileOptions = {
+					sveltePath,
+					...config.compileOptions,
+					generate: 'ssr',
+					format: 'cjs'
+				};
+
+				require('../../register')(compileOptions);
 
-			try {
 				const Component = require(`${dir}/main.svelte`).default;
 
 				const expectedHtml = tryToReadFile(`${dir}/_expected.html`);
@@ -132,6 +134,7 @@ describe('ssr', () => {
 				throw err;
 			} finally {
 				set_current_component(null);
+				done();
 			}
 		});
 	});

From 4240455e02f38a22f82a4b6e117b59af1b181e0c Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Thu, 6 Jan 2022 15:14:09 +0000
Subject: [PATCH 19/66] [fix] ensure truthy non-boolean attributes are rendered
 correctly in SSR (#7066)

---
 CHANGELOG.md                                            | 1 +
 src/runtime/internal/ssr.ts                             | 2 +-
 test/runtime/samples/attribute-boolean-true/_config.js  | 3 ++-
 test/runtime/samples/attribute-boolean-true/main.svelte | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4081405811..dbf2c6fac2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Fix non-boolean attribute rendering in SSR to render truthy values as-is ([#6121](https://github.com/sveltejs/svelte/issues/6121))
 * Add `a11y-no-redundant-roles` warning ([#7067](https://github.com/sveltejs/svelte/pull/7067))
 
 ## 3.44.3
diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts
index fd72aa1548..4d91857ad4 100644
--- a/src/runtime/internal/ssr.ts
+++ b/src/runtime/internal/ssr.ts
@@ -141,7 +141,7 @@ export function create_ssr_component(fn) {
 
 export function add_attribute(name, value, boolean) {
 	if (value == null || (boolean && !value)) return '';
-	return ` ${name}${value === true ? '' : `=${typeof value === 'string' ? JSON.stringify(escape(value)) : `"${value}"`}`}`;
+	return ` ${name}${value === true && boolean_attributes.has(name) ? '' : `=${typeof value === 'string' ? JSON.stringify(escape(value)) : `"${value}"`}`}`;
 }
 
 export function add_classes(classes) {
diff --git a/test/runtime/samples/attribute-boolean-true/_config.js b/test/runtime/samples/attribute-boolean-true/_config.js
index 79c8ea1ad6..89b2fc7c21 100644
--- a/test/runtime/samples/attribute-boolean-true/_config.js
+++ b/test/runtime/samples/attribute-boolean-true/_config.js
@@ -1,7 +1,8 @@
 export default {
-	html: '<textarea readonly></textarea>',
+	html: '<textarea readonly data-attr="true"></textarea>',
 	test({ assert, target }) {
 		const textarea = target.querySelector('textarea');
+		assert.equal(textarea.dataset.attr, 'true');
 		assert.ok(textarea.readOnly);
 	}
 };
diff --git a/test/runtime/samples/attribute-boolean-true/main.svelte b/test/runtime/samples/attribute-boolean-true/main.svelte
index 04d5cab8f9..6474644749 100644
--- a/test/runtime/samples/attribute-boolean-true/main.svelte
+++ b/test/runtime/samples/attribute-boolean-true/main.svelte
@@ -1 +1 @@
-<textarea readonly="{true}"></textarea>
\ No newline at end of file
+<textarea readonly={true} data-attr={true} />

From 2f0f330b769141028c0d0c61984dce2878dcb789 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 7 Jan 2022 00:07:37 +0800
Subject: [PATCH 20/66] [fix] {:else if} value incorrectly cached (#7043)

---
 .../compile/render_dom/wrappers/IfBlock.ts    | 25 +++++-----
 .../samples/if-block-else-update/_config.js   | 46 +++++++++++++++++++
 .../samples/if-block-else-update/main.svelte  | 21 +++++++++
 3 files changed, 79 insertions(+), 13 deletions(-)
 create mode 100644 test/runtime/samples/if-block-else-update/_config.js
 create mode 100644 test/runtime/samples/if-block-else-update/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
index b3bbf9becd..01d49ac9dd 100644
--- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
@@ -266,15 +266,15 @@ export default class IfBlockWrapper extends Wrapper {
 		if (this.needs_update) {
 			block.chunks.init.push(b`
 				function ${select_block_type}(#ctx, #dirty) {
-					${this.branches.map(({ dependencies, condition, snippet, block }) => condition
+					${this.branches.map(({ dependencies, condition, snippet }) => {
+						return b`${snippet && dependencies.length > 0 ? b`if (${block.renderer.dirty(dependencies)}) ${condition} = null;` : null}`;
+					})}
+					${this.branches.map(({ condition, snippet, block }) => condition
 					? b`
-					${snippet && (
-						dependencies.length > 0
-							? b`if (${condition} == null || ${block.renderer.dirty(dependencies)}) ${condition} = !!${snippet}`
-							: b`if (${condition} == null) ${condition} = !!${snippet}`
+						${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`}
+						if (${condition}) return ${block.name};`
+					: b`return ${block.name};`
 					)}
-					if (${condition}) return ${block.name};`
-					: b`return ${block.name};`)}
 				}
 			`);
 		} else {
@@ -387,13 +387,12 @@ export default class IfBlockWrapper extends Wrapper {
 			${this.needs_update
 				? b`
 					function ${select_block_type}(#ctx, #dirty) {
-						${this.branches.map(({ dependencies, condition, snippet }, i) => condition
+						${this.branches.map(({ dependencies, condition, snippet }) => {
+							return b`${snippet && dependencies.length > 0 ? b`if (${block.renderer.dirty(dependencies)}) ${condition} = null;` : null}`;
+						})}
+						${this.branches.map(({ condition, snippet }, i) => condition
 						? b`
-						${snippet && (
-							dependencies.length > 0
-								? b`if (${condition} == null || ${block.renderer.dirty(dependencies)}) ${condition} = !!${snippet}`
-								: b`if (${condition} == null) ${condition} = !!${snippet}`
-						)}
+						${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`}
 						if (${condition}) return ${i};`
 						: b`return ${i};`)}
 						${!has_else && b`return -1;`}
diff --git a/test/runtime/samples/if-block-else-update/_config.js b/test/runtime/samples/if-block-else-update/_config.js
new file mode 100644
index 0000000000..db35ca8488
--- /dev/null
+++ b/test/runtime/samples/if-block-else-update/_config.js
@@ -0,0 +1,46 @@
+export default {
+	async test({ assert, component, target, window }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+	
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn2.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: false, bar: true
+			<hr>
+			bar!
+		`);
+
+		await btn1.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: true, bar: true
+			<hr>
+			foo!
+		`);
+		
+		await btn2.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: true, bar: false
+			<hr>
+			foo!
+		`);
+		
+		await btn1.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: false, bar: false
+			<hr>
+		`);
+	}
+};
diff --git a/test/runtime/samples/if-block-else-update/main.svelte b/test/runtime/samples/if-block-else-update/main.svelte
new file mode 100644
index 0000000000..258d0422ba
--- /dev/null
+++ b/test/runtime/samples/if-block-else-update/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let foo = false
+	let bar = [false];
+</script>
+
+<button on:click={() => foo = !foo}>
+	Toggle foo
+</button>
+<button on:click={() => bar[0] = !bar[0]}>
+	Toggle bar
+</button>
+
+<hr>
+{@html `foo: ${foo}, bar: ${bar.every(x => x)}`}
+<hr>
+
+{#if foo}
+	foo!
+{:else if bar.every(x => x)}
+	bar!
+{/if}
\ No newline at end of file

From 3f577d0bccb55a87000add509f88b96d6c23d5d2 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 6 Jan 2022 11:08:07 -0500
Subject: [PATCH 21/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dbf2c6fac2..1cabd2ca1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Fix non-boolean attribute rendering in SSR to render truthy values as-is ([#6121](https://github.com/sveltejs/svelte/issues/6121))
+* Fix `{:else if}` value incorrectly being cached ([#7043](https://github.com/sveltejs/svelte/pull/7043))
 * Add `a11y-no-redundant-roles` warning ([#7067](https://github.com/sveltejs/svelte/pull/7067))
 
 ## 3.44.3

From fb419d2fda541ce1985ea20f0e1493403a22cd9d Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 6 Jan 2022 14:27:09 -0500
Subject: [PATCH 22/66] [fix] code generation with arrow functions and object
 destructuring assignments (#7110)

---
 CHANGELOG.md      |  1 +
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1cabd2ca1b..2051efe3c0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * Fix non-boolean attribute rendering in SSR to render truthy values as-is ([#6121](https://github.com/sveltejs/svelte/issues/6121))
 * Fix `{:else if}` value incorrectly being cached ([#7043](https://github.com/sveltejs/svelte/pull/7043))
 * Add `a11y-no-redundant-roles` warning ([#7067](https://github.com/sveltejs/svelte/pull/7067))
+* Fix code generation error with arrow functions whose bodies are object destructuring assignments ([#7087](https://github.com/sveltejs/svelte/issues/7087))
 
 ## 3.44.3
 
diff --git a/package-lock.json b/package-lock.json
index 0aeed9166d..4ef6760cf8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "acorn": "^8.4.1",
         "agadoo": "^1.1.0",
         "c8": "^5.0.1",
-        "code-red": "^0.2.3",
+        "code-red": "^0.2.4",
         "codecov": "^3.5.0",
         "css-tree": "^1.1.2",
         "eslint": "^7.32.0",
@@ -1082,9 +1082,9 @@
       }
     },
     "node_modules/code-red": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.2.3.tgz",
-      "integrity": "sha512-l9MRiYO9iNx3dCpoZBZkaHAVtbhig8TBddEHq7ssWcZRAjaYR8NoRFzZ56VJ20TIg7hEQegCVCH3fVus+2Ol4Q==",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.2.4.tgz",
+      "integrity": "sha512-tAJQiZviSyB2KUhz+rocKFzCHPkVooX2aFrdpfWDRvxWJaBQTYFJ/Z2TcWqbjXj5oJJBlqd2GxBXdtAhOXySVQ==",
       "dev": true,
       "dependencies": {
         "@types/estree": "^0.0.50",
@@ -6376,9 +6376,9 @@
       }
     },
     "code-red": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.2.3.tgz",
-      "integrity": "sha512-l9MRiYO9iNx3dCpoZBZkaHAVtbhig8TBddEHq7ssWcZRAjaYR8NoRFzZ56VJ20TIg7hEQegCVCH3fVus+2Ol4Q==",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.2.4.tgz",
+      "integrity": "sha512-tAJQiZviSyB2KUhz+rocKFzCHPkVooX2aFrdpfWDRvxWJaBQTYFJ/Z2TcWqbjXj5oJJBlqd2GxBXdtAhOXySVQ==",
       "dev": true,
       "requires": {
         "@types/estree": "^0.0.50",
diff --git a/package.json b/package.json
index 233772b8a2..d3a50be73a 100644
--- a/package.json
+++ b/package.json
@@ -132,7 +132,7 @@
     "acorn": "^8.4.1",
     "agadoo": "^1.1.0",
     "c8": "^5.0.1",
-    "code-red": "^0.2.3",
+    "code-red": "^0.2.4",
     "codecov": "^3.5.0",
     "css-tree": "^1.1.2",
     "eslint": "^7.32.0",

From 9f2b5afdf777b2144d7e48feb3b264ed16b6d8de Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 7 Jan 2022 04:28:53 +0800
Subject: [PATCH 23/66] [fix] binding member expression should only invalidate
 the object, not the member property (#7008)

---
 .../render_dom/wrappers/Element/Binding.ts    | 24 +++++++++++++++++++
 .../render_dom/wrappers/Element/index.ts      |  2 +-
 .../render_dom/wrappers/shared/bind_this.ts   |  2 +-
 .../_config.js                                | 18 ++++++++++++++
 .../main.svelte                               |  9 +++++++
 .../samples/binding-this-each-key/_config.js  | 10 ++++++++
 .../samples/binding-this-each-key/main.svelte | 15 ++++++++++++
 .../_config.js                                |  8 +++++++
 .../main.svelte                               |  9 +++++++
 9 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 test/runtime/samples/binding-input-member-expression-update/_config.js
 create mode 100644 test/runtime/samples/binding-input-member-expression-update/main.svelte
 create mode 100644 test/runtime/samples/binding-this-each-key/_config.js
 create mode 100644 test/runtime/samples/binding-this-each-key/main.svelte
 create mode 100644 test/runtime/samples/binding-this-member-expression-update/_config.js
 create mode 100644 test/runtime/samples/binding-this-member-expression-update/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
index 7c8a339d00..bc218a510b 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
@@ -70,6 +70,30 @@ export default class BindingWrapper {
 		return dependencies;
 	}
 
+	get_update_dependencies() {
+		const object = this.object;
+		const dependencies = new Set<string>();
+		if (this.node.expression.template_scope.names.has(object)) {
+			this.node.expression.template_scope.dependencies_for_name
+				.get(object)
+				.forEach((name) => dependencies.add(name));
+		} else {
+			dependencies.add(object);
+		}
+
+		const result = new Set(dependencies);
+		dependencies.forEach((dependency) => {
+			const indirect_dependencies = this.parent.renderer.component.indirect_dependencies.get(dependency);
+			if (indirect_dependencies) {
+				indirect_dependencies.forEach(indirect_dependency => {
+					result.add(indirect_dependency);
+				});
+			}
+		});
+
+		return result;
+	}
+
 	is_readonly_media_attribute() {
 		return this.node.is_readonly_media_attribute();
 	}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 9ec36b12d7..583274044b 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -466,7 +466,7 @@ export default class ElementWrapper extends Wrapper {
 
 		binding_group.bindings.forEach(binding => {
 			// TODO this is a mess
-			add_to_set(dependencies, binding.get_dependencies());
+			add_to_set(dependencies, binding.get_update_dependencies());
 			add_to_set(contextual_dependencies, binding.handler.contextual_dependencies);
 
 			binding.render(block, lock);
diff --git a/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts b/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
index 1b8c4f9db8..af440b6341 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
@@ -12,7 +12,7 @@ export default function bind_this(component: Component, block: Block, binding: B
 	const callee = block.renderer.reference(fn.name);
 
 	const { contextual_dependencies, mutation } = binding.handler;
-	const dependencies = binding.get_dependencies();
+	const dependencies = binding.get_update_dependencies();
 
 	const body = b`
 		${mutation}
diff --git a/test/runtime/samples/binding-input-member-expression-update/_config.js b/test/runtime/samples/binding-input-member-expression-update/_config.js
new file mode 100644
index 0000000000..c0dfc3bbe8
--- /dev/null
+++ b/test/runtime/samples/binding-input-member-expression-update/_config.js
@@ -0,0 +1,18 @@
+// binding member expression shouldn't invalidate the property name
+export default {
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.deepEqual(component.logs.length, 1);
+		assert.equal(input.value, 'abc');
+
+		input.value = 'hij';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.deepEqual(component.values.a, 'hij');
+		assert.deepEqual(component.logs.length, 1);
+		
+		component.paths = ['b'];
+		assert.deepEqual(component.logs.length, 2);
+		assert.equal(input.value, 'def');		
+	}
+};
diff --git a/test/runtime/samples/binding-input-member-expression-update/main.svelte b/test/runtime/samples/binding-input-member-expression-update/main.svelte
new file mode 100644
index 0000000000..dc72b229ba
--- /dev/null
+++ b/test/runtime/samples/binding-input-member-expression-update/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let values = { a: 'abc', b: 'def' };
+	export let paths = ['a'];
+	export let logs = [];
+
+	$: paths && logs.push('paths updated');
+</script>
+
+<input bind:value={values[paths[0]]} />
diff --git a/test/runtime/samples/binding-this-each-key/_config.js b/test/runtime/samples/binding-this-each-key/_config.js
new file mode 100644
index 0000000000..332e14fda8
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-key/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: '<div>content</div><div>content</div><div>content</div>',
+
+	test({ assert, target, component }) {
+		const divs = target.querySelectorAll('div');
+		assert.equal(component.refs[0], divs[0]);
+		assert.equal(component.refs[1], divs[1]);
+		assert.equal(component.refs[2], divs[2]);
+	}
+};
diff --git a/test/runtime/samples/binding-this-each-key/main.svelte b/test/runtime/samples/binding-this-each-key/main.svelte
new file mode 100644
index 0000000000..cff2ffa226
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-key/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let data = [ { id: '1' }, { id: '2' }, { id: '3' } ];
+
+	export let refs = [];
+
+	// note that this is NOT data.slice().reverse()
+	// as that wouldn't have triggered an infinite loop
+	$: list = data.reverse();
+</script>
+
+{#each list as { id }, index (id)}
+	<div bind:this={refs[index]}>
+		content
+	</div>
+{/each}
diff --git a/test/runtime/samples/binding-this-member-expression-update/_config.js b/test/runtime/samples/binding-this-member-expression-update/_config.js
new file mode 100644
index 0000000000..782d44311c
--- /dev/null
+++ b/test/runtime/samples/binding-this-member-expression-update/_config.js
@@ -0,0 +1,8 @@
+// binding member expression shouldn't invalidate the property name
+export default {
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div, component.container.a);
+		assert.deepEqual(component.logs.length, 1);
+	}
+};
diff --git a/test/runtime/samples/binding-this-member-expression-update/main.svelte b/test/runtime/samples/binding-this-member-expression-update/main.svelte
new file mode 100644
index 0000000000..327d63d494
--- /dev/null
+++ b/test/runtime/samples/binding-this-member-expression-update/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let container = {};
+	export let paths = ['a'];
+	export let logs = [];
+
+	$: paths && logs.push('paths updated');
+</script>
+
+<div bind:this={container[paths[0]]} />

From 4627bdde73d1eb0dbdb8198b31ebf96b6f2206c5 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 6 Jan 2022 15:30:32 -0500
Subject: [PATCH 24/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2051efe3c0..1e2e488320 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Fix non-boolean attribute rendering in SSR to render truthy values as-is ([#6121](https://github.com/sveltejs/svelte/issues/6121))
+* Fix binding to a member expression also invalidating the member property ([#6921](https://github.com/sveltejs/svelte/issues/6921))
 * Fix `{:else if}` value incorrectly being cached ([#7043](https://github.com/sveltejs/svelte/pull/7043))
 * Add `a11y-no-redundant-roles` warning ([#7067](https://github.com/sveltejs/svelte/pull/7067))
 * Fix code generation error with arrow functions whose bodies are object destructuring assignments ([#7087](https://github.com/sveltejs/svelte/issues/7087))

From 5e40277167d8442710ebfaf68247491af4cf1ca0 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 7 Jan 2022 05:05:49 +0800
Subject: [PATCH 25/66] [feat] add reference for default values in
 destructuring context (#7007)

---
 src/compiler/compile/nodes/AwaitBlock.ts      |   4 +-
 src/compiler/compile/nodes/EachBlock.ts       |   2 +-
 src/compiler/compile/nodes/shared/Context.ts  | 125 ++++++++++++++++--
 .../unreferenced-variables-each/input.svelte  |  20 +++
 .../unreferenced-variables-each/warnings.json |  32 +++++
 5 files changed, 167 insertions(+), 16 deletions(-)
 create mode 100644 test/validator/samples/unreferenced-variables-each/input.svelte
 create mode 100644 test/validator/samples/unreferenced-variables-each/warnings.json

diff --git a/src/compiler/compile/nodes/AwaitBlock.ts b/src/compiler/compile/nodes/AwaitBlock.ts
index ef74d26848..735fdbfff3 100644
--- a/src/compiler/compile/nodes/AwaitBlock.ts
+++ b/src/compiler/compile/nodes/AwaitBlock.ts
@@ -33,12 +33,12 @@ export default class AwaitBlock extends Node {
 
 		if (this.then_node) {
 			this.then_contexts = [];
-			unpack_destructuring(this.then_contexts, info.value);
+			unpack_destructuring({ contexts: this.then_contexts, node: info.value, scope, component });
 		}
 
 		if (this.catch_node) {
 			this.catch_contexts = [];
-			unpack_destructuring(this.catch_contexts, info.error);
+			unpack_destructuring({ contexts: this.catch_contexts, node: info.error, scope, component });
 		}
 
 		this.pending = new PendingBlock(component, this, scope, info.pending);
diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts
index c03128c388..a8312b2462 100644
--- a/src/compiler/compile/nodes/EachBlock.ts
+++ b/src/compiler/compile/nodes/EachBlock.ts
@@ -39,7 +39,7 @@ export default class EachBlock extends AbstractBlock {
 		this.scope = scope.child();
 
 		this.contexts = [];
-		unpack_destructuring(this.contexts, info.context);
+		unpack_destructuring({ contexts: this.contexts, node: info.context, scope, component });
 
 		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 6cc5a4358e..7507d1e37e 100644
--- a/src/compiler/compile/nodes/shared/Context.ts
+++ b/src/compiler/compile/nodes/shared/Context.ts
@@ -3,6 +3,9 @@ import { Node, Identifier, Expression } from 'estree';
 import { walk } from 'estree-walker';
 import is_reference, { NodeWithPropertyDefinition } from 'is-reference';
 import { clone } from '../../../utils/clone';
+import Component from '../../Component';
+import flatten_reference from '../../utils/flatten_reference';
+import TemplateScope from './TemplateScope';
 
 export interface Context {
 	key: Identifier;
@@ -11,7 +14,21 @@ export interface Context {
 	default_modifier: (node: Node, to_ctx: (name: string) => Node) => Node;
 }
 
-export function unpack_destructuring(contexts: Context[], node: Node, modifier: Context['modifier'] = node => node, default_modifier: Context['default_modifier'] = node => node) {
+export function unpack_destructuring({
+	contexts,
+	node,
+	modifier = (node) => node,
+	default_modifier = (node) => node,
+	scope,
+	component
+}: {
+	contexts: Context[];
+	node: Node;
+	modifier?: Context['modifier'];
+	default_modifier?: Context['default_modifier'];
+	scope: TemplateScope;
+	component: Component;
+}) {
 	if (!node) return;
 
 	if (node.type === 'Identifier') {
@@ -29,13 +46,41 @@ export function unpack_destructuring(contexts: Context[], node: Node, modifier:
 	} else if (node.type === 'ArrayPattern') {
 		node.elements.forEach((element, i) => {
 			if (element && element.type === 'RestElement') {
-				unpack_destructuring(contexts, element, node => x`${modifier(node)}.slice(${i})` as Node, default_modifier);
+				unpack_destructuring({
+					contexts,
+					node: element,
+					modifier: (node) => x`${modifier(node)}.slice(${i})` as Node,
+					default_modifier,
+					scope,
+					component
+				});
 			} else if (element && element.type === 'AssignmentPattern') {
 				const n = contexts.length;
+				mark_referenced(element.right, scope, component);
 
-				unpack_destructuring(contexts, element.left, node => x`${modifier(node)}[${i}]`, (node, to_ctx) => x`${node} !== undefined ? ${node} : ${update_reference(contexts, n, element.right, to_ctx)}` as Node);
+				unpack_destructuring({
+					contexts,
+					node: element.left,
+					modifier: (node) => x`${modifier(node)}[${i}]`,
+					default_modifier: (node, to_ctx) =>
+						x`${node} !== undefined ? ${node} : ${update_reference(
+							contexts,
+							n,
+							element.right,
+							to_ctx
+						)}` as Node,
+					scope,
+					component
+				});
 			} else {
-				unpack_destructuring(contexts, element, node => x`${modifier(node)}[${i}]` as Node, default_modifier);
+				unpack_destructuring({
+					contexts,
+					node: element,
+					modifier: (node) => x`${modifier(node)}[${i}]` as Node,
+					default_modifier,
+					scope,
+					component
+				});
 			}
 		});
 	} else if (node.type === 'ObjectPattern') {
@@ -43,12 +88,17 @@ export function unpack_destructuring(contexts: Context[], node: Node, modifier:
 
 		node.properties.forEach((property) => {
 			if (property.type === 'RestElement') {
-				unpack_destructuring(
+				unpack_destructuring({
 					contexts,
-					property.argument,
-					node => x`@object_without_properties(${modifier(node)}, [${used_properties}])` as Node,
-					default_modifier
-				);
+					node: property.argument,
+					modifier: (node) =>
+						x`@object_without_properties(${modifier(
+							node
+						)}, [${used_properties}])` as Node,
+					default_modifier,
+					scope,
+					component
+				});
 			} else {
 				const key = property.key as Identifier;
 				const value = property.value;
@@ -57,16 +107,43 @@ export function unpack_destructuring(contexts: Context[], node: Node, modifier:
 				if (value.type === 'AssignmentPattern') {
 					const n = contexts.length;
 
-					unpack_destructuring(contexts, value.left, node => x`${modifier(node)}.${key.name}`, (node, to_ctx) => x`${node} !== undefined ? ${node} : ${update_reference(contexts, n, value.right, to_ctx)}` as Node);
+					mark_referenced(value.right, scope, component);
+
+					unpack_destructuring({
+						contexts,
+						node: value.left,
+						modifier: (node) => x`${modifier(node)}.${key.name}`,
+						default_modifier: (node, to_ctx) =>
+							x`${node} !== undefined ? ${node} : ${update_reference(
+								contexts,
+								n,
+								value.right,
+								to_ctx
+							)}` as Node,
+						scope,
+						component
+					});
 				} else {
-					unpack_destructuring(contexts, value, node => x`${modifier(node)}.${key.name}` as Node, default_modifier);
+					unpack_destructuring({
+						contexts,
+						node: value,
+						modifier: (node) => x`${modifier(node)}.${key.name}` as Node,
+						default_modifier,
+						scope,
+						component
+					});
 				}
 			}
 		});
 	}
 }
 
-function update_reference(contexts: Context[], n: number, expression: Expression, to_ctx: (name: string) => Node): Node {
+function update_reference(
+	contexts: Context[],
+	n: number,
+	expression: Expression,
+	to_ctx: (name: string) => Node
+): Node {
 	const find_from_context = (node: Identifier) => {
 		for (let i = n; i < contexts.length; i++) {
 			const { key } = contexts[i];
@@ -85,7 +162,12 @@ function update_reference(contexts: Context[], n: number, expression: Expression
 	expression = clone(expression) as Expression;
 	walk(expression, {
 		enter(node, parent: Node) {
-			if (is_reference(node as NodeWithPropertyDefinition, parent as NodeWithPropertyDefinition)) {
+			if (
+				is_reference(
+					node as NodeWithPropertyDefinition,
+					parent as NodeWithPropertyDefinition
+				)
+			) {
 				this.replace(find_from_context(node as Identifier));
 				this.skip();
 			}
@@ -94,3 +176,20 @@ function update_reference(contexts: Context[], n: number, expression: Expression
 
 	return expression;
 }
+
+function mark_referenced(
+	node: Node,
+	scope: TemplateScope,
+	component: Component
+) {
+	walk(node, {
+		enter(node: any, parent: any) {
+			if (is_reference(node, parent)) {
+				const { name } = flatten_reference(node);
+				if (!scope.is_let(name) && !scope.names.has(name)) {
+					component.add_reference(name);
+				}
+			}
+		}
+	});
+}
diff --git a/test/validator/samples/unreferenced-variables-each/input.svelte b/test/validator/samples/unreferenced-variables-each/input.svelte
new file mode 100644
index 0000000000..a96f9189a2
--- /dev/null
+++ b/test/validator/samples/unreferenced-variables-each/input.svelte
@@ -0,0 +1,20 @@
+<script>
+	let Component;
+	export let array;
+	export let default_value_1;
+	export let default_value_2;
+	export let default_value_3;
+	export let default_value_4;
+	export let default_value_5;
+	export let default_value_6;
+</script>
+
+<Component>
+	<svelte:fragment let:a={default_value_6}>
+		{#each array as default_value_5}
+			{#each array as { a = default_value_1, b: { b = [default_value_2, default_value_3], c: [c = default_value_4] }, d = default_value_5, e = default_value_6 }}
+				{a}{b}{c}{d}{e}
+			{/each}
+		{/each}
+	</svelte:fragment>
+</Component>
diff --git a/test/validator/samples/unreferenced-variables-each/warnings.json b/test/validator/samples/unreferenced-variables-each/warnings.json
new file mode 100644
index 0000000000..fa89da0e68
--- /dev/null
+++ b/test/validator/samples/unreferenced-variables-each/warnings.json
@@ -0,0 +1,32 @@
+[
+	{
+		"code": "unused-export-let",
+		"message": "Component_1 has unused export property 'default_value_5'. If it is for external reference only, please consider using `export const default_value_5`",
+		"pos": 172,
+		"start": {
+			"character": 172,
+			"column": 12,
+			"line": 8
+		},
+		"end": {
+			"character": 187,
+			"column": 27,
+			"line": 8
+		}
+	},
+	{
+		"code": "unused-export-let",
+		"message": "Component_1 has unused export property 'default_value_6'. If it is for external reference only, please consider using `export const default_value_6`",
+		"pos": 201,
+		"start": {
+			"character": 201,
+			"column": 12,
+			"line": 9
+		},
+		"end": {
+			"character": 216,
+			"column": 27,
+			"line": 9
+		}
+	}
+]

From 129d81710ec18fc81e93c55bb3f9a4cad4573735 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 6 Jan 2022 16:07:31 -0500
Subject: [PATCH 26/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e2e488320..af66bdd740 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Fix non-boolean attribute rendering in SSR to render truthy values as-is ([#6121](https://github.com/sveltejs/svelte/issues/6121))
 * Fix binding to a member expression also invalidating the member property ([#6921](https://github.com/sveltejs/svelte/issues/6921))
+* Fix default values in `{#each}`/etc. destructurings not being considered references for the purposes of compiler warnings ([#6964](https://github.com/sveltejs/svelte/issues/6964))
 * Fix `{:else if}` value incorrectly being cached ([#7043](https://github.com/sveltejs/svelte/pull/7043))
 * Add `a11y-no-redundant-roles` warning ([#7067](https://github.com/sveltejs/svelte/pull/7067))
 * Fix code generation error with arrow functions whose bodies are object destructuring assignments ([#7087](https://github.com/sveltejs/svelte/issues/7087))

From deed340cf5d9c278f9a0605297ad6e4a3a1579d9 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Thu, 6 Jan 2022 16:08:11 -0500
Subject: [PATCH 27/66] -> v3.45.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 af66bdd740..39dc47b387 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Svelte changelog
 
-## Unreleased
+## 3.45.0
 
 * Fix non-boolean attribute rendering in SSR to render truthy values as-is ([#6121](https://github.com/sveltejs/svelte/issues/6121))
 * Fix binding to a member expression also invalidating the member property ([#6921](https://github.com/sveltejs/svelte/issues/6921))
diff --git a/package-lock.json b/package-lock.json
index 4ef6760cf8..c0f623415d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.44.3",
+  "version": "3.45.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.44.3",
+      "version": "3.45.0",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index d3a50be73a..7d36c10971 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.44.3",
+  "version": "3.45.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From 8a47b5ec9eaaa25ec663816d3c42e7b3120ede1e Mon Sep 17 00:00:00 2001
From: Paul Murray <plmrry@gmail.com>
Date: Sat, 8 Jan 2022 11:09:11 -0500
Subject: [PATCH 28/66] [feat] Style directives (#5923)

* add Style node, interfaces

* style-directives: add parser and runtime test

* style-directives: push styles in to styles array on Element

* style-directives: minimal ssr work

* style-directives: ssr add_styles

* style-directive: tests

* style-directives: work in progress

* obviously incorrect hard-coded color

* tweak

* style directive interface

* style-directives: get text from info in Style node

* style-directives: add_styles func in ElementWrapper

* style-directives: ssr rendering

* handle text-only style directive in tag.ts

* style-directives: handle spread styles in ssr

* style-directives: more parser tests

* style-directives: more inline tests

* style-directives: remove solo tests

* style-directives: cleanup

* style-directives: tweak spread ssr internal

* style-directives: push updater into update chunks; add dynamic test;

* remove .solo

* check for dynamic dependencies before adding update chunk

* add test of multiple styles; remove null styles;

* style-directives: docs; more tests of multiple styles

* style-directives: use camelcase

* style-directives: cleanup

* style-directives: fix mustache template case with template literal

* style-directives: use ternary

* style-directives: linting

* style-directives: remove "text" from interface

* style-directives: actually, remove StyleDirective interface entriely

* add more test, fix test for ssr

* fix lint and tidy up

* add test for css variables

* fix linting errors

Co-authored-by: pmurray73 <pmurray73@bloomberg.net>
Co-authored-by: Tan Li Hau <lhtan93@gmail.com>
---
 site/content/docs/02-template-syntax.md       | 40 ++++++++++++
 src/compiler/compile/nodes/Element.ts         |  6 ++
 src/compiler/compile/nodes/Style.ts           | 22 +++++++
 src/compiler/compile/nodes/interfaces.ts      |  2 +
 .../render_dom/wrappers/Element/index.ts      | 38 ++++++++++++
 .../compile/render_ssr/handlers/Element.ts    | 22 ++++++-
 src/compiler/interfaces.ts                    |  1 +
 src/compiler/parse/state/tag.ts               | 57 ++++++++++++++---
 src/runtime/internal/dom.ts                   |  6 +-
 src/runtime/internal/ssr.ts                   | 61 +++++++++++++++++--
 .../attribute-class-directive/input.svelte    |  1 +
 .../attribute-class-directive/output.json     | 41 +++++++++++++
 .../input.svelte                              |  1 +
 .../output.json                               | 31 ++++++++++
 .../input.svelte                              |  1 +
 .../output.json                               | 39 ++++++++++++
 .../attribute-style-directive/input.svelte    |  1 +
 .../attribute-style-directive/output.json     | 41 +++++++++++++
 .../samples/attribute-style/input.svelte      |  1 +
 .../samples/attribute-style/output.json       | 41 +++++++++++++
 .../_config.js                                | 13 ++++
 .../main.svelte                               |  5 ++
 .../_config.js                                | 13 ++++
 .../main.svelte                               |  5 ++
 .../_config.js                                |  9 +++
 .../main.svelte                               |  5 ++
 .../inline-style-directive-dynamic/_config.js | 10 +++
 .../main.svelte                               |  5 ++
 .../_config.js                                | 27 ++++++++
 .../main.svelte                               | 13 ++++
 .../_config.js                                | 18 ++++++
 .../main.svelte                               |  5 ++
 .../_config.js                                |  5 ++
 .../main.svelte                               | 11 ++++
 .../_config.js                                | 43 +++++++++++++
 .../main.svelte                               | 11 ++++
 .../_config.js                                | 39 ++++++++++++
 .../main.svelte                               |  5 ++
 .../inline-style-directive-spread/_config.js  | 14 +++++
 .../inline-style-directive-spread/main.svelte |  1 +
 .../_config.js                                | 23 +++++++
 .../main.svelte                               |  7 +++
 .../inline-style-directive-string/_config.js  | 12 ++++
 .../inline-style-directive-string/main.svelte |  1 +
 .../samples/inline-style-directive/_config.js | 12 ++++
 .../inline-style-directive/main.svelte        |  5 ++
 test/runtime/samples/inline-style/_config.js  | 12 ++++
 test/runtime/samples/inline-style/main.svelte |  1 +
 48 files changed, 765 insertions(+), 18 deletions(-)
 create mode 100644 src/compiler/compile/nodes/Style.ts
 create mode 100644 test/parser/samples/attribute-class-directive/input.svelte
 create mode 100644 test/parser/samples/attribute-class-directive/output.json
 create mode 100644 test/parser/samples/attribute-style-directive-shorthand/input.svelte
 create mode 100644 test/parser/samples/attribute-style-directive-shorthand/output.json
 create mode 100644 test/parser/samples/attribute-style-directive-string/input.svelte
 create mode 100644 test/parser/samples/attribute-style-directive-string/output.json
 create mode 100644 test/parser/samples/attribute-style-directive/input.svelte
 create mode 100644 test/parser/samples/attribute-style-directive/output.json
 create mode 100644 test/parser/samples/attribute-style/input.svelte
 create mode 100644 test/parser/samples/attribute-style/output.json
 create mode 100644 test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-and-style-attr/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-and-style-attr/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-css-vars/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-css-vars/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-dynamic/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-dynamic/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-multiple/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-multiple/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-shorthand/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-shorthand/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-spread-and-attr-empty/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-spread-and-attr-empty/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-spread-and-attr/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-spread-and-attr/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-spread-dynamic/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-spread-dynamic/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-spread/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-spread/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-string-variable/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-string-variable/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-string/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-string/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive/main.svelte
 create mode 100644 test/runtime/samples/inline-style/_config.js
 create mode 100644 test/runtime/samples/inline-style/main.svelte

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index aeabeb7a51..e6db1854d2 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -821,6 +821,46 @@ A `class:` directive provides a shorter way of toggling a class on an element.
 <div class:active class:inactive={!active} class:isAdmin>...</div>
 ```
 
+#### style:*property*
+
+```sv
+style:property={value}
+```
+```sv
+style:property="value"
+```
+```sv
+style:property
+```
+
+---
+
+The `style:` directive provides a shorthand for setting multiple styles on an element.
+
+```sv
+<!-- These are equivalent -->
+<div style:color="red">...</div>
+<div style="color: red;">...</div>
+
+<!-- Variables can be used -->
+<div style:color={myColor}>...</div>
+
+<!-- Shorthand, for when property and variable name match -->
+<div style:color>...</div>
+
+<!-- Multiple styles can be included -->
+<div style:color style:width="12rem" style:background-color={darkMode ? "black" : "white"}>...</div>
+```
+
+---
+
+When `style:` directives are combined with `style` attributes, the directives will take precedence:
+
+```sv
+<div style="color: blue;" style:color="red">This will be red</div>
+```
+
+
 
 #### use:*action*
 
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index bf81599bf6..c6b53b2e0d 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -7,6 +7,7 @@ import Transition from './Transition';
 import Animation from './Animation';
 import Action from './Action';
 import Class from './Class';
+import Style from './Style';
 import Text from './Text';
 import { namespaces } from '../../utils/namespaces';
 import map_children from './shared/map_children';
@@ -180,6 +181,7 @@ export default class Element extends Node {
 	actions: Action[] = [];
 	bindings: Binding[] = [];
 	classes: Class[] = [];
+	styles: Style[] = [];
 	handlers: EventHandler[] = [];
 	lets: Let[] = [];
 	intro?: Transition = null;
@@ -263,6 +265,10 @@ export default class Element extends Node {
 					this.classes.push(new Class(component, this, scope, node));
 					break;
 
+				case 'Style':
+					this.styles.push(new Style(component, this, scope, node));
+					break;
+
 				case 'EventHandler':
 					this.handlers.push(new EventHandler(component, this, scope, node));
 					break;
diff --git a/src/compiler/compile/nodes/Style.ts b/src/compiler/compile/nodes/Style.ts
new file mode 100644
index 0000000000..e922f6f578
--- /dev/null
+++ b/src/compiler/compile/nodes/Style.ts
@@ -0,0 +1,22 @@
+import Node from './shared/Node';
+import Expression from './shared/Expression';
+import { TemplateNode } from '../../interfaces';
+import TemplateScope from './shared/TemplateScope';
+import Component from '../Component';
+
+export default class Style extends Node {
+	type: 'Style';
+	name: string;
+	expression: Expression;
+	should_cache: boolean;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.name = info.name;
+
+		this.expression = new Expression(component, this, scope, info.expression);
+
+		this.should_cache = info.expression.type === 'TemplateLiteral' && info.expression.expressions.length > 0;
+	}
+}
diff --git a/src/compiler/compile/nodes/interfaces.ts b/src/compiler/compile/nodes/interfaces.ts
index a98c21511f..2e2fa8b5e0 100644
--- a/src/compiler/compile/nodes/interfaces.ts
+++ b/src/compiler/compile/nodes/interfaces.ts
@@ -8,6 +8,7 @@ import Binding from './Binding';
 import Body from './Body';
 import CatchBlock from './CatchBlock';
 import Class from './Class';
+import Style from './Style';
 import Comment from './Comment';
 import DebugTag from './DebugTag';
 import EachBlock from './EachBlock';
@@ -62,6 +63,7 @@ export type INode = Action
 | Slot
 | SlotTemplate
 | DefaultSlotTemplate
+| Style
 | Tag
 | Text
 | ThenBlock
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 583274044b..59d06b8c92 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -340,6 +340,7 @@ export default class ElementWrapper extends Wrapper {
 		this.add_transitions(block);
 		this.add_animation(block);
 		this.add_classes(block);
+		this.add_styles(block);
 		this.add_manual_style_scoping(block);
 
 		if (nodes && this.renderer.options.hydratable && !this.void) {
@@ -914,6 +915,43 @@ 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 snippet = expression.manipulate(block);
+			let cached_snippet;
+			if (should_cache) {
+				cached_snippet = block.get_unique_name(`style_${name}`);
+				block.add_variable(cached_snippet, snippet);
+			}
+
+			const updater = b`@set_style(${this.var}, "${name}", ${should_cache ? cached_snippet : snippet}, false)`;
+
+			block.chunks.hydrate.push(updater);
+
+			const dependencies = expression.dynamic_dependencies();
+			if (has_spread) {
+				block.chunks.update.push(updater);
+			} else if (dependencies.length > 0) {
+				if (should_cache) {
+					block.chunks.update.push(b`
+							if (${block.renderer.dirty(dependencies)} && (${cached_snippet} !== (${cached_snippet} = ${snippet}))) {
+								${updater}	
+							}
+					`);
+				} else {
+					block.chunks.update.push(b`
+						if (${block.renderer.dirty(dependencies)}) {
+							${updater}
+						}
+					`);
+				}
+			}
+		});
+	}
+
 	add_manual_style_scoping(block) {
 		if (this.node.needs_manual_style_scoping) {
 			const updater = b`@toggle_class(${this.var}, "${this.node.component.stylesheet.id}", true);`;
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index c0bf826a8e..dd096ae79b 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -3,7 +3,7 @@ import { get_attribute_expression, get_attribute_value, get_class_attribute_valu
 import { boolean_attributes } from './shared/boolean_attributes';
 import Renderer, { RenderOptions } from '../Renderer';
 import Element from '../../nodes/Element';
-import { x } from 'code-red';
+import { p, x } from 'code-red';
 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';
@@ -36,6 +36,15 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 		class_expression_list.length > 0 &&
 		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;
+		return p`"${name}": ${expression}`;
+	});
+	
+	const style_expression =
+		style_expression_list.length > 0 &&
+		x`{ ${style_expression_list} }`;
+
 	if (node.attributes.some(attr => attr.is_spread)) {
 		// TODO dry this out
 		const args = [];
@@ -65,9 +74,10 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 			}
 		});
 
-		renderer.add_expression(x`@spread([${args}], ${class_expression})`);
+		renderer.add_expression(x`@spread([${args}], { classes: ${class_expression}, styles: ${style_expression} })`);
 	} else {
 		let add_class_attribute = !!class_expression;
+		let add_style_attribute = !!style_expression;
 		node.attributes.forEach(attribute => {
 			const name = attribute.name.toLowerCase();
 			const attr_name = node.namespace === namespaces.foreign ? attribute.name : fix_attribute_casing(attribute.name);
@@ -88,6 +98,9 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 				renderer.add_string(` ${attr_name}="`);
 				renderer.add_expression(x`[${get_class_attribute_value(attribute)}, ${class_expression}].join(' ').trim()`);
 				renderer.add_string('"');
+			} else if (name === 'style' && style_expression) {
+				add_style_attribute = false;
+				renderer.add_expression(x`@add_styles(@merge_ssr_styles(${get_attribute_value(attribute)}, ${style_expression}))`);
 			} else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') {
 				const snippet = (attribute.chunks[0] as Expression).node;
 				renderer.add_expression(x`@add_attribute("${attr_name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`);
@@ -98,7 +111,10 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 			}
 		});
 		if (add_class_attribute) {
-			renderer.add_expression(x`@add_classes([${class_expression}].join(' ').trim())`);
+			renderer.add_expression(x`@add_classes((${class_expression}).trim())`);
+		}
+		if (add_style_attribute) {
+			renderer.add_expression(x`@add_styles(${style_expression})`);
 		}
 	}
 
diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts
index b999fbd803..3e54ea55a3 100644
--- a/src/compiler/interfaces.ts
+++ b/src/compiler/interfaces.ts
@@ -34,6 +34,7 @@ export type DirectiveType = 'Action'
 | 'Animation'
 | 'Binding'
 | 'Class'
+| 'Style'
 | 'EventHandler'
 | 'Let'
 | 'Ref'
diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
index 832f47aacc..81d8fff1c4 100644
--- a/src/compiler/parse/state/tag.ts
+++ b/src/compiler/parse/state/tag.ts
@@ -1,10 +1,11 @@
+import { TemplateLiteral, TemplateElement, Expression } from 'estree';
 import read_expression from '../read/expression';
 import read_script from '../read/script';
 import read_style from '../read/style';
 import { decode_character_references, closing_tag_omitted } from '../utils/html';
 import { is_void } from '../../utils/names';
 import { Parser } from '../index';
-import { Directive, DirectiveType, TemplateNode, Text } from '../../interfaces';
+import { Directive, DirectiveType, TemplateNode, Text, MustacheTag } from '../../interfaces';
 import fuzzymatch from '../../utils/fuzzymatch';
 import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore';
 import parser_errors from '../errors';
@@ -270,6 +271,36 @@ function read_tag_name(parser: Parser) {
 	return name;
 }
 
+function node_to_template_literal(value: Array<Text | MustacheTag>): TemplateLiteral {
+	let quasi: TemplateElement = {
+		type: 'TemplateElement',
+		value: { raw: '', cooked: null },
+		tail: false
+	};
+	const literal: TemplateLiteral = {
+		type: 'TemplateLiteral',
+		expressions: [],
+		quasis: []
+	};
+
+	value.forEach((node) => {
+		if (node.type === 'Text') {
+			quasi.value.raw += node.raw;
+		} else if (node.type === 'MustacheTag') {
+			literal.quasis.push(quasi);
+			literal.expressions.push(node.expression as Expression);
+			quasi = {
+				type: 'TemplateElement',
+				value: { raw: '', cooked: null },
+				tail: false
+			};
+		}
+	});
+	quasi.tail = true;
+	literal.quasis.push(quasi);
+	return literal;
+}
+
 function read_attribute(parser: Parser, unique_names: Set<string>) {
 	const start = parser.index;
 
@@ -365,9 +396,17 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 			parser.error(parser_errors.invalid_ref_directive(directive_name), start);
 		}
 
-		if (value[0]) {
-			if ((value as any[]).length > 1 || value[0].type === 'Text') {
-				parser.error(parser_errors.invalid_directive_value, value[0].start);
+		const first_value = value[0];
+		let expression = null;
+
+		if (first_value) {
+			const attribute_contains_text = (value as any[]).length > 1 || first_value.type === 'Text';
+			if (type === 'Style') {
+				expression = attribute_contains_text ? node_to_template_literal(value as Array<Text | MustacheTag>) : first_value.expression;
+			} else if (attribute_contains_text) {
+				parser.error(parser_errors.invalid_directive_value, first_value.start);
+			} else {
+				expression = first_value.expression;
 			}
 		}
 
@@ -377,7 +416,7 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 			type,
 			name: directive_name,
 			modifiers,
-			expression: (value[0] && value[0].expression) || null
+			expression
 		};
 
 		if (type === 'Transition') {
@@ -386,7 +425,8 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 			directive.outro = direction === 'out' || direction === 'transition';
 		}
 
-		if (!directive.expression && (type === 'Binding' || type === 'Class')) {
+		// Directive name is expression, e.g. <p class:isRed />
+		if (!directive.expression && (type === 'Binding' || type === 'Class' || type === 'Style')) {
 			directive.expression = {
 				start: directive.start + colon_index + 1,
 				end: directive.end,
@@ -414,6 +454,7 @@ function get_directive_type(name: string): DirectiveType {
 	if (name === 'animate') return 'Animation';
 	if (name === 'bind') return 'Binding';
 	if (name === 'class') return 'Class';
+	if (name === 'style') return 'Style';
 	if (name === 'on') return 'EventHandler';
 	if (name === 'let') return 'Let';
 	if (name === 'ref') return 'Ref';
@@ -471,6 +512,8 @@ function read_sequence(parser: Parser, done: () => boolean): TemplateNode[] {
 		data: null
 	};
 
+	const chunks: TemplateNode[] = [];
+
 	function flush(end: number) {
 		if (current_chunk.raw) {
 			current_chunk.data = decode_character_references(current_chunk.raw);
@@ -479,8 +522,6 @@ function read_sequence(parser: Parser, done: () => boolean): TemplateNode[] {
 		}
 	}
 
-	const chunks: TemplateNode[] = [];
-
 	while (parser.index < parser.template.length) {
 		const index = parser.index;
 
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index eb3389e3f8..a8b542053b 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -530,7 +530,11 @@ export function set_input_type(input, type) {
 }
 
 export function set_style(node, key, value, important) {
-	node.style.setProperty(key, value, important ? 'important' : '');
+	if (value === null) {
+		node.style.removeProperty(key);
+	} else {
+		node.style.setProperty(key, value, important ? 'important' : '');
+	}
 }
 
 export function select_option(select, value) {
diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts
index 4d91857ad4..aeaf6e8de8 100644
--- a/src/runtime/internal/ssr.ts
+++ b/src/runtime/internal/ssr.ts
@@ -6,15 +6,29 @@ export const invalid_attribute_name_character = /[\s'">/=\u{FDD0}-\u{FDEF}\u{FFF
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
 // https://infra.spec.whatwg.org/#noncharacter
 
-export function spread(args, classes_to_add) {
+export function spread(args, attrs_to_add) {
 	const attributes = Object.assign({}, ...args);
-	if (classes_to_add) {
-		if (attributes.class == null) {
-			attributes.class = classes_to_add;
-		} else {
-			attributes.class += ' ' + classes_to_add;
+	if (attrs_to_add) {
+		const classes_to_add = attrs_to_add.classes;
+		const styles_to_add = attrs_to_add.styles;
+
+		if (classes_to_add) {
+			if (attributes.class == null) {
+				attributes.class = classes_to_add;
+			} else {
+				attributes.class += ' ' + classes_to_add;
+			}
+		}
+		
+		if (styles_to_add) {
+			if (attributes.style == null) {
+				attributes.style = style_object_to_string(styles_to_add);
+			} else {
+				attributes.style = style_object_to_string(merge_ssr_styles(attributes.style, styles_to_add));
+			}
 		}
 	}
+
 	let str = '';
 
 	Object.keys(attributes).forEach(name => {
@@ -32,6 +46,28 @@ export function spread(args, classes_to_add) {
 	return str;
 }
 
+export function merge_ssr_styles(style_attribute, style_directive) {
+	const style_object = {};
+	for (const individual_style of style_attribute.split(';')) {
+		const colon_index = individual_style.indexOf(':');
+		const name = individual_style.slice(0, colon_index).trim();
+		const value = individual_style.slice(colon_index + 1).trim();
+		if (!name) continue;
+		style_object[name] = value;
+	}
+	
+	for (const name in style_directive) {
+		const value = style_directive[name];
+		if (value) {
+			style_object[name] = value;
+		} else {
+			delete style_object[name];
+		}
+	}
+
+	return style_object;
+}
+
 export const escaped = {
 	'"': '&quot;',
 	"'": '&#39;',
@@ -147,3 +183,16 @@ export function add_attribute(name, value, boolean) {
 export function add_classes(classes) {
 	return classes ? ` class="${classes}"` : '';
 }
+
+function style_object_to_string(style_object) {
+	return Object.keys(style_object)
+		.filter(key => style_object[key])
+		.map(key => `${key}: ${style_object[key]};`)
+		.join(' ');
+}
+
+export function add_styles(style_object) {
+  const styles = style_object_to_string(style_object);
+
+  return styles ? ` style="${styles}"` : '';
+}
diff --git a/test/parser/samples/attribute-class-directive/input.svelte b/test/parser/samples/attribute-class-directive/input.svelte
new file mode 100644
index 0000000000..629df2e29f
--- /dev/null
+++ b/test/parser/samples/attribute-class-directive/input.svelte
@@ -0,0 +1 @@
+<div class:foo={isFoo}></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-class-directive/output.json b/test/parser/samples/attribute-class-directive/output.json
new file mode 100644
index 0000000000..abb2e0c0be
--- /dev/null
+++ b/test/parser/samples/attribute-class-directive/output.json
@@ -0,0 +1,41 @@
+{
+	"html": {
+		"start": 0,
+		"end": 29,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 29,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 22,
+						"type": "Class",
+						"name": "foo",
+						"modifiers": [],
+						"expression": {
+							"type": "Identifier",
+							"start": 16,
+							"end": 21,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 16
+								},
+								"end": {
+									"line": 1,
+									"column": 21
+								}
+							},
+							"name": "isFoo"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive-shorthand/input.svelte b/test/parser/samples/attribute-style-directive-shorthand/input.svelte
new file mode 100644
index 0000000000..3e2c66f218
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive-shorthand/input.svelte
@@ -0,0 +1 @@
+<div style:color></div>
\ 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
new file mode 100644
index 0000000000..d4e81b6e4b
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive-shorthand/output.json
@@ -0,0 +1,31 @@
+{
+	"html": {
+		"start": 0,
+		"end": 23,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 23,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 16,
+						"type": "Style",
+						"name": "color",
+						"modifiers": [],
+						"expression": {
+							"start": 11,
+							"end": 16,
+							"name": "color",
+							"type": "Identifier"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
diff --git a/test/parser/samples/attribute-style-directive-string/input.svelte b/test/parser/samples/attribute-style-directive-string/input.svelte
new file mode 100644
index 0000000000..b2eb6bfef8
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive-string/input.svelte
@@ -0,0 +1 @@
+<div style:color="red"></div>
\ 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
new file mode 100644
index 0000000000..4cf2bd30c2
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive-string/output.json
@@ -0,0 +1,39 @@
+{
+	"html": {
+		"start": 0,
+		"end": 29,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 29,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 22,
+						"type": "Style",
+						"name": "color",
+						"modifiers": [],
+						"expression": {
+							"type": "TemplateLiteral",
+							"expressions": [],
+							"quasis": [
+								{
+									"type": "TemplateElement",
+									"value": {
+										"raw": "red",
+										"cooked": null
+									},
+									"tail": true
+								}
+							]
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive/input.svelte b/test/parser/samples/attribute-style-directive/input.svelte
new file mode 100644
index 0000000000..536d162326
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive/input.svelte
@@ -0,0 +1 @@
+<div style:color={myColor}></div>
\ 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
new file mode 100644
index 0000000000..36906045ce
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive/output.json
@@ -0,0 +1,41 @@
+{
+	"html": {
+		"start": 0,
+		"end": 33,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 33,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 26,
+						"type": "Style",
+						"name": "color",
+						"modifiers": [],
+						"expression": {
+							"type": "Identifier",
+							"start": 18,
+							"end": 25,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 18
+								},
+								"end": {
+									"line": 1,
+									"column": 25
+								}
+							},
+							"name": "myColor"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style/input.svelte b/test/parser/samples/attribute-style/input.svelte
new file mode 100644
index 0000000000..12872605ad
--- /dev/null
+++ b/test/parser/samples/attribute-style/input.svelte
@@ -0,0 +1 @@
+<div style="color: red;">red</div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style/output.json b/test/parser/samples/attribute-style/output.json
new file mode 100644
index 0000000000..95c0c8a7a4
--- /dev/null
+++ b/test/parser/samples/attribute-style/output.json
@@ -0,0 +1,41 @@
+{
+	"html": {
+		"start": 0,
+		"end": 34,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 34,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 24,
+						"type": "Attribute",
+						"name": "style",
+						"value": [
+							{
+								"start": 12,
+								"end": 23,
+								"type": "Text",
+								"raw": "color: red;",
+								"data": "color: red;"
+							}
+						]
+					}
+				],
+				"children": [
+					{
+						"start": 25,
+						"end": 28,
+						"type": "Text",
+						"raw": "red",
+						"data": "red"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js b/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
new file mode 100644
index 0000000000..f5780daf80
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<p style="height: 40px; color: red;"></p>
+	`,
+
+	test({ assert, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+		assert.equal(styles.height, '40px');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte b/test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte
new file mode 100644
index 0000000000..6f3e86b9bf
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let color = 'red';
+</script>
+
+<p style="height: 40px; color: blue;" style:color={color} />
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr/_config.js b/test/runtime/samples/inline-style-directive-and-style-attr/_config.js
new file mode 100644
index 0000000000..f5780daf80
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-and-style-attr/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<p style="height: 40px; color: red;"></p>
+	`,
+
+	test({ assert, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+		assert.equal(styles.height, '40px');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr/main.svelte b/test/runtime/samples/inline-style-directive-and-style-attr/main.svelte
new file mode 100644
index 0000000000..e2ba0fa591
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-and-style-attr/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let color = 'red';
+</script>
+
+<p style="height: 40px;" style:color={color} />
diff --git a/test/runtime/samples/inline-style-directive-css-vars/_config.js b/test/runtime/samples/inline-style-directive-css-vars/_config.js
new file mode 100644
index 0000000000..c8b239a42b
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-css-vars/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: '<p style="--border-color: red;"></p>',
+
+	test({ assert, component, target }) {
+		component.myColor = 'blue';
+
+		assert.htmlEqual(target.innerHTML, '<p style="--border-color: blue;"></p>');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-css-vars/main.svelte b/test/runtime/samples/inline-style-directive-css-vars/main.svelte
new file mode 100644
index 0000000000..689a2333f5
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-css-vars/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let myColor = "red";
+</script>
+
+<p style:--border-color={myColor} />
diff --git a/test/runtime/samples/inline-style-directive-dynamic/_config.js b/test/runtime/samples/inline-style-directive-dynamic/_config.js
new file mode 100644
index 0000000000..a2214fd872
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-dynamic/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: `
+		<p style="color: red;"></p>
+	`,
+
+	test({ assert, component, target }) {
+		component.myColor = 'blue';
+		assert.htmlEqual(target.innerHTML, '<p style="color: blue;"></p>');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-dynamic/main.svelte b/test/runtime/samples/inline-style-directive-dynamic/main.svelte
new file mode 100644
index 0000000000..1d60aefa6f
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-dynamic/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let myColor = "red";
+</script>
+
+<p style:color={myColor} />
diff --git a/test/runtime/samples/inline-style-directive-multiple/_config.js b/test/runtime/samples/inline-style-directive-multiple/_config.js
new file mode 100644
index 0000000000..725d03c4fe
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-multiple/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<p style="color: red; width: 65px; font-weight: 700;"></p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		let styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+
+		component.myColor = 'pink';
+		component.width = '100vh';
+		component.absolute = true;
+		component.bold = false;
+
+		styles = window.getComputedStyle(p);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="color: pink; width: 100vh; font-weight: 100; position: absolute;"></p>'
+		);
+		assert.equal(styles.color, 'pink');
+		assert.equal(styles.width, '100vh');
+		assert.equal(styles.fontWeight, '100');
+		assert.equal(styles.position, 'absolute');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-multiple/main.svelte b/test/runtime/samples/inline-style-directive-multiple/main.svelte
new file mode 100644
index 0000000000..06f03206d5
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-multiple/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let myColor = "red";
+	export let width = "65px";
+	export let absolute = false;
+	export let bold = true;
+</script>
+
+<p
+	style:color={myColor}
+	style:width
+	style:position={absolute ? "absolute" : null}
+	style:font-weight={bold ? 700 : 100}
+/>
diff --git a/test/runtime/samples/inline-style-directive-shorthand/_config.js b/test/runtime/samples/inline-style-directive-shorthand/_config.js
new file mode 100644
index 0000000000..64043e5269
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-shorthand/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<p style="color: red;"></p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		let styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+
+		component.color = 'blue';
+		assert.htmlEqual(target.innerHTML, '<p style="color: blue;"></p>');
+
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'blue');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-shorthand/main.svelte b/test/runtime/samples/inline-style-directive-shorthand/main.svelte
new file mode 100644
index 0000000000..65bbff910b
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-shorthand/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let color = "red";
+</script>
+
+<p style:color />
diff --git a/test/runtime/samples/inline-style-directive-spread-and-attr-empty/_config.js b/test/runtime/samples/inline-style-directive-spread-and-attr-empty/_config.js
new file mode 100644
index 0000000000..f3dcbc8823
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-and-attr-empty/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<p style=""></p>
+	`
+};
diff --git a/test/runtime/samples/inline-style-directive-spread-and-attr-empty/main.svelte b/test/runtime/samples/inline-style-directive-spread-and-attr-empty/main.svelte
new file mode 100644
index 0000000000..c2d5cb4d3f
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-and-attr-empty/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let spread = { style: 'color: red;' };
+	export let color = null;
+	export let style = 'color: blue';
+</script>
+
+<p
+	style:color
+	{...spread}
+	{style}
+/>
diff --git a/test/runtime/samples/inline-style-directive-spread-and-attr/_config.js b/test/runtime/samples/inline-style-directive-spread-and-attr/_config.js
new file mode 100644
index 0000000000..b3660bd5ca
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-and-attr/_config.js
@@ -0,0 +1,43 @@
+export default {
+	html: `
+		<p style="color: green;"></p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		let styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'green');
+
+		component.color = null;
+		assert.htmlEqual(target.innerHTML, '<p style=""></p>');
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.color, '');
+
+		component.spread = { style: 'color: yellow; padding: 30px;' };
+
+		assert.htmlEqual(target.innerHTML, '<p style="padding: 30px;"></p>');
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.color, '');
+		assert.equal(styles.padding, '30px');
+
+		component.spread = {};
+		component.style = 'color: blue; background-color: green;';
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="background-color: green;"></p>'
+		);
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.color, '');
+		assert.equal(styles.backgroundColor, 'green');
+
+		component.color = 'purple';
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="background-color: green; color: purple;"></p>'
+		);
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'purple');
+		assert.equal(styles.backgroundColor, 'green');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-spread-and-attr/main.svelte b/test/runtime/samples/inline-style-directive-spread-and-attr/main.svelte
new file mode 100644
index 0000000000..a9696df675
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-and-attr/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let spread = { style: 'color: red;' };
+	export let color = 'green';
+	export let style = 'color: blue;';
+</script>
+
+<p
+	style:color
+	{style}
+	{...spread}
+/>
diff --git a/test/runtime/samples/inline-style-directive-spread-dynamic/_config.js b/test/runtime/samples/inline-style-directive-spread-dynamic/_config.js
new file mode 100644
index 0000000000..152e4036a0
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-dynamic/_config.js
@@ -0,0 +1,39 @@
+export default {
+	html: `
+		<p id="my-id" style="width: 65px; color: blue;"></p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'blue');
+		assert.equal(styles.width, '65px');
+		assert.equal(p.id, 'my-id');
+
+		component.color = 'red';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p id="my-id" style="width: 65px; color: red;"></p>'
+		);
+
+		component.obj = { style: 'height: 72px;' };
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="height: 72px; color: red;"></p>'
+		);
+
+		component.obj = { style: 'border-radius: 2px; color: orange' };
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="border-radius: 2px; color: red;"></p>'
+		);
+
+		component.obj = {};
+
+		assert.htmlEqual(target.innerHTML, '<p style="color: red;"></p>');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-spread-dynamic/main.svelte b/test/runtime/samples/inline-style-directive-spread-dynamic/main.svelte
new file mode 100644
index 0000000000..a514e4856f
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-dynamic/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let color = 'blue';
+  export let obj = { id: 'my-id', style: 'width: 65px' };
+</script>
+<p {...obj} style:color={color} />
diff --git a/test/runtime/samples/inline-style-directive-spread/_config.js b/test/runtime/samples/inline-style-directive-spread/_config.js
new file mode 100644
index 0000000000..adb8a26544
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<p id="my-id" style="width: 65px; color: blue;"></p>
+	`,
+
+	test({ assert, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'blue');
+		assert.equal(styles.width, '65px');
+		assert.equal(p.id, 'my-id');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-spread/main.svelte b/test/runtime/samples/inline-style-directive-spread/main.svelte
new file mode 100644
index 0000000000..51291146c7
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread/main.svelte
@@ -0,0 +1 @@
+<p {...{ id: "my-id", style: "width: 65px" }} style:color="blue" />
diff --git a/test/runtime/samples/inline-style-directive-string-variable/_config.js b/test/runtime/samples/inline-style-directive-string-variable/_config.js
new file mode 100644
index 0000000000..411a42db8e
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string-variable/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<p style="color: green; transform: translateX(45px); border: 100px solid pink;"></p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'green');
+		assert.equal(styles.transform, 'translateX(45px)');
+		assert.equal(styles.border, '100px solid pink');
+
+		component.translate_x = '100%';
+		component.border_width = 20;
+		component.border_color = 'yellow';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="color: green; transform: translateX(100%); border: 20px solid yellow;"></p>'
+		);
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-string-variable/main.svelte b/test/runtime/samples/inline-style-directive-string-variable/main.svelte
new file mode 100644
index 0000000000..1f0b5019f4
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string-variable/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let translate_x = "45px";
+	export let border_width = 100;
+	export let border_color;
+</script>
+
+<p style:color={"green"} style:transform="translateX({translate_x})" style:border="{border_width}px solid {border_color || 'pink'}" />
diff --git a/test/runtime/samples/inline-style-directive-string/_config.js b/test/runtime/samples/inline-style-directive-string/_config.js
new file mode 100644
index 0000000000..ec32e157e5
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<p style="color: red;"></p>
+	`,
+
+	test({ assert, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-string/main.svelte b/test/runtime/samples/inline-style-directive-string/main.svelte
new file mode 100644
index 0000000000..4e7ce22b22
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string/main.svelte
@@ -0,0 +1 @@
+<p style:color="red" />
diff --git a/test/runtime/samples/inline-style-directive/_config.js b/test/runtime/samples/inline-style-directive/_config.js
new file mode 100644
index 0000000000..ec32e157e5
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<p style="color: red;"></p>
+	`,
+
+	test({ assert, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive/main.svelte b/test/runtime/samples/inline-style-directive/main.svelte
new file mode 100644
index 0000000000..1d60aefa6f
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let myColor = "red";
+</script>
+
+<p style:color={myColor} />
diff --git a/test/runtime/samples/inline-style/_config.js b/test/runtime/samples/inline-style/_config.js
new file mode 100644
index 0000000000..3e984d4c69
--- /dev/null
+++ b/test/runtime/samples/inline-style/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div style="color: red;"></div>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('div');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+	}
+};
diff --git a/test/runtime/samples/inline-style/main.svelte b/test/runtime/samples/inline-style/main.svelte
new file mode 100644
index 0000000000..0f37a04c99
--- /dev/null
+++ b/test/runtime/samples/inline-style/main.svelte
@@ -0,0 +1 @@
+<div style="color: red;"></div>
\ No newline at end of file

From 26f767e873742a4ea6f9214e01b34ca9c95f811b Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sun, 9 Jan 2022 10:01:40 +0100
Subject: [PATCH 29/66] [docs] add note about the AST not being public API
 (#7113)

---
 site/content/docs/04-compile-time.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/04-compile-time.md b/site/content/docs/04-compile-time.md
index 6ba5dabacc..1ee41eeb93 100644
--- a/site/content/docs/04-compile-time.md
+++ b/site/content/docs/04-compile-time.md
@@ -178,7 +178,7 @@ ast: object = svelte.parse(
 
 ---
 
-The `parse` function parses a component, returning only its abstract syntax tree. Unlike compiling with the `generate: false` option, this will not perform any validation or other analysis of the component beyond parsing it.
+The `parse` function parses a component, returning only its abstract syntax tree. Unlike compiling with the `generate: false` option, this will not perform any validation or other analysis of the component beyond parsing it. Note that the returned AST is not considered public API, so breaking changes could occur at any point in time.
 
 
 ```js

From 895b4c67210b37b671089a334998c942371d015e Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 9 Jan 2022 23:12:57 +0900
Subject: [PATCH 30/66] [fix] hydrate correct elements when using `@html`
 (#6946)

---
 src/runtime/internal/dom.ts                           |  2 +-
 .../samples/raw-with-empty-line-at-top/_after.html    |  6 ++++++
 .../samples/raw-with-empty-line-at-top/_before.html   |  6 ++++++
 .../samples/raw-with-empty-line-at-top/main.svelte    | 11 +++++++++++
 4 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 test/hydration/samples/raw-with-empty-line-at-top/_after.html
 create mode 100644 test/hydration/samples/raw-with-empty-line-at-top/_before.html
 create mode 100644 test/hydration/samples/raw-with-empty-line-at-top/main.svelte

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index a8b542053b..972b1ff537 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -501,7 +501,7 @@ export function claim_html_tag(nodes) {
 	}
 
 	init_claim_info(nodes);
-	const html_tag_nodes = nodes.splice(start_index, end_index + 1);
+	const html_tag_nodes = nodes.splice(start_index, end_index - start_index + 1);
 	detach(html_tag_nodes[0]);
 	detach(html_tag_nodes[html_tag_nodes.length - 1]);
 	const claimed_nodes = html_tag_nodes.slice(1, html_tag_nodes.length - 1);
diff --git a/test/hydration/samples/raw-with-empty-line-at-top/_after.html b/test/hydration/samples/raw-with-empty-line-at-top/_after.html
new file mode 100644
index 0000000000..28ee6452d3
--- /dev/null
+++ b/test/hydration/samples/raw-with-empty-line-at-top/_after.html
@@ -0,0 +1,6 @@
+
+<div>before</div>
+<br>
+
+<!-- HTML_TAG_START -->a <!-- HTML_TAG_END --><!-- HTML_TAG_START -->b <!-- HTML_TAG_END --><!-- HTML_TAG_START -->c <!-- HTML_TAG_END -->
+<div>after</div>
diff --git a/test/hydration/samples/raw-with-empty-line-at-top/_before.html b/test/hydration/samples/raw-with-empty-line-at-top/_before.html
new file mode 100644
index 0000000000..28ee6452d3
--- /dev/null
+++ b/test/hydration/samples/raw-with-empty-line-at-top/_before.html
@@ -0,0 +1,6 @@
+
+<div>before</div>
+<br>
+
+<!-- HTML_TAG_START -->a <!-- HTML_TAG_END --><!-- HTML_TAG_START -->b <!-- HTML_TAG_END --><!-- HTML_TAG_START -->c <!-- HTML_TAG_END -->
+<div>after</div>
diff --git a/test/hydration/samples/raw-with-empty-line-at-top/main.svelte b/test/hydration/samples/raw-with-empty-line-at-top/main.svelte
new file mode 100644
index 0000000000..2d08a3f418
--- /dev/null
+++ b/test/hydration/samples/raw-with-empty-line-at-top/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let content = ["a ", "b ", "c "];
+</script>
+
+<div>before</div>
+<br>
+
+{#each content as c}
+    {@html c}
+{/each}
+<div>after</div>

From 1143b5615a7a6f45f1025d61e5df5e985d886412 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Sun, 9 Jan 2022 06:15:07 -0800
Subject: [PATCH 31/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39dc47b387..ee465f58b2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Svelte changelog
 
+## Unreleased
+
+* Add style directives ([RFC #42](https://github.com/sveltejs/rfcs/pull/42))
+* Fix hydration when using `@html` ([#7115](https://github.com/sveltejs/svelte/issues/7115))
+
 ## 3.45.0
 
 * Fix non-boolean attribute rendering in SSR to render truthy values as-is ([#6121](https://github.com/sveltejs/svelte/issues/6121))

From 806cba2b755a93ac2b083cf87fb50e8b84947dae Mon Sep 17 00:00:00 2001
From: Hofer Ivan <ivan.hofer@outlook.com>
Date: Tue, 11 Jan 2022 20:54:07 +0100
Subject: [PATCH 32/66] [fix] ensure style manager instances don't conflict
 with each other (#7114)

---
 src/runtime/internal/dom.ts           |  2 +-
 src/runtime/internal/style_manager.ts | 35 ++++++++++++++++-----------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 972b1ff537..287c16b5fc 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -157,7 +157,7 @@ export function get_root_for_style(node: Node): ShadowRoot | Document {
 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;
+	return style_element.sheet as CSSStyleSheet;
 }
 
 function append_stylesheet(node: ShadowRoot | Document, style: HTMLStyleElement) {
diff --git a/src/runtime/internal/style_manager.ts b/src/runtime/internal/style_manager.ts
index 0993b3bf18..6907e5af02 100644
--- a/src/runtime/internal/style_manager.ts
+++ b/src/runtime/internal/style_manager.ts
@@ -1,12 +1,14 @@
 import { append_empty_stylesheet, get_root_for_style } from './dom';
 import { raf } from './environment';
 
-interface ExtendedDoc extends Document {
-	__svelte_stylesheet: CSSStyleSheet;
-	__svelte_rules: Record<string, true>;
+interface StyleInformation {
+	stylesheet: CSSStyleSheet;
+	rules: Record<string, true>;
 }
 
-const active_docs = new Set<ExtendedDoc>();
+// we need to store the information for multiple documents because a Svelte application could also contain iframes
+// https://github.com/sveltejs/svelte/issues/3624
+const managed_styles = new Map<Document | ShadowRoot, StyleInformation>();
 let active = 0;
 
 // https://github.com/darkskyapp/string-hash/blob/master/index.js
@@ -18,6 +20,12 @@ function hash(str: string) {
 	return hash >>> 0;
 }
 
+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;
+}
+
 export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b: number, duration: number, delay: number, ease: (t: number) => number, fn: (t: number, u: number) => string, uid: number = 0) {
 	const step = 16.666 / duration;
 	let keyframes = '{\n';
@@ -29,13 +37,12 @@ export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b:
 
 	const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`;
 	const name = `__svelte_${hash(rule)}_${uid}`;
-	const doc = get_root_for_style(node) as ExtendedDoc;
-	active_docs.add(doc);
-	const stylesheet = doc.__svelte_stylesheet || (doc.__svelte_stylesheet = append_empty_stylesheet(node).sheet as CSSStyleSheet);
-	const current_rules = doc.__svelte_rules || (doc.__svelte_rules = {});
+	const doc = get_root_for_style(node);
+
+	const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node);
 
-	if (!current_rules[name]) {
-		current_rules[name] = true;
+	if (!rules[name]) {
+		rules[name] = true;
 		stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
 	}
 
@@ -63,12 +70,12 @@ export function delete_rule(node: Element & ElementCSSInlineStyle, name?: string
 export function clear_rules() {
 	raf(() => {
 		if (active) return;
-		active_docs.forEach(doc => {
-			const stylesheet = doc.__svelte_stylesheet;
+		managed_styles.forEach(info => {
+			const { stylesheet } = info;
 			let i = stylesheet.cssRules.length;
 			while (i--) stylesheet.deleteRule(i);
-			doc.__svelte_rules = {};
+			info.rules = {};
 		});
-		active_docs.clear();
+		managed_styles.clear();
 	});
 }

From d5fde793c161f5ee0da28ef6ee161b82e94da613 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Tue, 11 Jan 2022 11:55:59 -0800
Subject: [PATCH 33/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee465f58b2..d7d8b69678 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Add style directives ([RFC #42](https://github.com/sveltejs/rfcs/pull/42))
 * Fix hydration when using `@html` ([#7115](https://github.com/sveltejs/svelte/issues/7115))
+* Fix style manager conflicts when using multiple Svelte instances ([#7026](https://github.com/sveltejs/svelte/issues/7026))
 
 ## 3.45.0
 

From b5aaa6641b7ce1a6c64f9593b5afe0c4ba457546 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 12 Jan 2022 06:10:09 +0800
Subject: [PATCH 34/66] [feat] implement constants in markup (#6413)

---
 site/content/docs/02-template-syntax.md       | 23 +++++
 src/compiler/compile/compiler_errors.ts       | 24 ++++-
 src/compiler/compile/nodes/Binding.ts         |  3 +
 src/compiler/compile/nodes/CatchBlock.ts      |  7 +-
 src/compiler/compile/nodes/ConstTag.ts        | 72 +++++++++++++++
 .../compile/nodes/DefaultSlotTemplate.ts      | 28 ------
 src/compiler/compile/nodes/EachBlock.ts       |  6 +-
 src/compiler/compile/nodes/InlineComponent.ts | 10 +-
 src/compiler/compile/nodes/SlotTemplate.ts    |  6 +-
 src/compiler/compile/nodes/ThenBlock.ts       |  7 +-
 src/compiler/compile/nodes/interfaces.ts      | 11 ++-
 .../compile/nodes/shared/Expression.ts        |  8 +-
 .../compile/nodes/shared/TemplateScope.ts     |  8 +-
 .../compile/nodes/shared/get_const_tags.ts    | 91 +++++++++++++++++++
 .../compile/nodes/shared/map_children.ts      |  2 +
 src/compiler/compile/render_dom/Renderer.ts   |  4 +-
 .../compile/render_dom/wrappers/AwaitBlock.ts | 21 ++++-
 .../compile/render_dom/wrappers/EachBlock.ts  |  4 +
 .../render_dom/wrappers/SlotTemplate.ts       | 37 +++++---
 .../wrappers/shared/add_const_tags.ts         | 24 +++++
 .../compile/render_ssr/handlers/AwaitBlock.ts |  3 +-
 .../compile/render_ssr/handlers/EachBlock.ts  |  3 +-
 .../render_ssr/handlers/InlineComponent.ts    |  4 +-
 .../render_ssr/handlers/SlotTemplate.ts       |  7 +-
 .../handlers/shared/get_const_tags.ts         | 17 ++++
 src/compiler/interfaces.ts                    | 16 +++-
 src/compiler/parse/state/mustache.ts          | 22 +++++
 src/compiler/parse/utils/node.ts              |  2 +
 test/js/samples/debug-ssr-foo/expected.js     |  6 +-
 .../_config.js                                | 19 ++++
 .../main.svelte                               | 23 +++++
 .../samples/const-tag-await-then/_config.js   | 19 ++++
 .../samples/const-tag-await-then/main.svelte  | 23 +++++
 .../const-tag-component/Component.svelte      |  7 ++
 .../samples/const-tag-component/_config.js    | 46 ++++++++++
 .../samples/const-tag-component/main.svelte   | 60 ++++++++++++
 .../samples/const-tag-dependencies/_config.js | 12 +++
 .../const-tag-dependencies/main.svelte        | 10 ++
 .../const-tag-each-destructure/_config.js     | 30 ++++++
 .../const-tag-each-destructure/main.svelte    | 19 ++++
 .../runtime/samples/const-tag-each/_config.js | 30 ++++++
 .../samples/const-tag-each/main.svelte        | 19 ++++
 .../samples/const-tag-hoisting/_config.js     | 12 +++
 .../samples/const-tag-hoisting/main.svelte    | 11 +++
 .../samples/const-tag-ordering/_config.js     | 12 +++
 .../samples/const-tag-ordering/main.svelte    | 11 +++
 .../samples/const-tag-shadow/_config.js       | 43 +++++++++
 .../samples/const-tag-shadow/main.svelte      | 31 +++++++
 .../samples/const-tag-conflict-1/errors.json  |  9 ++
 .../samples/const-tag-conflict-1/input.svelte |  8 ++
 .../samples/const-tag-conflict-2/errors.json  |  9 ++
 .../samples/const-tag-conflict-2/input.svelte |  7 ++
 .../samples/const-tag-cyclical/errors.json    |  9 ++
 .../samples/const-tag-cyclical/input.svelte   |  8 ++
 .../const-tag-out-of-scope/input.svelte       | 10 ++
 .../const-tag-out-of-scope/warnings.json      | 17 ++++
 .../samples/const-tag-placement-1/errors.json |  9 ++
 .../const-tag-placement-1/input.svelte        |  5 +
 .../samples/const-tag-placement-2/errors.json |  9 ++
 .../const-tag-placement-2/input.svelte        |  7 ++
 .../samples/const-tag-placement-3/errors.json |  9 ++
 .../const-tag-placement-3/input.svelte        |  9 ++
 .../samples/const-tag-readonly-1/errors.json  |  9 ++
 .../samples/const-tag-readonly-1/input.svelte |  8 ++
 .../samples/const-tag-readonly-2/errors.json  |  9 ++
 .../samples/const-tag-readonly-2/input.svelte |  8 ++
 66 files changed, 998 insertions(+), 74 deletions(-)
 create mode 100644 src/compiler/compile/nodes/ConstTag.ts
 delete mode 100644 src/compiler/compile/nodes/DefaultSlotTemplate.ts
 create mode 100644 src/compiler/compile/nodes/shared/get_const_tags.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/shared/get_const_tags.ts
 create mode 100644 test/runtime/samples/const-tag-await-then-destructuring/_config.js
 create mode 100644 test/runtime/samples/const-tag-await-then-destructuring/main.svelte
 create mode 100644 test/runtime/samples/const-tag-await-then/_config.js
 create mode 100644 test/runtime/samples/const-tag-await-then/main.svelte
 create mode 100644 test/runtime/samples/const-tag-component/Component.svelte
 create mode 100644 test/runtime/samples/const-tag-component/_config.js
 create mode 100644 test/runtime/samples/const-tag-component/main.svelte
 create mode 100644 test/runtime/samples/const-tag-dependencies/_config.js
 create mode 100644 test/runtime/samples/const-tag-dependencies/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each-destructure/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-destructure/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each/_config.js
 create mode 100644 test/runtime/samples/const-tag-each/main.svelte
 create mode 100644 test/runtime/samples/const-tag-hoisting/_config.js
 create mode 100644 test/runtime/samples/const-tag-hoisting/main.svelte
 create mode 100644 test/runtime/samples/const-tag-ordering/_config.js
 create mode 100644 test/runtime/samples/const-tag-ordering/main.svelte
 create mode 100644 test/runtime/samples/const-tag-shadow/_config.js
 create mode 100644 test/runtime/samples/const-tag-shadow/main.svelte
 create mode 100644 test/validator/samples/const-tag-conflict-1/errors.json
 create mode 100644 test/validator/samples/const-tag-conflict-1/input.svelte
 create mode 100644 test/validator/samples/const-tag-conflict-2/errors.json
 create mode 100644 test/validator/samples/const-tag-conflict-2/input.svelte
 create mode 100644 test/validator/samples/const-tag-cyclical/errors.json
 create mode 100644 test/validator/samples/const-tag-cyclical/input.svelte
 create mode 100644 test/validator/samples/const-tag-out-of-scope/input.svelte
 create mode 100644 test/validator/samples/const-tag-out-of-scope/warnings.json
 create mode 100644 test/validator/samples/const-tag-placement-1/errors.json
 create mode 100644 test/validator/samples/const-tag-placement-1/input.svelte
 create mode 100644 test/validator/samples/const-tag-placement-2/errors.json
 create mode 100644 test/validator/samples/const-tag-placement-2/input.svelte
 create mode 100644 test/validator/samples/const-tag-placement-3/errors.json
 create mode 100644 test/validator/samples/const-tag-placement-3/input.svelte
 create mode 100644 test/validator/samples/const-tag-readonly-1/errors.json
 create mode 100644 test/validator/samples/const-tag-readonly-1/input.svelte
 create mode 100644 test/validator/samples/const-tag-readonly-2/errors.json
 create mode 100644 test/validator/samples/const-tag-readonly-2/input.svelte

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index e6db1854d2..ae39c18cd9 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -453,6 +453,29 @@ The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the
 The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when *any* state changes, as opposed to the specified variables.
 
 
+### {@const ...}
+
+```sv
+{@const assignment}
+```
+
+---
+
+The `{@const ...}` tag defines a local constant.
+
+```sv
+<script>
+  export let boxes;
+</script>
+
+{#each boxes as box}
+  {@const area = box.width * box.height}
+	{box.width} * {box.height} = {area}
+{/each}
+```
+
+`{@const}` is only allowed as direct child of `{#each}`, `{:then}`, `{:catch}`, `<Component />` or `<svelte:fragment />`.
+
 
 ### Element directives
 
diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index 54263c3eb9..f6e9d17ea3 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -40,6 +40,10 @@ export default {
 		code: 'invalid-binding',
 		message: 'Cannot bind to a variable declared with {#await ... then} or {:catch} blocks'
 	},
+	invalid_binding_const: {
+		code: 'invalid-binding',
+		message: 'Cannot bind to a variable declared with {@const ...}'
+	},
 	invalid_binding_writibale: {
 		code: 'invalid-binding',
 		message: 'Cannot bind to a variable which is not writable'
@@ -208,7 +212,7 @@ export default {
 	},
 	invalid_attribute_value: (name: string) => ({
 		code: `invalid-${name}-value`,
-		message: `${name} attribute must be true or false`	
+		message: `${name} attribute must be true or false`
 	}),
 	invalid_options_attribute_unknown: {
 		code: 'invalid-options-attribute',
@@ -241,5 +245,21 @@ export default {
 	invalid_directive_value: {
 		code: 'invalid-directive-value',
 		message: 'Can only bind to an identifier (e.g. `foo`) or a member expression (e.g. `foo.bar` or `foo[baz]`)'
-	}
+	},
+	invalid_const_placement: {
+		code: 'invalid-const-placement',
+		message: '{@const} must be the immediate child of {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>'
+	},
+	invalid_const_declaration: (name: string) => ({
+		code: 'invalid-const-declaration',
+		message: `'${name}' has already been declared`
+	}),
+	invalid_const_update: (name: string) => ({
+		code: 'invalid-const-update',
+		message: `'${name}' is declared using {@const ...} and is read-only`
+	}),
+	cyclical_const_tags: (cycle: string[]) => ({
+		code: 'cyclical-const-tags',
+		message: `Cyclical dependency detected: ${cycle.join(' → ')}`
+	})
 };
diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
index 1efc1a3038..39f6fa374e 100644
--- a/src/compiler/compile/nodes/Binding.ts
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -57,6 +57,9 @@ export default class Binding extends Node {
 				component.error(this, compiler_errors.invalid_binding_await);
 				return;
 			}
+			if (scope.is_const(name)) {
+				component.error(this, compiler_errors.invalid_binding_const);
+			}
 
 			scope.dependencies_for_name.get(name).forEach(name => {
 				const variable = component.var_lookup.get(name);
diff --git a/src/compiler/compile/nodes/CatchBlock.ts b/src/compiler/compile/nodes/CatchBlock.ts
index 1a92f617bb..ba6a4b77a6 100644
--- a/src/compiler/compile/nodes/CatchBlock.ts
+++ b/src/compiler/compile/nodes/CatchBlock.ts
@@ -1,13 +1,15 @@
-import map_children from './shared/map_children';
 import TemplateScope from './shared/TemplateScope';
 import AbstractBlock from './shared/AbstractBlock';
 import AwaitBlock from './AwaitBlock';
 import Component from '../Component';
 import { TemplateNode } from '../../interfaces';
+import get_const_tags from './shared/get_const_tags';
+import ConstTag from './ConstTag';
 
 export default class CatchBlock extends AbstractBlock {
 	type: 'CatchBlock';
 	scope: TemplateScope;
+	const_tags: ConstTag[];
 
 	constructor(component: Component, parent: AwaitBlock, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
@@ -18,7 +20,8 @@ export default class CatchBlock extends AbstractBlock {
 				this.scope.add(context.key.name, parent.expression.dependencies, this);
 			});
 		}
-		this.children = map_children(component, parent, this.scope, info.children);
+
+		([this.const_tags, this.children] = get_const_tags(info.children, component, this, parent));
 
 		if (!info.skip) {
 			this.warn_if_empty_block();
diff --git a/src/compiler/compile/nodes/ConstTag.ts b/src/compiler/compile/nodes/ConstTag.ts
new file mode 100644
index 0000000000..157361fb67
--- /dev/null
+++ b/src/compiler/compile/nodes/ConstTag.ts
@@ -0,0 +1,72 @@
+import Node from './shared/Node';
+import Expression from './shared/Expression';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { Context, unpack_destructuring } from './shared/Context';
+import { ConstTag as ConstTagType } from '../../interfaces';
+import { INodeAllowConstTag } from './interfaces';
+import { walk } from 'estree-walker';
+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';
+
+const allowed_parents = new Set(['EachBlock', 'CatchBlock', 'ThenBlock', 'InlineComponent', 'SlotTemplate']);
+
+export default class ConstTag extends Node {
+	type: 'ConstTag';
+	expression: Expression;
+	contexts: Context[] = [];
+	node: ConstTagType;
+	scope: TemplateScope;
+
+	assignees: Set<string> = new Set();
+  dependencies: Set<string> = new Set();
+
+	constructor(component: Component, parent: INodeAllowConstTag, scope: TemplateScope, info: ConstTagType) {
+		super(component, parent, scope, info);
+
+		if (!allowed_parents.has(parent.type)) {
+			component.error(info, compiler_errors.invalid_const_placement);
+		}
+		this.node = info;
+		this.scope = scope;
+
+		const { assignees, dependencies } = this;
+
+		extract_identifiers(info.expression.left).forEach(({ name }) => {
+      assignees.add(name);
+			const owner = this.scope.get_owner(name);
+			if (owner === parent) {
+				component.error(info, compiler_errors.invalid_const_declaration(name));
+			}
+    });
+
+    walk(info.expression.right, {
+      enter(node, parent) {
+        if (is_reference(node as NodeWithPropertyDefinition, parent as NodeWithPropertyDefinition)) {
+          const identifier = get_object(node as any);
+          const { name } = identifier;
+          dependencies.add(name);
+        }
+      }
+    });
+	}
+
+	parse_expression() {
+		unpack_destructuring({
+			contexts: this.contexts,
+			node: this.node.expression.left,
+			scope: this.scope,
+			component: this.component
+		});
+		this.expression = new Expression(this.component, this, this.scope, this.node.expression.right);
+		this.contexts.forEach(context => {
+			const owner = this.scope.get_owner(context.key.name);
+			if (owner && owner.type === 'ConstTag' && owner.parent === this.parent) {
+				this.component.error(this.node, compiler_errors.invalid_const_declaration(context.key.name));
+			}
+			this.scope.add(context.key.name, this.expression.dependencies, this);
+		});
+	}
+}
diff --git a/src/compiler/compile/nodes/DefaultSlotTemplate.ts b/src/compiler/compile/nodes/DefaultSlotTemplate.ts
deleted file mode 100644
index 7f55ee3a60..0000000000
--- a/src/compiler/compile/nodes/DefaultSlotTemplate.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import Component from '../Component';
-import TemplateScope from './shared/TemplateScope';
-import Node from './shared/Node';
-import Let from './Let';
-import { INode } from './interfaces';
-
-export default class DefaultSlotTemplate extends Node {
-	type: 'SlotTemplate';
-	scope: TemplateScope;
-	children: INode[];
-	lets: Let[] = [];
-	slot_template_name = 'default';
-
-	constructor(
-		component: Component,
-		parent: INode,
-		scope: TemplateScope,
-		info: any,
-		lets: Let[],
-		children: INode[]
-	) {
-		super(component, parent, scope, info);
-		this.type = 'SlotTemplate';
-		this.children = children;
-		this.scope = scope;
-		this.lets = lets;
-	}
-}
diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts
index a8312b2462..e1e3107d92 100644
--- a/src/compiler/compile/nodes/EachBlock.ts
+++ b/src/compiler/compile/nodes/EachBlock.ts
@@ -1,14 +1,15 @@
 import ElseBlock from './ElseBlock';
 import Expression from './shared/Expression';
-import map_children from './shared/map_children';
 import TemplateScope from './shared/TemplateScope';
 import AbstractBlock from './shared/AbstractBlock';
 import Element from './Element';
+import ConstTag from './ConstTag';
 import { Context, unpack_destructuring } from './shared/Context';
 import { Node } from 'estree';
 import Component from '../Component';
 import { TemplateNode } from '../../interfaces';
 import compiler_errors from '../compiler_errors';
+import get_const_tags from './shared/get_const_tags';
 
 export default class EachBlock extends AbstractBlock {
 	type: 'EachBlock';
@@ -22,6 +23,7 @@ export default class EachBlock extends AbstractBlock {
 	key: Expression;
 	scope: TemplateScope;
 	contexts: Context[];
+	const_tags: ConstTag[];
 	has_animation: boolean;
 	has_binding = false;
 	has_index_binding = false;
@@ -57,7 +59,7 @@ export default class EachBlock extends AbstractBlock {
 
 		this.has_animation = false;
 
-		this.children = map_children(component, this, this.scope, info.children);
+		([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
 
 		if (this.has_animation) {
 			if (this.children.length !== 1) {
diff --git a/src/compiler/compile/nodes/InlineComponent.ts b/src/compiler/compile/nodes/InlineComponent.ts
index a7bc986e9b..9d88b136cd 100644
--- a/src/compiler/compile/nodes/InlineComponent.ts
+++ b/src/compiler/compile/nodes/InlineComponent.ts
@@ -126,7 +126,15 @@ export default class InlineComponent extends Node {
 						slot_template.attributes.push(attribute);
 					}
 				}
-		
+				// transfer const
+				for (let i = child.children.length - 1; i >= 0; i--) {
+					const child_child = child.children[i];
+					if (child_child.type === 'ConstTag') {
+						slot_template.children.push(child_child);
+						child.children.splice(i, 1);
+					}
+				}
+
 				children.push(slot_template);
 				info.children.splice(i, 1);
 			}
diff --git a/src/compiler/compile/nodes/SlotTemplate.ts b/src/compiler/compile/nodes/SlotTemplate.ts
index fe94a24e4e..cd18859603 100644
--- a/src/compiler/compile/nodes/SlotTemplate.ts
+++ b/src/compiler/compile/nodes/SlotTemplate.ts
@@ -1,4 +1,3 @@
-import map_children from './shared/map_children';
 import Component from '../Component';
 import TemplateScope from './shared/TemplateScope';
 import Node from './shared/Node';
@@ -6,12 +5,15 @@ import Let from './Let';
 import Attribute from './Attribute';
 import { INode } from './interfaces';
 import compiler_errors from '../compiler_errors';
+import get_const_tags from './shared/get_const_tags';
+import ConstTag from './ConstTag';
 
 export default class SlotTemplate extends Node {
 	type: 'SlotTemplate';
 	scope: TemplateScope;
 	children: INode[];
 	lets: Let[] = [];
+	const_tags: ConstTag[];
 	slot_attribute: Attribute;
 	slot_template_name: string = 'default';
 
@@ -63,7 +65,7 @@ export default class SlotTemplate extends Node {
 		});
 
 		this.scope = scope;
-		this.children = map_children(component, this, this.scope, info.children);
+		([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
 	}
 
 	validate_slot_template_placement() {
diff --git a/src/compiler/compile/nodes/ThenBlock.ts b/src/compiler/compile/nodes/ThenBlock.ts
index 720f88ad78..6aee3f916f 100644
--- a/src/compiler/compile/nodes/ThenBlock.ts
+++ b/src/compiler/compile/nodes/ThenBlock.ts
@@ -1,13 +1,15 @@
-import map_children from './shared/map_children';
 import TemplateScope from './shared/TemplateScope';
 import AbstractBlock from './shared/AbstractBlock';
 import AwaitBlock from './AwaitBlock';
 import Component from '../Component';
 import { TemplateNode } from '../../interfaces';
+import get_const_tags from './shared/get_const_tags';
+import ConstTag from './ConstTag';
 
 export default class ThenBlock extends AbstractBlock {
 	type: 'ThenBlock';
 	scope: TemplateScope;
+	const_tags: ConstTag[];
 
 	constructor(component: Component, parent: AwaitBlock, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
@@ -18,7 +20,8 @@ export default class ThenBlock extends AbstractBlock {
 				this.scope.add(context.key.name, parent.expression.dependencies, this);
 			});
 		}
-		this.children = map_children(component, parent, this.scope, info.children);
+
+		([this.const_tags, this.children] = get_const_tags(info.children, component, this, parent));
 
 		if (!info.skip) {
 			this.warn_if_empty_block();
diff --git a/src/compiler/compile/nodes/interfaces.ts b/src/compiler/compile/nodes/interfaces.ts
index 2e2fa8b5e0..b038cf62a7 100644
--- a/src/compiler/compile/nodes/interfaces.ts
+++ b/src/compiler/compile/nodes/interfaces.ts
@@ -10,6 +10,7 @@ import CatchBlock from './CatchBlock';
 import Class from './Class';
 import Style from './Style';
 import Comment from './Comment';
+import ConstTag from './ConstTag';
 import DebugTag from './DebugTag';
 import EachBlock from './EachBlock';
 import Element from './Element';
@@ -27,7 +28,6 @@ import PendingBlock from './PendingBlock';
 import RawMustacheTag from './RawMustacheTag';
 import Slot from './Slot';
 import SlotTemplate from './SlotTemplate';
-import DefaultSlotTemplate from './DefaultSlotTemplate';
 import Text from './Text';
 import ThenBlock from './ThenBlock';
 import Title from './Title';
@@ -45,6 +45,7 @@ export type INode = Action
 | CatchBlock
 | Class
 | Comment
+| ConstTag
 | DebugTag
 | EachBlock
 | Element
@@ -62,7 +63,6 @@ export type INode = Action
 | RawMustacheTag
 | Slot
 | SlotTemplate
-| DefaultSlotTemplate
 | Style
 | Tag
 | Text
@@ -70,3 +70,10 @@ export type INode = Action
 | Title
 | Transition
 | Window;
+
+export type INodeAllowConstTag =
+| EachBlock
+| CatchBlock
+| ThenBlock
+| InlineComponent
+| SlotTemplate;
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index 7c6fc39185..c54540f249 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -133,6 +133,10 @@ export default class Expression {
 				if (names) {
 					names.forEach(name => {
 						if (template_scope.names.has(name)) {
+							if (template_scope.is_const(name)) {
+								component.error(node, compiler_errors.invalid_const_update(name));
+							}
+
 							template_scope.dependencies_for_name.get(name).forEach(name => {
 								const variable = component.var_lookup.get(name);
 								if (variable) variable[deep ? 'mutated' : 'reassigned'] = true;
@@ -172,7 +176,7 @@ export default class Expression {
 	}
 
 	// TODO move this into a render-dom wrapper?
-	manipulate(block?: Block) {
+	manipulate(block?: Block, ctx?: string | void) {
 		// TODO ideally we wouldn't end up calling this method
 		// multiple times
 		if (this.manipulated) return this.manipulated;
@@ -219,7 +223,7 @@ export default class Expression {
 							component.add_reference(name); // TODO is this redundant/misplaced?
 						}
 					} else if (is_contextual(component, template_scope, name)) {
-						const reference = block.renderer.reference(node);
+						const reference = block.renderer.reference(node, ctx);
 						this.replace(reference);
 					}
 
diff --git a/src/compiler/compile/nodes/shared/TemplateScope.ts b/src/compiler/compile/nodes/shared/TemplateScope.ts
index df694ed45e..eae8640ca0 100644
--- a/src/compiler/compile/nodes/shared/TemplateScope.ts
+++ b/src/compiler/compile/nodes/shared/TemplateScope.ts
@@ -4,8 +4,9 @@ import CatchBlock from '../CatchBlock';
 import InlineComponent from '../InlineComponent';
 import Element from '../Element';
 import SlotTemplate from '../SlotTemplate';
+import ConstTag from '../ConstTag';
 
-type NodeWithScope = EachBlock | ThenBlock | CatchBlock | InlineComponent | Element | SlotTemplate;
+type NodeWithScope = EachBlock | ThenBlock | CatchBlock | InlineComponent | Element | SlotTemplate | ConstTag;
 
 export default class TemplateScope {
 	names: Set<string>;
@@ -48,4 +49,9 @@ export default class TemplateScope {
 		const owner = this.get_owner(name);
 		return owner && (owner.type === 'ThenBlock' || owner.type === 'CatchBlock');
 	}
+
+	is_const(name: string) {
+		const owner = this.get_owner(name);
+		return owner && owner.type === 'ConstTag';
+	}
 }
diff --git a/src/compiler/compile/nodes/shared/get_const_tags.ts b/src/compiler/compile/nodes/shared/get_const_tags.ts
new file mode 100644
index 0000000000..77bc26fe9c
--- /dev/null
+++ b/src/compiler/compile/nodes/shared/get_const_tags.ts
@@ -0,0 +1,91 @@
+import { TemplateNode, ConstTag as ConstTagType } from '../../../interfaces';
+import Component from '../../Component';
+import ConstTag from '../ConstTag';
+import map_children from './map_children';
+import { INodeAllowConstTag, INode } from '../interfaces';
+import check_graph_for_cycles from '../../utils/check_graph_for_cycles';
+import compiler_errors from '../../compiler_errors';
+
+export default function get_const_tags(children: TemplateNode[], component: Component, node: INodeAllowConstTag, parent: INode): [ConstTag[], Array<Exclude<INode, ConstTag>>] {
+  const const_tags: ConstTagType[] = [];
+  const others: Array<Exclude<TemplateNode, ConstTagType>> = [];
+
+  for (const child of children) {
+    if (child.type === 'ConstTag') {
+      const_tags.push(child as ConstTagType);
+    } else {
+      others.push(child);
+    }
+  }
+
+  const consts_nodes = const_tags.map(tag => new ConstTag(component, node, node.scope, tag));
+  const sorted_consts_nodes = sort_consts_nodes(consts_nodes, component);
+  sorted_consts_nodes.forEach(node => node.parse_expression());
+
+  const children_nodes = map_children(component, parent, node.scope, others);
+
+  return [sorted_consts_nodes, children_nodes as Array<Exclude<INode, ConstTag>>];
+}
+
+function sort_consts_nodes(consts_nodes: ConstTag[], component: Component) {
+  type ConstNode = {
+    assignees: Set<string>;
+    dependencies: Set<string>;
+    node: ConstTag;
+  };
+  const sorted_consts_nodes: ConstNode[] = [];
+
+  const unsorted_consts_nodes: ConstNode[] = consts_nodes.map(node => {
+    return {
+      assignees: node.assignees,
+      dependencies: node.dependencies,
+      node
+    };
+  });
+
+  const lookup = new Map();
+
+  unsorted_consts_nodes.forEach(node => {
+    node.assignees.forEach(name => {
+      if (!lookup.has(name)) {
+        lookup.set(name, []);
+      }
+      lookup.get(name).push(node);
+    });
+  });
+
+  const cycle = check_graph_for_cycles(unsorted_consts_nodes.reduce((acc, node) => {
+    node.assignees.forEach(v => {
+      node.dependencies.forEach(w => {
+        if (!node.assignees.has(w)) {
+          acc.push([v, w]);
+        }
+      });
+    });
+    return acc;
+  }, []));
+
+  if (cycle && cycle.length) {
+    const nodeList = lookup.get(cycle[0]);
+    const node = nodeList[0];
+    component.error(node.node, compiler_errors.cyclical_const_tags(cycle));
+  }
+
+  const add_node = (node: ConstNode) => {
+    if (sorted_consts_nodes.includes(node)) return;
+
+    node.dependencies.forEach(name => {
+      if (node.assignees.has(name)) return;
+      const earlier_nodes = lookup.get(name);
+      if (earlier_nodes) {
+        earlier_nodes.forEach(add_node);
+      }
+    });
+
+    sorted_consts_nodes.push(node);
+  };
+
+  unsorted_consts_nodes.forEach(add_node);
+
+  return sorted_consts_nodes.map(node => node.node);
+}
diff --git a/src/compiler/compile/nodes/shared/map_children.ts b/src/compiler/compile/nodes/shared/map_children.ts
index b1d0816aac..8fe53088bd 100644
--- a/src/compiler/compile/nodes/shared/map_children.ts
+++ b/src/compiler/compile/nodes/shared/map_children.ts
@@ -1,5 +1,6 @@
 import AwaitBlock from '../AwaitBlock';
 import Body from '../Body';
+import ConstTag from '../ConstTag';
 import Comment from '../Comment';
 import EachBlock from '../EachBlock';
 import Element from '../Element';
@@ -25,6 +26,7 @@ function get_constructor(type) {
 		case 'AwaitBlock': return AwaitBlock;
 		case 'Body': return Body;
 		case 'Comment': return Comment;
+		case 'ConstTag': return ConstTag;
 		case 'EachBlock': return EachBlock;
 		case 'Element': return Element;
 		case 'Head': return Head;
diff --git a/src/compiler/compile/render_dom/Renderer.ts b/src/compiler/compile/render_dom/Renderer.ts
index 94cd539082..c585cb3f72 100644
--- a/src/compiler/compile/render_dom/Renderer.ts
+++ b/src/compiler/compile/render_dom/Renderer.ts
@@ -254,7 +254,7 @@ export default class Renderer {
 		};
 	}
 
-	reference(node: string | Identifier | MemberExpression) {
+	reference(node: string | Identifier | MemberExpression, ctx: string | void = '#ctx') {
 		if (typeof node === 'string') {
 			node = { type: 'Identifier', name: node };
 		}
@@ -268,7 +268,7 @@ export default class Renderer {
 		}
 
 		if (member !== undefined) {
-			const replacement = x`/*${member.name}*/ #ctx[${member.index}]` as MemberExpression;
+			const replacement = x`/*${member.name}*/ ${ctx}[${member.index}]` as MemberExpression;
 
 			if (nodes[0].loc) replacement.object.loc = nodes[0].loc;
 			nodes[0] = replacement;
diff --git a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
index 637d32676c..9c07267223 100644
--- a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
@@ -10,6 +10,7 @@ import ThenBlock from '../../nodes/ThenBlock';
 import CatchBlock from '../../nodes/CatchBlock';
 import { Context } from '../../nodes/shared/Context';
 import { Identifier, Literal, Node } from 'estree';
+import { add_const_tags, add_const_tags_context } from './shared/add_const_tags';
 
 type Status = 'pending' | 'then' | 'catch';
 
@@ -76,22 +77,34 @@ class AwaitBlockBranch extends Wrapper {
 			this.is_destructured = true;
 		}
 		this.value_index = this.renderer.context_lookup.get(this.value).index;
+
+		if (this.has_consts(this.node)) {
+			add_const_tags_context(this.renderer, this.node.const_tags);
+		}
+	}
+
+	has_consts(node: PendingBlock | ThenBlock | CatchBlock): node is ThenBlock | CatchBlock {
+		return node instanceof ThenBlock || node instanceof CatchBlock;
 	}
 
 	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
 		this.fragment.render(block, parent_node, parent_nodes);
 
-		if (this.is_destructured) {
-			this.render_destructure();
+		if (this.is_destructured || (this.has_consts(this.node) && this.node.const_tags.length > 0)) {
+			this.render_get_context();
 		}
 	}
 
-	render_destructure() {
-		const props = this.value_contexts.map(prop => b`#ctx[${this.block.renderer.context_lookup.get(prop.key.name).index}] = ${prop.default_modifier(prop.modifier(x`#ctx[${this.value_index}]`), name => this.renderer.reference(name))};`);
+	render_get_context() {
+		const props = this.is_destructured ? this.value_contexts.map(prop => b`#ctx[${this.block.renderer.context_lookup.get(prop.key.name).index}] = ${prop.default_modifier(prop.modifier(x`#ctx[${this.value_index}]`), name => this.renderer.reference(name))};`) : null;
+
+		const const_tags_props = this.has_consts(this.node) ? add_const_tags(this.block, this.node.const_tags, '#ctx') : null;
+
 		const get_context = this.block.renderer.component.get_unique_name(`get_${this.status}_context`);
 		this.block.renderer.blocks.push(b`
 			function ${get_context}(#ctx) {
 				${props}
+				${const_tags_props}
 			}
 		`);
 		this.block.chunks.declarations.push(b`${get_context}(#ctx)`);
diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
index 5a5a217bce..b77b2472df 100644
--- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
@@ -8,6 +8,7 @@ import { b, x } from 'code-red';
 import ElseBlock from '../../nodes/ElseBlock';
 import { Identifier, Node } from 'estree';
 import get_object from '../../utils/get_object';
+import { add_const_tags, add_const_tags_context } from './shared/add_const_tags';
 
 export class ElseBlockWrapper extends Wrapper {
 	node: ElseBlock;
@@ -86,6 +87,7 @@ export default class EachBlockWrapper extends Wrapper {
 		this.node.contexts.forEach(context => {
 			renderer.add_to_context(context.key.name, true);
 		});
+		add_const_tags_context(renderer, this.node.const_tags);
 
 		this.block = block.child({
 			comment: create_debugging_comment(this.node, this.renderer.component),
@@ -350,11 +352,13 @@ export default class EachBlockWrapper extends Wrapper {
 
 		if (this.node.has_binding) this.context_props.push(b`child_ctx[${renderer.context_lookup.get(this.vars.each_block_value.name).index}] = list;`);
 		if (this.node.has_binding || this.node.has_index_binding || this.node.index) this.context_props.push(b`child_ctx[${renderer.context_lookup.get(this.index_name.name).index}] = i;`);
+
 		// TODO which is better — Object.create(array) or array.slice()?
 		renderer.blocks.push(b`
 			function ${this.vars.get_each_context}(#ctx, list, i) {
 				const child_ctx = #ctx.slice();
 				${this.context_props}
+				${add_const_tags(this.block, this.node.const_tags, 'child_ctx')}
 				return child_ctx;
 			}
 		`);
diff --git a/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts b/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts
index daf41e10c3..a50f74fc04 100644
--- a/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts
+++ b/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts
@@ -4,23 +4,16 @@ import Block from '../Block';
 import FragmentWrapper from './Fragment';
 import create_debugging_comment from './shared/create_debugging_comment';
 import { get_slot_definition } from './shared/get_slot_definition';
-import { x } from 'code-red';
+import { b, x } from 'code-red';
 import { sanitize } from '../../../utils/names';
 import { Identifier } from 'estree';
 import InlineComponentWrapper from './InlineComponent';
 import { extract_names } from 'periscopic';
-import { INode } from '../../nodes/interfaces';
-import Let from '../../nodes/Let';
-import TemplateScope from '../../nodes/shared/TemplateScope';
-
-type NodeWithLets = INode & {
-	scope: TemplateScope;
-	lets: Let[];
-	slot_template_name: string;
-};
+import SlotTemplate from '../../nodes/SlotTemplate';
+import { add_const_tags, add_const_tags_context } from './shared/add_const_tags';
 
 export default class SlotTemplateWrapper extends Wrapper {
-	node: NodeWithLets;
+	node: SlotTemplate;
 	fragment: FragmentWrapper;
 	block: Block;
 	parent: InlineComponentWrapper;
@@ -29,13 +22,13 @@ export default class SlotTemplateWrapper extends Wrapper {
 		renderer: Renderer,
 		block: Block,
 		parent: Wrapper,
-		node: NodeWithLets,
+		node: SlotTemplate,
 		strip_whitespace: boolean,
 		next_sibling: Wrapper
 	) {
 		super(renderer, block, parent, node);
 
-		const { scope, lets, slot_template_name } = this.node;
+		const { scope, lets, const_tags, slot_template_name } = this.node;
 
 		lets.forEach(l => {
 			extract_names(l.value || l.name).forEach(name => {
@@ -43,6 +36,8 @@ export default class SlotTemplateWrapper extends Wrapper {
 			});
 		});
 
+		add_const_tags_context(renderer, const_tags);
+
 		this.block = block.child({
 			comment: create_debugging_comment(this.node, this.renderer.component),
 			name: this.renderer.component.get_unique_name(
@@ -76,5 +71,21 @@ export default class SlotTemplateWrapper extends Wrapper {
 
 	render() {
 		this.fragment.render(this.block, null, x`#nodes` as Identifier);
+
+		if (this.node.const_tags.length > 0) {
+			this.render_get_context();
+		}
+	}
+	render_get_context() {
+		const get_context = this.block.renderer.component.get_unique_name('get_context');
+		this.block.renderer.blocks.push(b`
+			function ${get_context}(#ctx) {
+				${add_const_tags(this.block, this.node.const_tags, '#ctx')}
+			}
+		`);
+		this.block.chunks.declarations.push(b`${get_context}(#ctx)`);
+		if (this.block.has_update_method) {
+			this.block.chunks.update.unshift(b`${get_context}(#ctx)`);
+		}
 	}
 }
diff --git a/src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts b/src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts
new file mode 100644
index 0000000000..cd4dc7f033
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts
@@ -0,0 +1,24 @@
+import ConstTag from '../../../nodes/ConstTag';
+import Block from '../../Block';
+import { b, x } from 'code-red';
+import Renderer from '../../Renderer';
+
+export function add_const_tags(block: Block, const_tags: ConstTag[], ctx: string) {
+  const const_tags_props = [];
+  const_tags.forEach((const_tag, i) => {
+    const name = `#constants_${i}`;
+    const_tags_props.push(b`const ${name} = ${const_tag.expression.manipulate(block, ctx)}`);
+    const_tag.contexts.forEach(context => {
+      const_tags_props.push(b`${ctx}[${block.renderer.context_lookup.get(context.key.name).index}] = ${context.default_modifier(context.modifier({ type: 'Identifier', name }), name => block.renderer.context_lookup.has(name) ? x`${ctx}[${block.renderer.context_lookup.get(name).index}]` : { type: 'Identifier', name })};`);
+    });
+  });
+  return const_tags_props;
+}
+
+export function add_const_tags_context(renderer: Renderer, const_tags: ConstTag[]) {
+  const_tags.forEach(const_tag => {
+    const_tag.contexts.forEach(context => {
+      renderer.add_to_context(context.key.name, true);
+    });
+  });
+}
diff --git a/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts b/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts
index e09abc817c..eecc8ddf5b 100644
--- a/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts
+++ b/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts
@@ -1,6 +1,7 @@
 import Renderer, { RenderOptions } from '../Renderer';
 import AwaitBlock from '../../nodes/AwaitBlock';
 import { x } from 'code-red';
+import { get_const_tags } from './shared/get_const_tags';
 
 export default function(node: AwaitBlock, renderer: Renderer, options: RenderOptions) {
 	renderer.push();
@@ -17,7 +18,7 @@ export default function(node: AwaitBlock, renderer: Renderer, options: RenderOpt
 				__value.then(null, @noop);
 				return ${pending};
 			}
-			return (function(${node.then_node ? node.then_node : ''}) { return ${then}; }(__value));
+			return (function(${node.then_node ? node.then_node : ''}) { ${get_const_tags(node.then.const_tags)}; return ${then}; }(__value));
 		}(${node.expression.node})
 	`);
 }
diff --git a/src/compiler/compile/render_ssr/handlers/EachBlock.ts b/src/compiler/compile/render_ssr/handlers/EachBlock.ts
index 0d05836e82..008c023e11 100644
--- a/src/compiler/compile/render_ssr/handlers/EachBlock.ts
+++ b/src/compiler/compile/render_ssr/handlers/EachBlock.ts
@@ -1,6 +1,7 @@
 import Renderer, { RenderOptions } from '../Renderer';
 import EachBlock from '../../nodes/EachBlock';
 import { x } from 'code-red';
+import { get_const_tags } from './shared/get_const_tags';
 
 export default function(node: EachBlock, renderer: Renderer, options: RenderOptions) {
 	const args = [node.context_node];
@@ -10,7 +11,7 @@ export default function(node: EachBlock, renderer: Renderer, options: RenderOpti
 	renderer.render(node.children, options);
 	const result = renderer.pop();
 
-	const consequent = x`@each(${node.expression.node}, (${args}) => ${result})`;
+	const consequent = x`@each(${node.expression.node}, (${args}) => { ${get_const_tags(node.const_tags)}; return ${result} })`;
 
 	if (node.else) {
 		renderer.push();
diff --git a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
index 2b3ca5fbcb..626365e3e2 100644
--- a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
+++ b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
@@ -76,9 +76,9 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 			slot_scopes
 		}));
 
-		slot_scopes.forEach(({ input, output }, name) => {
+		slot_scopes.forEach(({ input, output, statements }, name) => {
 			slot_fns.push(
-				p`${name}: (${input}) => ${output}`
+				p`${name}: (${input}) => { ${statements}; return ${output}; }`
 			);
 		});
 	}
diff --git a/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts b/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
index 568942c3f5..09f3293301 100644
--- a/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
+++ b/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
@@ -3,9 +3,9 @@ import SlotTemplate from '../../nodes/SlotTemplate';
 import remove_whitespace_children from './utils/remove_whitespace_children';
 import { get_slot_scope } from './shared/get_slot_scope';
 import InlineComponent from '../../nodes/InlineComponent';
-import Element from '../../nodes/Element';
+import { get_const_tags } from './shared/get_const_tags';
 
-export default function(node: SlotTemplate | Element | InlineComponent, renderer: Renderer, options: RenderOptions & {
+export default function(node: SlotTemplate, renderer: Renderer, options: RenderOptions & {
 	slot_scopes: Map<any, any>;
 }) {
 	const parent_inline_component = node.parent as InlineComponent;
@@ -31,7 +31,8 @@ export default function(node: SlotTemplate | Element | InlineComponent, renderer
 
 		options.slot_scopes.set(node.slot_template_name, {
 			input: get_slot_scope(node.lets),
-			output: slot_fragment_content
+			output: slot_fragment_content,
+			statements: get_const_tags(node.const_tags)
 		});
 	}
 }
diff --git a/src/compiler/compile/render_ssr/handlers/shared/get_const_tags.ts b/src/compiler/compile/render_ssr/handlers/shared/get_const_tags.ts
new file mode 100644
index 0000000000..2c156609cd
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/shared/get_const_tags.ts
@@ -0,0 +1,17 @@
+import ConstTag from '../../../nodes/ConstTag';
+
+export function get_const_tags(const_tags: ConstTag[]) {
+  if (const_tags.length === 0) return null;
+  return {
+    type: 'VariableDeclaration',
+    kind: 'let',
+    declarations: const_tags.map(const_tag => {
+      const assignment = const_tag.node.expression;
+      return {
+        type: 'VariableDeclarator',
+        id: assignment.left,
+        init: assignment.right
+      };
+    })
+  };
+}
diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts
index 3e54ea55a3..63dc29eec6 100644
--- a/src/compiler/interfaces.ts
+++ b/src/compiler/interfaces.ts
@@ -1,4 +1,4 @@
-import { Node, Program } from 'estree';
+import { AssignmentExpression, Node, Program } from 'estree';
 import { SourceMap } from 'magic-string';
 
 interface BaseNode {
@@ -20,7 +20,7 @@ export interface Text extends BaseNode {
 }
 
 export interface MustacheTag extends BaseNode {
-	type: 'MustacheTag';
+	type: 'MustacheTag' | 'RawMustacheTag';
 	expression: Node;
 }
 
@@ -30,6 +30,16 @@ export interface Comment extends BaseNode {
 	ignores: string[];
 }
 
+export interface ConstTag extends BaseNode {
+	type: 'ConstTag';
+	expression: AssignmentExpression;
+}
+
+interface DebugTag extends BaseNode {
+	type: 'DebugTag';
+	identifiers: Node[]
+}
+
 export type DirectiveType = 'Action'
 | 'Animation'
 | 'Binding'
@@ -73,6 +83,8 @@ export interface Transition extends BaseDirective {
 export type Directive = BaseDirective | Transition;
 
 export type TemplateNode = Text
+| ConstTag
+| DebugTag
 | MustacheTag
 | BaseNode
 | Element
diff --git a/src/compiler/parse/state/mustache.ts b/src/compiler/parse/state/mustache.ts
index 584f9d6e9a..da9016a9df 100644
--- a/src/compiler/parse/state/mustache.ts
+++ b/src/compiler/parse/state/mustache.ts
@@ -375,6 +375,28 @@ export default function mustache(parser: Parser) {
 			type: 'DebugTag',
 			identifiers
 		});
+	} else if (parser.eat('@const')) {
+		// {@const a = b}
+		parser.require_whitespace();
+
+		const expression = read_expression(parser);
+
+		if (!(expression.type === 'AssignmentExpression' && expression.operator === '=')) {
+			parser.error({
+				code: 'invalid-const-args',
+				message: '{@const ...} must be an assignment.'
+			}, start);
+		}
+
+		parser.allow_whitespace();
+		parser.eat('}', true);
+
+		parser.current().children.push({
+			start,
+			end: parser.index,
+			type: 'ConstTag',
+			expression
+		});
 	} else {
 		const expression = read_expression(parser);
 
diff --git a/src/compiler/parse/utils/node.ts b/src/compiler/parse/utils/node.ts
index 0d39529b59..944bdb4c58 100644
--- a/src/compiler/parse/utils/node.ts
+++ b/src/compiler/parse/utils/node.ts
@@ -19,6 +19,8 @@ export function to_string(node: TemplateNode) {
 			return '{@html} block';
 		case 'DebugTag':
 			return '{@debug} block';
+		case 'ConstTag':
+			return '{@const} tag';
 		case 'Element':
 		case 'InlineComponent':
 		case 'Slot':
diff --git a/test/js/samples/debug-ssr-foo/expected.js b/test/js/samples/debug-ssr-foo/expected.js
index 69da37b2d9..e0a29f18de 100644
--- a/test/js/samples/debug-ssr-foo/expected.js
+++ b/test/js/samples/debug-ssr-foo/expected.js
@@ -7,8 +7,10 @@ const Component = create_ssr_component(($$result, $$props, $$bindings, slots) =>
 	if ($$props.things === void 0 && $$bindings.things && things !== void 0) $$bindings.things(things);
 	if ($$props.foo === void 0 && $$bindings.foo && foo !== void 0) $$bindings.foo(foo);
 
-	return `${each(things, thing => `<span>${escape(thing.name)}</span>
-	${debug(null, 7, 2, { foo })}`)}
+	return `${each(things, thing => {
+		return `<span>${escape(thing.name)}</span>
+	${debug(null, 7, 2, { foo })}`;
+	})}
 
 <p>foo: ${escape(foo)}</p>`;
 });
diff --git a/test/runtime/samples/const-tag-await-then-destructuring/_config.js b/test/runtime/samples/const-tag-await-then-destructuring/_config.js
new file mode 100644
index 0000000000..cb40e7c456
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then-destructuring/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: '<div>12 120 70, 30+4=34</div>',
+	async test({ component, target, assert }) {
+		component.promise1 = Promise.resolve({width: 5, height: 6});
+		component.promise2 = Promise.reject({width: 6, height: 7});
+
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 300 110, 50+6=56</div>
+			<div>42 420 130, 60+7=67</div>
+		`);
+
+		component.constant = 20;
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-await-then-destructuring/main.svelte b/test/runtime/samples/const-tag-await-then-destructuring/main.svelte
new file mode 100644
index 0000000000..ab450822c6
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then-destructuring/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	export let promise1 = {width: 3, height: 4};
+	export let promise2 = {width: 5, height: 7};
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+{#await promise1 then { width, height }}
+	{@const {area, volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/await}
+
+{#await promise2 catch { width, height }}
+	{@const {area, volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-await-then/_config.js b/test/runtime/samples/const-tag-await-then/_config.js
new file mode 100644
index 0000000000..cb40e7c456
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: '<div>12 120 70, 30+4=34</div>',
+	async test({ component, target, assert }) {
+		component.promise1 = Promise.resolve({width: 5, height: 6});
+		component.promise2 = Promise.reject({width: 6, height: 7});
+
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 300 110, 50+6=56</div>
+			<div>42 420 130, 60+7=67</div>
+		`);
+
+		component.constant = 20;
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-await-then/main.svelte b/test/runtime/samples/const-tag-await-then/main.svelte
new file mode 100644
index 0000000000..f8eed87115
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	export let promise1 = {width: 3, height: 4};
+	export let promise2 = {width: 5, height: 7};
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+{#await promise1 then box}
+	{@const {area, volume} = calculate(box.width, box.height, constant)}
+	{@const perimeter = (box.width + box.height) * constant}
+	{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}
+	<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+{/await}
+
+{#await promise2 catch box}
+	{@const {area, volume} = calculate(box.width, box.height, constant)}
+	{@const perimeter = (box.width + box.height) * constant}
+	{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}
+	<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-component/Component.svelte b/test/runtime/samples/const-tag-component/Component.svelte
new file mode 100644
index 0000000000..68ba82f245
--- /dev/null
+++ b/test/runtime/samples/const-tag-component/Component.svelte
@@ -0,0 +1,7 @@
+<script>
+  export let box;
+</script>
+
+<slot name="box1" {box} />
+<slot name="box2" width={box.width} height={box.height} />
+<slot {box} />
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-component/_config.js b/test/runtime/samples/const-tag-component/_config.js
new file mode 100644
index 0000000000..66399a06fa
--- /dev/null
+++ b/test/runtime/samples/const-tag-component/_config.js
@@ -0,0 +1,46 @@
+export default {
+	html: `
+		<div>12 120 70, 30+4=34</div>
+		<div>12 120 70, 30+4=34</div>
+		<div>12 120 70, 30+4=34</div>
+		<div slot="box1">
+			<div>12 120 70, 30+4=34</div>
+		</div>
+		<div slot="box2">
+			<div>12 120 70, 30+4=34</div>
+		</div>
+		<div>12 120 70, 30+4=34</div>
+		<div>12 120 70, 30+4=34</div>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>12 240 140, 60+4=64</div>
+			<div>12 240 140, 60+4=64</div>
+			<div slot="box1">
+				<div>12 240 140, 60+4=64</div>
+			</div>
+			<div slot="box2">
+				<div>12 240 140, 60+4=64</div>
+			</div>
+			<div>12 240 140, 60+4=64</div>
+			<div>12 240 140, 60+4=64</div>
+		`);
+
+		component.box = {width: 5, height: 6};
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 600 220, 100+6=106</div>
+			<div>30 600 220, 100+6=106</div>
+			<div>30 600 220, 100+6=106</div>
+			<div slot="box1">
+				<div>30 600 220, 100+6=106</div>
+			</div>
+			<div slot="box2">
+				<div>30 600 220, 100+6=106</div>
+			</div>
+			<div>30 600 220, 100+6=106</div>
+			<div>30 600 220, 100+6=106</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-component/main.svelte b/test/runtime/samples/const-tag-component/main.svelte
new file mode 100644
index 0000000000..1854c3fba9
--- /dev/null
+++ b/test/runtime/samples/const-tag-component/main.svelte
@@ -0,0 +1,60 @@
+<script>
+	import Component from './Component.svelte';
+	export let box = {width: 3, height: 4};
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+<Component {box}>
+	<svelte:fragment slot="box1" let:box>
+		{@const {area, volume} = calculate(box.width, box.height, constant)}
+		{@const perimeter = (box.width + box.height) * constant}
+		{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}	
+		<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+	</svelte:fragment>
+
+	<svelte:fragment slot="box2" let:width let:height>
+		{@const {area, volume} = calculate(width, height, constant)}
+		{@const perimeter = (width + height) * constant}
+		{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}	
+		<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+	</svelte:fragment>
+
+	<svelte:fragment let:box={{width, height}}>
+		{@const {area, volume} = calculate(width, height, constant)}
+		{@const perimeter = (width + height) * constant}
+		{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}	
+		<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+	</svelte:fragment>
+</Component>
+
+<Component {box} let:box>
+	<div slot="box1" let:box>
+		{@const {area, volume} = calculate(box.width, box.height, constant)}
+		{@const perimeter = (box.width + box.height) * constant}
+		{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}	
+		<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+	</div>
+
+	<div slot="box2" let:width let:height>
+		{@const {area, volume} = calculate(width, height, constant)}
+		{@const perimeter = (width + height) * constant}
+		{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}	
+		<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+	</div>
+
+	{@const {area, volume} = calculate(box.width, box.height, constant)}
+	{@const perimeter = (box.width + box.height) * constant}
+	{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}	
+	<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+</Component>
+
+<Component {box} let:box={{width, height}}>
+	{@const {area, volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}	
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+</Component>
diff --git a/test/runtime/samples/const-tag-dependencies/_config.js b/test/runtime/samples/const-tag-dependencies/_config.js
new file mode 100644
index 0000000000..5cbb2da587
--- /dev/null
+++ b/test/runtime/samples/const-tag-dependencies/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div>7</div>
+	`,
+	async test({ component, target, assert }) {
+		component.a = 5;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>9</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-dependencies/main.svelte b/test/runtime/samples/const-tag-dependencies/main.svelte
new file mode 100644
index 0000000000..cce3b0c1f7
--- /dev/null
+++ b/test/runtime/samples/const-tag-dependencies/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let value = 4;
+	export let a = 3;
+	export let b = 4;
+</script>
+
+{#each [value] as n}
+  {@const ab = a + b}
+	<div>{ab}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-each-destructure/_config.js b/test/runtime/samples/const-tag-each-destructure/_config.js
new file mode 100644
index 0000000000..00f8b31540
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-destructure/_config.js
@@ -0,0 +1,30 @@
+export default {
+	html: `
+		<div>12 120 70, 30+4=34</div>
+		<div>35 350 120, 50+7=57</div>
+		<div>48 480 140, 60+8=68</div>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>35 700 240, 100+7=107</div>
+			<div>48 960 280, 120+8=128</div>
+		`);
+
+		component.boxes = [
+			{width: 3, height: 4},
+			{width: 4, height: 5},
+			{width: 5, height: 6},
+			{width: 6, height: 7}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>20 400 180, 80+5=85</div>
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-destructure/main.svelte b/test/runtime/samples/const-tag-each-destructure/main.svelte
new file mode 100644
index 0000000000..7f0391d5e6
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-destructure/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let boxes = [
+		{width: 3, height: 4},
+		{width: 5, height: 7},
+		{width: 6, height: 8},
+	];
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+{#each boxes as { width, height }}
+	{@const {area, volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-each/_config.js b/test/runtime/samples/const-tag-each/_config.js
new file mode 100644
index 0000000000..00f8b31540
--- /dev/null
+++ b/test/runtime/samples/const-tag-each/_config.js
@@ -0,0 +1,30 @@
+export default {
+	html: `
+		<div>12 120 70, 30+4=34</div>
+		<div>35 350 120, 50+7=57</div>
+		<div>48 480 140, 60+8=68</div>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>35 700 240, 100+7=107</div>
+			<div>48 960 280, 120+8=128</div>
+		`);
+
+		component.boxes = [
+			{width: 3, height: 4},
+			{width: 4, height: 5},
+			{width: 5, height: 6},
+			{width: 6, height: 7}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>20 400 180, 80+5=85</div>
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each/main.svelte b/test/runtime/samples/const-tag-each/main.svelte
new file mode 100644
index 0000000000..004f81cd83
--- /dev/null
+++ b/test/runtime/samples/const-tag-each/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let boxes = [
+		{width: 3, height: 4},
+		{width: 5, height: 7},
+		{width: 6, height: 8},
+	];
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+{#each boxes as box}
+	{@const {area, volume} = calculate(box.width, box.height, constant)}
+	{@const perimeter = (box.width + box.height) * constant}
+	{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}
+	<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-hoisting/_config.js b/test/runtime/samples/const-tag-hoisting/_config.js
new file mode 100644
index 0000000000..f8f4a5c85e
--- /dev/null
+++ b/test/runtime/samples/const-tag-hoisting/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div>4 ^ 4 = 256</div>
+	`,
+	async test({ component, target, assert }) {
+		component.value = 3;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>3 ^ 4 = 81</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-hoisting/main.svelte b/test/runtime/samples/const-tag-hoisting/main.svelte
new file mode 100644
index 0000000000..49fce93274
--- /dev/null
+++ b/test/runtime/samples/const-tag-hoisting/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let value = 4;
+</script>
+
+{#each [value] as n}
+	<div>{n} ^ 4 = {hypercubed}</div>
+
+	{@const squared = n * n}
+	{@const cubed = squared * n}
+	{@const hypercubed = cubed * n}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-ordering/_config.js b/test/runtime/samples/const-tag-ordering/_config.js
new file mode 100644
index 0000000000..f8f4a5c85e
--- /dev/null
+++ b/test/runtime/samples/const-tag-ordering/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div>4 ^ 4 = 256</div>
+	`,
+	async test({ component, target, assert }) {
+		component.value = 3;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>3 ^ 4 = 81</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-ordering/main.svelte b/test/runtime/samples/const-tag-ordering/main.svelte
new file mode 100644
index 0000000000..49fce93274
--- /dev/null
+++ b/test/runtime/samples/const-tag-ordering/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let value = 4;
+</script>
+
+{#each [value] as n}
+	<div>{n} ^ 4 = {hypercubed}</div>
+
+	{@const squared = n * n}
+	{@const cubed = squared * n}
+	{@const hypercubed = cubed * n}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-shadow/_config.js b/test/runtime/samples/const-tag-shadow/_config.js
new file mode 100644
index 0000000000..312235f113
--- /dev/null
+++ b/test/runtime/samples/const-tag-shadow/_config.js
@@ -0,0 +1,43 @@
+export default {
+	html: `
+		<b>7</b>
+		<u>11</u>
+		<u>15</u>
+		<i>7</i>
+		<b>19</b>
+		<u>23</u>
+		<u>27</u>
+		<i>19</i>
+	`,
+	async test({ component, target, assert }) {
+		component.numbers = [
+			{
+				a: 4,
+				b: 5, 
+				children: [
+					{ a: 6, b: 7 },
+					{ a: 8, b: 9 }
+				]
+			},
+			{
+				a: 10,
+				b: 11, 
+				children: [
+					{ a: 12, b: 13 },
+					{ a: 14, b: 15 }
+				]
+			}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<b>9</b>
+			<u>13</u>
+			<u>17</u>
+			<i>9</i>
+			<b>21</b>
+			<u>25</u>
+			<u>29</u>
+			<i>21</i>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-shadow/main.svelte b/test/runtime/samples/const-tag-shadow/main.svelte
new file mode 100644
index 0000000000..725121c733
--- /dev/null
+++ b/test/runtime/samples/const-tag-shadow/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	export let numbers = [
+		{
+			a: 3,
+			b: 4, 
+			children: [
+				{ a: 5, b: 6 },
+				{ a: 7, b: 8 }
+			]
+		},
+		{
+			a: 9,
+			b: 10, 
+			children: [
+				{ a: 11, b: 12 },
+				{ a: 13, b: 14 }
+			]
+		}
+	];
+
+</script>
+
+{#each numbers as {a, b, children}}
+	{@const ab = a + b}
+	<b>{ab}</b>
+	{#each children as {a, b}}
+		{@const ab = a + b}
+		<u>{ab}</u>
+	{/each}
+	<i>{ab}</i>
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-conflict-1/errors.json b/test/validator/samples/const-tag-conflict-1/errors.json
new file mode 100644
index 0000000000..59c72eccaf
--- /dev/null
+++ b/test/validator/samples/const-tag-conflict-1/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-declaration",
+		"message": "'a' has already been declared",
+		"start": { "line": 7, "column": 2, "character": 84 },
+		"end": { "line": 7, "column": 19, "character": 101 },
+		"pos": 84
+	}
+]
diff --git a/test/validator/samples/const-tag-conflict-1/input.svelte b/test/validator/samples/const-tag-conflict-1/input.svelte
new file mode 100644
index 0000000000..6633eeacdf
--- /dev/null
+++ b/test/validator/samples/const-tag-conflict-1/input.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let array;
+</script>
+
+{#each array as item}
+  {@const a = item}
+  {@const a = item}
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-conflict-2/errors.json b/test/validator/samples/const-tag-conflict-2/errors.json
new file mode 100644
index 0000000000..11e2535091
--- /dev/null
+++ b/test/validator/samples/const-tag-conflict-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-declaration",
+		"message": "'item' has already been declared",
+		"start": { "line": 6, "column": 2, "character": 64 },
+		"end": { "line": 6, "column": 21, "character": 83 },
+		"pos": 64
+	}
+]
diff --git a/test/validator/samples/const-tag-conflict-2/input.svelte b/test/validator/samples/const-tag-conflict-2/input.svelte
new file mode 100644
index 0000000000..2be7207691
--- /dev/null
+++ b/test/validator/samples/const-tag-conflict-2/input.svelte
@@ -0,0 +1,7 @@
+<script>
+  export let array;
+</script>
+
+{#each array as item}
+  {@const item = 123}
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-cyclical/errors.json b/test/validator/samples/const-tag-cyclical/errors.json
new file mode 100644
index 0000000000..1436747798
--- /dev/null
+++ b/test/validator/samples/const-tag-cyclical/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "cyclical-const-tags",
+		"message": "Cyclical dependency detected: b → c → b",
+		"start": { "line": 6, "column": 2, "character": 61 },
+		"end": { "line": 6, "column": 20, "character": 79 },
+		"pos": 61
+	}
+]
diff --git a/test/validator/samples/const-tag-cyclical/input.svelte b/test/validator/samples/const-tag-cyclical/input.svelte
new file mode 100644
index 0000000000..2f694be808
--- /dev/null
+++ b/test/validator/samples/const-tag-cyclical/input.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let array;
+</script>
+
+{#each array as a}
+  {@const b = a + c}
+  {@const c = b + a}
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-out-of-scope/input.svelte b/test/validator/samples/const-tag-out-of-scope/input.svelte
new file mode 100644
index 0000000000..d1c2723e22
--- /dev/null
+++ b/test/validator/samples/const-tag-out-of-scope/input.svelte
@@ -0,0 +1,10 @@
+<script>
+  export let array;
+</script>
+
+{#each array as a}
+  {@const b = a + 1}
+  <div />
+{/each}
+
+{b}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-out-of-scope/warnings.json b/test/validator/samples/const-tag-out-of-scope/warnings.json
new file mode 100644
index 0000000000..c85b417fe4
--- /dev/null
+++ b/test/validator/samples/const-tag-out-of-scope/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "missing-declaration",
+		"message": "'b' is not defined",
+		"pos": 100,
+		"start": {
+			"character": 100,
+			"column": 1,
+			"line": 10
+		},
+		"end": {
+			"character": 101,
+			"column": 2,
+			"line": 10
+		}
+	}
+]
diff --git a/test/validator/samples/const-tag-placement-1/errors.json b/test/validator/samples/const-tag-placement-1/errors.json
new file mode 100644
index 0000000000..52de84e2be
--- /dev/null
+++ b/test/validator/samples/const-tag-placement-1/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-placement",
+		"message": "{@const} must be the immediate child of {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>",
+		"start": { "line": 5, "column": 0, "character": 36 },
+		"end": { "line": 5, "column": 18, "character": 54 },
+		"pos": 36
+	}
+]
diff --git a/test/validator/samples/const-tag-placement-1/input.svelte b/test/validator/samples/const-tag-placement-1/input.svelte
new file mode 100644
index 0000000000..14ea3085e7
--- /dev/null
+++ b/test/validator/samples/const-tag-placement-1/input.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let a;
+</script>
+
+{@const b = a + 1}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-placement-2/errors.json b/test/validator/samples/const-tag-placement-2/errors.json
new file mode 100644
index 0000000000..005b3ff8b7
--- /dev/null
+++ b/test/validator/samples/const-tag-placement-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-placement",
+		"message": "{@const} must be the immediate child of {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>",
+		"start": { "line": 6, "column": 2, "character": 46 },
+		"end": { "line": 6, "column": 20, "character": 64 },
+		"pos": 46
+	}
+]
diff --git a/test/validator/samples/const-tag-placement-2/input.svelte b/test/validator/samples/const-tag-placement-2/input.svelte
new file mode 100644
index 0000000000..a843f9d58f
--- /dev/null
+++ b/test/validator/samples/const-tag-placement-2/input.svelte
@@ -0,0 +1,7 @@
+<script>
+  export let a;
+</script>
+
+{#if a}
+  {@const b = a + 1}
+{/if}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-placement-3/errors.json b/test/validator/samples/const-tag-placement-3/errors.json
new file mode 100644
index 0000000000..cc0ba4d74d
--- /dev/null
+++ b/test/validator/samples/const-tag-placement-3/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-placement",
+		"message": "{@const} must be the immediate child of {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>",
+		"start": { "line": 7, "column": 4, "character": 63 },
+		"end": { "line": 7, "column": 18, "character": 77 },
+		"pos": 63
+	}
+]
diff --git a/test/validator/samples/const-tag-placement-3/input.svelte b/test/validator/samples/const-tag-placement-3/input.svelte
new file mode 100644
index 0000000000..2519482a98
--- /dev/null
+++ b/test/validator/samples/const-tag-placement-3/input.svelte
@@ -0,0 +1,9 @@
+<script>
+  export let a;
+</script>
+
+{#each a as i}
+  <div>
+    {@const b = i}
+  </div>
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-readonly-1/errors.json b/test/validator/samples/const-tag-readonly-1/errors.json
new file mode 100644
index 0000000000..ed60c529fd
--- /dev/null
+++ b/test/validator/samples/const-tag-readonly-1/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-update",
+		"message": "'b' is declared using {@const ...} and is read-only",
+		"start": { "line": 7, "column": 26, "character": 106 },
+		"end": { "line": 7, "column": 30, "character": 110 },
+		"pos": 106
+	}
+]
diff --git a/test/validator/samples/const-tag-readonly-1/input.svelte b/test/validator/samples/const-tag-readonly-1/input.svelte
new file mode 100644
index 0000000000..b5a37c8608
--- /dev/null
+++ b/test/validator/samples/const-tag-readonly-1/input.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let array;
+</script>
+
+{#each array as a}
+  {@const b = a + 1}
+  <button on:click={() => b ++} />
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-readonly-2/errors.json b/test/validator/samples/const-tag-readonly-2/errors.json
new file mode 100644
index 0000000000..746a21e86a
--- /dev/null
+++ b/test/validator/samples/const-tag-readonly-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-binding",
+		"message": "Cannot bind to a variable declared with {@const ...}",
+		"start": { "line": 7, "column": 9, "character": 89 },
+		"end": { "line": 7, "column": 23, "character": 103 },
+		"pos": 89
+	}
+]
diff --git a/test/validator/samples/const-tag-readonly-2/input.svelte b/test/validator/samples/const-tag-readonly-2/input.svelte
new file mode 100644
index 0000000000..466aac9804
--- /dev/null
+++ b/test/validator/samples/const-tag-readonly-2/input.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let array;
+</script>
+
+{#each array as a}
+  {@const b = a + 1}
+  <input bind:value={b} />
+{/each}
\ No newline at end of file

From 0f31fb034b936ce526c78f835e78a6f1fd3df82d Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 11 Jan 2022 17:10:36 -0500
Subject: [PATCH 35/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7d8b69678..c4161ce66b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,10 @@
 
 ## Unreleased
 
-* Add style directives ([RFC #42](https://github.com/sveltejs/rfcs/pull/42))
-* Fix hydration when using `@html` ([#7115](https://github.com/sveltejs/svelte/issues/7115))
+* Implement `{@const}` tag ([RFC #33](https://github.com/sveltejs/rfcs/pull/33), [#6413](https://github.com/sveltejs/svelte/pull/6413))
+* Implement `style:` directive ([RFC #42](https://github.com/sveltejs/rfcs/pull/42), [#5923](https://github.com/sveltejs/svelte/pull/5923))
 * Fix style manager conflicts when using multiple Svelte instances ([#7026](https://github.com/sveltejs/svelte/issues/7026))
+* Fix hydration when using `{@html}` ([#7115](https://github.com/sveltejs/svelte/issues/7115))
 
 ## 3.45.0
 

From 4d1d1861ebfcd63eedcd82a3dda7414800e561f4 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Tue, 11 Jan 2022 17:11:09 -0500
Subject: [PATCH 36/66] -> v3.46.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 c4161ce66b..c63e6b72bc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Svelte changelog
 
-## Unreleased
+## 3.46.0
 
 * Implement `{@const}` tag ([RFC #33](https://github.com/sveltejs/rfcs/pull/33), [#6413](https://github.com/sveltejs/svelte/pull/6413))
 * Implement `style:` directive ([RFC #42](https://github.com/sveltejs/rfcs/pull/42), [#5923](https://github.com/sveltejs/svelte/pull/5923))
diff --git a/package-lock.json b/package-lock.json
index c0f623415d..a48382d854 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.45.0",
+  "version": "3.46.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.45.0",
+      "version": "3.46.0",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index 7d36c10971..35efd6bf14 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.45.0",
+  "version": "3.46.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From c67f8ef14c981f3a2a1736478a9742b006bf35ce Mon Sep 17 00:00:00 2001
From: GHOST <ghostdevbusiness@gmail.com>
Date: Wed, 12 Jan 2022 10:42:13 +0000
Subject: [PATCH 37/66] [fix] handle kebab case style directives (#7123)

fixes #7122
---
 .../render_dom/wrappers/Element/index.ts       |  2 +-
 .../_config.js                                 | 18 ++++++++++++++++++
 .../main.svelte                                | 11 +++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-string-variable-kebab-case/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 59d06b8c92..12cf7aaa1f 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -923,7 +923,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}`);
+				cached_snippet = block.get_unique_name(`style_${name.replace(/-/g, '_')}`);
 				block.add_variable(cached_snippet, snippet);
 			}
 
diff --git a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js
new file mode 100644
index 0000000000..3bd6d38ea5
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<div style="background-image: url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png); --css-variable: rgba(0, 0, 0, 1);"></div>
+	`,
+
+	test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const styles = window.getComputedStyle(div);
+
+		assert.equal(styles['background-image'], 'url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png)');
+		assert.equal(styles.getPropertyValue('--css-variable'), 'rgba(0, 0, 0, 1)');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<div style="background-image: url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png); --css-variable: rgba(0, 0, 0, 1);"></div>'
+		);
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte
new file mode 100644
index 0000000000..dbfba08d64
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let url =
+		"https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png";
+
+	let alpha = 1;
+</script>
+
+<div
+	style:background-image="url({url})"
+	style:--css-variable="rgba(0, 0, 0, {alpha})"
+/>

From 4ae20d7fdfa66cefafbf205b41b5bc41bf05c427 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 12 Jan 2022 11:43:25 +0100
Subject: [PATCH 38/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c63e6b72bc..c7dcadb647 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Handle kebab case style directives ([#7122](https://github.com/sveltejs/svelte/issues/7122))
+
 ## 3.46.0
 
 * Implement `{@const}` tag ([RFC #33](https://github.com/sveltejs/rfcs/pull/33), [#6413](https://github.com/sveltejs/svelte/pull/6413))

From 7044a32a2b687ce593bb56f82d7eb8336eda8a7c Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 12 Jan 2022 21:12:50 +0100
Subject: [PATCH 39/66] [fix] adjust style directive AST (#7127)

- deduplicate type name: Is now "StyleDirective"
- Don't transform value array to template literal in the AST phase but in the compiler phase. This ensures other tools know what the raw output was and that start/end positions are available
---
 src/compiler/compile/nodes/Element.ts         |   8 +-
 src/compiler/compile/nodes/Style.ts           |  22 --
 src/compiler/compile/nodes/StyleDirective.ts  |  39 ++
 src/compiler/compile/nodes/interfaces.ts      |   4 +-
 .../utils/nodes_to_template_literal.ts        |  37 ++
 src/compiler/interfaces.ts                    |  11 +-
 src/compiler/parse/state/tag.ts               |  63 +---
 .../output.json                               |  12 +-
 .../input.svelte                              |   8 +-
 .../output.json                               | 346 +++++++++++++++++-
 .../attribute-style-directive/output.json     |  40 +-
 11 files changed, 474 insertions(+), 116 deletions(-)
 delete mode 100644 src/compiler/compile/nodes/Style.ts
 create mode 100644 src/compiler/compile/nodes/StyleDirective.ts
 create mode 100644 src/compiler/compile/utils/nodes_to_template_literal.ts

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index c6b53b2e0d..92a87dd6f8 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -7,7 +7,7 @@ import Transition from './Transition';
 import Animation from './Animation';
 import Action from './Action';
 import Class from './Class';
-import Style from './Style';
+import StyleDirective from './StyleDirective';
 import Text from './Text';
 import { namespaces } from '../../utils/namespaces';
 import map_children from './shared/map_children';
@@ -181,7 +181,7 @@ export default class Element extends Node {
 	actions: Action[] = [];
 	bindings: Binding[] = [];
 	classes: Class[] = [];
-	styles: Style[] = [];
+	styles: StyleDirective[] = [];
 	handlers: EventHandler[] = [];
 	lets: Let[] = [];
 	intro?: Transition = null;
@@ -265,8 +265,8 @@ export default class Element extends Node {
 					this.classes.push(new Class(component, this, scope, node));
 					break;
 
-				case 'Style':
-					this.styles.push(new Style(component, this, scope, node));
+				case 'StyleDirective':
+					this.styles.push(new StyleDirective(component, this, scope, node));
 					break;
 
 				case 'EventHandler':
diff --git a/src/compiler/compile/nodes/Style.ts b/src/compiler/compile/nodes/Style.ts
deleted file mode 100644
index e922f6f578..0000000000
--- a/src/compiler/compile/nodes/Style.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import Node from './shared/Node';
-import Expression from './shared/Expression';
-import { TemplateNode } from '../../interfaces';
-import TemplateScope from './shared/TemplateScope';
-import Component from '../Component';
-
-export default class Style extends Node {
-	type: 'Style';
-	name: string;
-	expression: Expression;
-	should_cache: boolean;
-
-	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
-		super(component, parent, scope, info);
-
-		this.name = info.name;
-
-		this.expression = new Expression(component, this, scope, info.expression);
-
-		this.should_cache = info.expression.type === 'TemplateLiteral' && info.expression.expressions.length > 0;
-	}
-}
diff --git a/src/compiler/compile/nodes/StyleDirective.ts b/src/compiler/compile/nodes/StyleDirective.ts
new file mode 100644
index 0000000000..ea340cf2dc
--- /dev/null
+++ b/src/compiler/compile/nodes/StyleDirective.ts
@@ -0,0 +1,39 @@
+import { TemplateNode } from '../../interfaces';
+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';
+
+export default class StyleDirective extends Node {
+	type: 'StyleDirective';
+	name: string;
+	expression: Expression;
+	should_cache: boolean;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.name = info.name;
+
+		// Convert the value array to an expression so it's easier to handle
+		// the StyleDirective going forward.
+		if (info.value === true || (info.value.length === 1 && info.value[0].type === 'MustacheTag')) {
+			const identifier = info.value === true
+				? {
+					type: 'Identifier',
+					start: info.end - info.name.length,
+					end: info.end,
+					name: info.name
+				} as any
+				: info.value[0].expression;
+			this.expression = new Expression(component, this, scope, identifier);
+			this.should_cache = false;
+		} else {
+			const raw_expression = nodes_to_template_literal(info.value);
+			this.expression = new Expression(component, this, scope, raw_expression);
+			this.should_cache = raw_expression.expressions.length > 0;
+		}
+
+	}
+}
diff --git a/src/compiler/compile/nodes/interfaces.ts b/src/compiler/compile/nodes/interfaces.ts
index b038cf62a7..2c636b36f3 100644
--- a/src/compiler/compile/nodes/interfaces.ts
+++ b/src/compiler/compile/nodes/interfaces.ts
@@ -8,7 +8,7 @@ import Binding from './Binding';
 import Body from './Body';
 import CatchBlock from './CatchBlock';
 import Class from './Class';
-import Style from './Style';
+import StyleDirective from './StyleDirective';
 import Comment from './Comment';
 import ConstTag from './ConstTag';
 import DebugTag from './DebugTag';
@@ -63,7 +63,7 @@ export type INode = Action
 | RawMustacheTag
 | Slot
 | SlotTemplate
-| Style
+| StyleDirective
 | Tag
 | Text
 | ThenBlock
diff --git a/src/compiler/compile/utils/nodes_to_template_literal.ts b/src/compiler/compile/utils/nodes_to_template_literal.ts
new file mode 100644
index 0000000000..46da953261
--- /dev/null
+++ b/src/compiler/compile/utils/nodes_to_template_literal.ts
@@ -0,0 +1,37 @@
+import { TemplateElement, TemplateLiteral } from 'estree';
+import { MustacheTag, Text } from '../../interfaces';
+
+/**
+ * Transforms a list of Text and MustacheTags into a TemplateLiteral expression.
+ * Start/End positions on the elements of the expression are not set.
+ */
+export function nodes_to_template_literal(value: Array<Text | MustacheTag>): TemplateLiteral {
+    const literal: TemplateLiteral  = {
+        type: 'TemplateLiteral',
+        expressions: [],
+        quasis: []
+    };
+
+    let quasi: TemplateElement  = {
+        type: 'TemplateElement',
+        value: { raw: '', cooked: null },
+        tail: false
+    };
+
+    value.forEach((node) => {
+        if (node.type === 'Text') {
+            quasi.value.raw += node.raw;
+        } else if (node.type === 'MustacheTag') {
+            literal.quasis.push(quasi);
+            literal.expressions.push(node.expression as any);
+            quasi = {
+                type: 'TemplateElement',
+                value: { raw: '', cooked: null },
+                tail: false
+            };
+        }
+    });
+    quasi.tail = true;
+    literal.quasis.push(quasi);
+    return literal;
+}
diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts
index 63dc29eec6..a9920750f9 100644
--- a/src/compiler/interfaces.ts
+++ b/src/compiler/interfaces.ts
@@ -44,13 +44,18 @@ export type DirectiveType = 'Action'
 | 'Animation'
 | 'Binding'
 | 'Class'
-| 'Style'
+| 'StyleDirective'
 | 'EventHandler'
 | 'Let'
 | 'Ref'
 | 'Transition';
 
 interface BaseDirective extends BaseNode {
+	type: DirectiveType;
+	name: string;
+}
+
+interface BaseExpressionDirective extends BaseDirective {
 	type: DirectiveType;
 	expression: null | Node;
 	name: string;
@@ -74,13 +79,13 @@ export interface SpreadAttribute extends BaseNode {
 	expression: Node;
 }
 
-export interface Transition extends BaseDirective {
+export interface Transition extends BaseExpressionDirective {
 	type: 'Transition';
 	intro: boolean;
 	outro: boolean;
 }
 
-export type Directive = BaseDirective | Transition;
+export type Directive = BaseDirective | BaseExpressionDirective | Transition;
 
 export type TemplateNode = Text
 | ConstTag
diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
index 81d8fff1c4..7de0f88413 100644
--- a/src/compiler/parse/state/tag.ts
+++ b/src/compiler/parse/state/tag.ts
@@ -1,14 +1,13 @@
-import { TemplateLiteral, TemplateElement, Expression } from 'estree';
+import { Directive, DirectiveType, TemplateNode, Text } from '../../interfaces';
+import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore';
+import fuzzymatch from '../../utils/fuzzymatch';
+import { is_void } from '../../utils/names';
+import parser_errors from '../errors';
+import { Parser } from '../index';
 import read_expression from '../read/expression';
 import read_script from '../read/script';
 import read_style from '../read/style';
-import { decode_character_references, closing_tag_omitted } from '../utils/html';
-import { is_void } from '../../utils/names';
-import { Parser } from '../index';
-import { Directive, DirectiveType, TemplateNode, Text, MustacheTag } from '../../interfaces';
-import fuzzymatch from '../../utils/fuzzymatch';
-import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore';
-import parser_errors from '../errors';
+import { closing_tag_omitted, decode_character_references } from '../utils/html';
 
 // eslint-disable-next-line no-useless-escape
 const valid_tag_name = /^\!?[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/;
@@ -271,36 +270,6 @@ function read_tag_name(parser: Parser) {
 	return name;
 }
 
-function node_to_template_literal(value: Array<Text | MustacheTag>): TemplateLiteral {
-	let quasi: TemplateElement = {
-		type: 'TemplateElement',
-		value: { raw: '', cooked: null },
-		tail: false
-	};
-	const literal: TemplateLiteral = {
-		type: 'TemplateLiteral',
-		expressions: [],
-		quasis: []
-	};
-
-	value.forEach((node) => {
-		if (node.type === 'Text') {
-			quasi.value.raw += node.raw;
-		} else if (node.type === 'MustacheTag') {
-			literal.quasis.push(quasi);
-			literal.expressions.push(node.expression as Expression);
-			quasi = {
-				type: 'TemplateElement',
-				value: { raw: '', cooked: null },
-				tail: false
-			};
-		}
-	});
-	quasi.tail = true;
-	literal.quasis.push(quasi);
-	return literal;
-}
-
 function read_attribute(parser: Parser, unique_names: Set<string>) {
 	const start = parser.index;
 
@@ -396,14 +365,22 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 			parser.error(parser_errors.invalid_ref_directive(directive_name), start);
 		}
 
+		if (type === 'StyleDirective') {
+			return {
+				start,
+				end,
+				type,
+				name: directive_name,
+				value
+			};
+		}
+
 		const first_value = value[0];
 		let expression = null;
 
 		if (first_value) {
 			const attribute_contains_text = (value as any[]).length > 1 || first_value.type === 'Text';
-			if (type === 'Style') {
-				expression = attribute_contains_text ? node_to_template_literal(value as Array<Text | MustacheTag>) : first_value.expression;
-			} else if (attribute_contains_text) {
+			if (attribute_contains_text) {
 				parser.error(parser_errors.invalid_directive_value, first_value.start);
 			} else {
 				expression = first_value.expression;
@@ -426,7 +403,7 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 		}
 
 		// Directive name is expression, e.g. <p class:isRed />
-		if (!directive.expression && (type === 'Binding' || type === 'Class' || type === 'Style')) {
+		if (!directive.expression && (type === 'Binding' || type === 'Class')) {
 			directive.expression = {
 				start: directive.start + colon_index + 1,
 				end: directive.end,
@@ -454,7 +431,7 @@ function get_directive_type(name: string): DirectiveType {
 	if (name === 'animate') return 'Animation';
 	if (name === 'bind') return 'Binding';
 	if (name === 'class') return 'Class';
-	if (name === 'style') return 'Style';
+	if (name === 'style') return 'StyleDirective';
 	if (name === 'on') return 'EventHandler';
 	if (name === 'let') return 'Let';
 	if (name === 'ref') return 'Ref';
diff --git a/test/parser/samples/attribute-style-directive-shorthand/output.json b/test/parser/samples/attribute-style-directive-shorthand/output.json
index d4e81b6e4b..ac658408e6 100644
--- a/test/parser/samples/attribute-style-directive-shorthand/output.json
+++ b/test/parser/samples/attribute-style-directive-shorthand/output.json
@@ -13,19 +13,13 @@
 					{
 						"start": 5,
 						"end": 16,
-						"type": "Style",
+						"type": "StyleDirective",
 						"name": "color",
-						"modifiers": [],
-						"expression": {
-							"start": 11,
-							"end": 16,
-							"name": "color",
-							"type": "Identifier"
-						}
+						"value": true
 					}
 				],
 				"children": []
 			}
 		]
 	}
-}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive-string/input.svelte b/test/parser/samples/attribute-style-directive-string/input.svelte
index b2eb6bfef8..dd8ec8dc94 100644
--- a/test/parser/samples/attribute-style-directive-string/input.svelte
+++ b/test/parser/samples/attribute-style-directive-string/input.svelte
@@ -1 +1,7 @@
-<div style:color="red"></div>
\ No newline at end of file
+<div style:color="red"></div>
+<div style:color='red'></div>
+<div style:color=red></div>
+<div style:color="red{variable}"></div>
+<div style:color='red{variable}'></div>
+<div style:color=red{variable}></div>
+<div style:color={`template${literal}`}></div>
\ 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 4cf2bd30c2..e81e7be3c9 100644
--- a/test/parser/samples/attribute-style-directive-string/output.json
+++ b/test/parser/samples/attribute-style-directive-string/output.json
@@ -1,7 +1,7 @@
 {
 	"html": {
 		"start": 0,
-		"end": 29,
+		"end": 252,
 		"type": "Fragment",
 		"children": [
 			{
@@ -13,23 +13,339 @@
 					{
 						"start": 5,
 						"end": 22,
-						"type": "Style",
+						"type": "StyleDirective",
 						"name": "color",
-						"modifiers": [],
-						"expression": {
-							"type": "TemplateLiteral",
-							"expressions": [],
-							"quasis": [
-								{
-									"type": "TemplateElement",
-									"value": {
-										"raw": "red",
-										"cooked": null
+						"value": [
+							{
+								"start": 18,
+								"end": 21,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 29,
+				"end": 30,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 30,
+				"end": 59,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 35,
+						"end": 52,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 48,
+								"end": 51,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 59,
+				"end": 60,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 60,
+				"end": 87,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 65,
+						"end": 80,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 77,
+								"end": 80,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 87,
+				"end": 88,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 88,
+				"end": 127,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 93,
+						"end": 120,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 106,
+								"end": 109,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							},
+							{
+								"start": 109,
+								"end": 119,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 110,
+									"end": 118,
+									"loc": {
+										"start": {
+											"line": 4,
+											"column": 22
+										},
+										"end": {
+											"line": 4,
+											"column": 30
+										}
+									},
+									"name": "variable"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 127,
+				"end": 128,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 128,
+				"end": 167,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 133,
+						"end": 160,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 146,
+								"end": 149,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							},
+							{
+								"start": 149,
+								"end": 159,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 150,
+									"end": 158,
+									"loc": {
+										"start": {
+											"line": 5,
+											"column": 22
+										},
+										"end": {
+											"line": 5,
+											"column": 30
+										}
+									},
+									"name": "variable"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 167,
+				"end": 168,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 168,
+				"end": 205,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 173,
+						"end": 198,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 185,
+								"end": 188,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							},
+							{
+								"start": 188,
+								"end": 198,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 189,
+									"end": 197,
+									"loc": {
+										"start": {
+											"line": 6,
+											"column": 21
+										},
+										"end": {
+											"line": 6,
+											"column": 29
+										}
+									},
+									"name": "variable"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 205,
+				"end": 206,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 206,
+				"end": 252,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 211,
+						"end": 245,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 223,
+								"end": 245,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "TemplateLiteral",
+									"start": 224,
+									"end": 244,
+									"loc": {
+										"start": {
+											"line": 7,
+											"column": 18
+										},
+										"end": {
+											"line": 7,
+											"column": 38
+										}
 									},
-									"tail": true
+									"expressions": [
+										{
+											"type": "Identifier",
+											"start": 235,
+											"end": 242,
+											"loc": {
+												"start": {
+													"line": 7,
+													"column": 29
+												},
+												"end": {
+													"line": 7,
+													"column": 36
+												}
+											},
+											"name": "literal"
+										}
+									],
+									"quasis": [
+										{
+											"type": "TemplateElement",
+											"start": 225,
+											"end": 233,
+											"loc": {
+												"start": {
+													"line": 7,
+													"column": 19
+												},
+												"end": {
+													"line": 7,
+													"column": 27
+												}
+											},
+											"value": {
+												"raw": "template",
+												"cooked": "template"
+											},
+											"tail": false
+										},
+										{
+											"type": "TemplateElement",
+											"start": 243,
+											"end": 243,
+											"loc": {
+												"start": {
+													"line": 7,
+													"column": 37
+												},
+												"end": {
+													"line": 7,
+													"column": 37
+												}
+											},
+											"value": {
+												"raw": "",
+												"cooked": ""
+											},
+											"tail": true
+										}
+									]
 								}
-							]
-						}
+							}
+						]
 					}
 				],
 				"children": []
diff --git a/test/parser/samples/attribute-style-directive/output.json b/test/parser/samples/attribute-style-directive/output.json
index 36906045ce..f36ce6b01e 100644
--- a/test/parser/samples/attribute-style-directive/output.json
+++ b/test/parser/samples/attribute-style-directive/output.json
@@ -13,25 +13,31 @@
 					{
 						"start": 5,
 						"end": 26,
-						"type": "Style",
+						"type": "StyleDirective",
 						"name": "color",
-						"modifiers": [],
-						"expression": {
-							"type": "Identifier",
-							"start": 18,
-							"end": 25,
-							"loc": {
-								"start": {
-									"line": 1,
-									"column": 18
-								},
-								"end": {
-									"line": 1,
-									"column": 25
+						"value": [
+							{
+								"start": 17,
+								"end": 26,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 18,
+									"end": 25,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 18
+										},
+										"end": {
+											"line": 1,
+											"column": 25
+										}
+									},
+									"name": "myColor"
 								}
-							},
-							"name": "myColor"
-						}
+							}
+						]
 					}
 				],
 				"children": []

From db0c6b94a004928d8de3255acc39492782c599f6 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 12 Jan 2022 15:14:53 -0500
Subject: [PATCH 40/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c7dcadb647..9a40380d28 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 ## Unreleased
 
-* Handle kebab case style directives ([#7122](https://github.com/sveltejs/svelte/issues/7122))
+* Handle `style:kebab-case` directives ([#7122](https://github.com/sveltejs/svelte/issues/7122))
+* Improve AST produced for `style:` directives ([#7127](https://github.com/sveltejs/svelte/pull/7127)
 
 ## 3.46.0
 

From 0b369f122bab0b4e073d4a37367a091550a2fddc Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 12 Jan 2022 15:15:16 -0500
Subject: [PATCH 41/66] -> v3.46.1

---
 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 9a40380d28..d2cdc222b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Svelte changelog
 
-## Unreleased
+## 3.46.1
 
 * Handle `style:kebab-case` directives ([#7122](https://github.com/sveltejs/svelte/issues/7122))
 * Improve AST produced for `style:` directives ([#7127](https://github.com/sveltejs/svelte/pull/7127)
diff --git a/package-lock.json b/package-lock.json
index a48382d854..5abe1d9ac6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.46.0",
+  "version": "3.46.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.46.0",
+      "version": "3.46.1",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index 35efd6bf14..66e4275550 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.46.0",
+  "version": "3.46.1",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From b818bbc17c2f6728572fb2e7606924082ac1d491 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 12 Jan 2022 15:31:32 -0500
Subject: [PATCH 42/66] fix changelog typo

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2cdc222b8..78bed1e11a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## 3.46.1
 
 * Handle `style:kebab-case` directives ([#7122](https://github.com/sveltejs/svelte/issues/7122))
-* Improve AST produced for `style:` directives ([#7127](https://github.com/sveltejs/svelte/pull/7127)
+* Improve AST produced for `style:` directives ([#7127](https://github.com/sveltejs/svelte/pull/7127))
 
 ## 3.46.0
 

From 17b1c587c29b6b686ebad3b06a6265b1244b124f Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Thu, 13 Jan 2022 19:28:40 -0500
Subject: [PATCH 43/66] [blog] Accelerating Svelte's Development (#7118)

---
 ...-01-13-accelerating-sveltes-development.md | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 site/content/blog/2022-01-13-accelerating-sveltes-development.md

diff --git a/site/content/blog/2022-01-13-accelerating-sveltes-development.md b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
new file mode 100644
index 0000000000..6169652416
--- /dev/null
+++ b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
@@ -0,0 +1,69 @@
+---
+title: "Accelerating Svelte's Development"
+description: "Scaling the team, building partnerships, and growing the community"
+author: Ben McCann
+authorURL: https://www.benmccann.com/
+---
+
+# Accelerating Svelte's Development
+
+[Svelte](/) is a frontend framework for building fast reactive web apps with less code. If you’re new here, [check out the tutorial](/tutorial) or [examples](/examples) to get a feel for it.
+
+Svelte was [launched 5 years ago](https://news.ycombinator.com/item?id=13069841) and has [come a long way in the time since](https://www.youtube.com/watch?v=YeY5M29-WcY). In 2021, as usage more than doubled, it was voted the [most loved](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks) framework with the [most satisfied](https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/) developers in a pair of surveys. Alongside high-profile companies like The New York Times, Apple, Spotify, Square, Rakuten, Bloomberg, Reuters, Ikea, Brave, and countless others, Svelte is used to power everything from hobby projects to embedded systems interfaces.
+
+To help developers build fully-featured applications with Svelte without worrying about the hard parts, we’ve been developing the [SvelteKit](https://kit.svelte.dev/) application framework. We’re moving quickly towards a [stable 1.0 release](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0) with the help of early adopters who have already downloaded SvelteKit almost one million times.
+
+## Scaling the team
+
+Rich Harris, Svelte’s creator, has [joined Vercel to work on Svelte full-time](https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte). We’re incredibly excited to have Rich’s level of involvement in Svelte increase even more and have him steward Svelte into the future.
+
+Svelte has been made possible by the work of a large, dedicated community. Svelte has added numerous core maintainers over the course of the pandemic, including three this past week. In alphabetical order:
+- [benmccann](https://github.com/benmccann) - primary maintainer of SvelteKit for much of 2021
+- [bluwy](https://github.com/bluwy) - major contributor across SvelteKit, vite-plugin-svelte, and Vite
+- [dominikg](https://github.com/dominikg) - creator of vite-plugin-svelte
+- [dummdidumm](https://github.com/dummdidumm) - maintainer of language-tools, which includes the VS Code extension and `svelte-check`
+- [ehrencrona](https://github.com/ehrencrona) - contributor to SvelteKit and uses Svelte at work
+- [geoffrich](https://github.com/geoffrich) - has driven efforts to improve the accessibility of the Svelte site and documentation
+- [GrygrFlzr](https://github.com/GrygrFlzr) - holds a unique status as a maintainer of both SvelteKit and Vite
+- [Halfnelson](https://github.com/Halfnelson) - creator of svelte-native
+- [ignatiusmb](https://github.com/ignatiusmb) - regular SvelteKit contributor especially to TypeScript support
+- [jasonlyu123](https://github.com/jasonlyu123) - maintainer of language-tools, which includes the VS Code extension and `svelte-check`
+- [kaisermann](https://github.com/kaisermann) - creator of svelte-preprocess
+- [RedHatter](https://github.com/RedHatter) - creator of Svelte Devtools
+- [rixo](https://github.com/rixo) - creator of svelte-hmr
+
+Svelte began accepting donations via [OpenCollective](https://opencollective.com/svelte) last year and has now had over $60,000 donated to-date with [Cohere](https://cohere.ai/) giving $10,000 just today. We hope that these funds will allow existing maintainers to spend more time on Svelte or that the funds could otherwise support Svelte on a part-time or contract basis, which we will continue to investigate.
+
+## Partnerships
+
+Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated]((https://github.com/dependents/node-precinct/pull/88)) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://twitter.com/evilpingwin) and [lukeed](https://twitter.com/lukeed05), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/components#adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does.
+
+We’ve also been working closely with the [Vite](https://vitejs.dev) team to iron out SSR issues uncovered by SvelteKit users. Vite is the build tool that makes the SvelteKit developer experience possible, and thanks to hard work from a contributor base that includes representatives of multiple frameworks, recent releases have solved almost all the issues we’ve been tracking as SvelteKit 1.0 release blockers.
+
+## A growing community
+
+[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](https://svelte.dev/blog/whats-new-in-svelte-december-2021#what-happened-at-svelte-summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October Brittney Postma, who contributed the site’s UI design, founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
+
+Hundreds of developers join the Svelte Discord every week to chat about Svelte. You may have noticed that, as of recently, some members of the server have purple names. These are people with the ambassadors role, which was created to recognise some of the community’s most valued members and help manage the demands of a rapidly growing community. Svelte ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement.  The initial ambassadors in alphabetical order are:
+- [babichjacob](https://github.com/babichjacob)
+- [brady fractal](https://github.com/FractalHQ)
+- [brittney postma](https://github.com/brittneypostma)
+- [d3sandoval](https://github.com/d3sandoval)
+- [geoffrich](https://github.com/geoffrich)
+- [kev](https://github.com/kevmodrome)
+- [puru](https://github.com/PuruVJ)
+- [rainlife](https://github.com/stephane-vanraes)
+- [rmunn](https://github.com/rmunn)
+- [stolinski](https://github.com/stolinski)
+- [swyx](https://github.com/sw-yx)
+- [theo](https://github.com/theo-steiner)
+
+We’re also testing out [GitHub discussions on SvelteKit](https://github.com/sveltejs/kit/discussions) and may bring this to other repos in the Svelte organization if feedback is positive. 
+
+## Things to watch
+
+SvelteKit is continuing to progress towards 1.0 and, in just the past week, we have added major features like [improved client-only rendering](https://github.com/sveltejs/kit/pull/2804), [routing hooks](https://github.com/sveltejs/kit/pull/3293), and [the ability to pass data from child components to layouts](https://github.com/sveltejs/kit/pull/3252) (e.g. to support easier management of `<meta>` tags). We're currently working on a number of other high priority items such as discussing API designs for features like streaming and file uploads and contributing to the upcoming Vite 2.8 release.
+
+While a lot of effort has been going into SvelteKit recently, we continue to progress the entire ecosystem. [Svelte 3.46.0](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3460) was one of our biggest releases in awhile with two major new features added: [constants in markup](https://github.com/sveltejs/rfcs/blob/master/text/0007-markup-constants.md) and [style directives](https://github.com/sveltejs/rfcs/blob/master/text/0008-style-directives.md).
+
+Svelte and SvelteKit’s trajectories have been accelerated by the numerous investments above and there will be many more updates to come — subscribe to the [blog](/blog) via [RSS](/blog/rss.xml) or check monthly to be the first to get them.

From 54f277cd8e86ed02aa65fbb9f52e8cf2415241c6 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Thu, 13 Jan 2022 17:09:21 -0800
Subject: [PATCH 44/66] [blog] remove heading to align with other blog posts

---
 .../content/blog/2022-01-13-accelerating-sveltes-development.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/site/content/blog/2022-01-13-accelerating-sveltes-development.md b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
index 6169652416..b1988ca9ad 100644
--- a/site/content/blog/2022-01-13-accelerating-sveltes-development.md
+++ b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
@@ -5,8 +5,6 @@ author: Ben McCann
 authorURL: https://www.benmccann.com/
 ---
 
-# Accelerating Svelte's Development
-
 [Svelte](/) is a frontend framework for building fast reactive web apps with less code. If you’re new here, [check out the tutorial](/tutorial) or [examples](/examples) to get a feel for it.
 
 Svelte was [launched 5 years ago](https://news.ycombinator.com/item?id=13069841) and has [come a long way in the time since](https://www.youtube.com/watch?v=YeY5M29-WcY). In 2021, as usage more than doubled, it was voted the [most loved](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks) framework with the [most satisfied](https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/) developers in a pair of surveys. Alongside high-profile companies like The New York Times, Apple, Spotify, Square, Rakuten, Bloomberg, Reuters, Ikea, Brave, and countless others, Svelte is used to power everything from hobby projects to embedded systems interfaces.

From cc445839e3172552dacdef10d09de651c3c1c0f2 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Fri, 14 Jan 2022 13:10:33 +0800
Subject: [PATCH 45/66] [docs] explain initial value for bind scroll (#7065)

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 site/content/docs/02-template-syntax.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index ae39c18cd9..e433750977 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -1671,6 +1671,7 @@ All except `scrollX` and `scrollY` are readonly.
 <svelte:window bind:scrollY={y}/>
 ```
 
+> Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`.
 
 ### `<svelte:body>`
 

From 7b07e6e243431dca1d5bc52ba06744122697c02a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 14 Jan 2022 00:48:57 -1000
Subject: [PATCH 46/66] [fix] export FlipParams interface from "svelte/animate"
 (#7104)

Fixes #7103
---
 src/runtime/animate/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/animate/index.ts b/src/runtime/animate/index.ts
index a68e6b0dc3..ff73bbc29e 100644
--- a/src/runtime/animate/index.ts
+++ b/src/runtime/animate/index.ts
@@ -10,7 +10,7 @@ export interface AnimationConfig {
 	tick?: (t: number, u: number) => void;
 }
 
-interface FlipParams {
+export interface FlipParams {
 	delay?: number;
 	duration?: number | ((len: number) => number);
 	easing?: (t: number) => number;

From 0096106b1291170edf64b22758fb987701efbf32 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 14 Jan 2022 11:49:52 +0100
Subject: [PATCH 47/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78bed1e11a..04cb8fb40f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Export `FlipParams` interface from "svelte/animate" ([#7103](https://github.com/sveltejs/svelte/issues/7103))
+
 ## 3.46.1
 
 * Handle `style:kebab-case` directives ([#7122](https://github.com/sveltejs/svelte/issues/7122))

From fffe66a6a0a8a6633e152f799cf49c100d4a80b5 Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Fri, 14 Jan 2022 08:00:03 -0800
Subject: [PATCH 48/66] [blog] fix Netlify link (#7138)

---
 .../content/blog/2022-01-13-accelerating-sveltes-development.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/blog/2022-01-13-accelerating-sveltes-development.md b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
index b1988ca9ad..556f92f37d 100644
--- a/site/content/blog/2022-01-13-accelerating-sveltes-development.md
+++ b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
@@ -34,7 +34,7 @@ Svelte began accepting donations via [OpenCollective](https://opencollective.com
 
 ## Partnerships
 
-Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated]((https://github.com/dependents/node-precinct/pull/88)) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://twitter.com/evilpingwin) and [lukeed](https://twitter.com/lukeed05), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/components#adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does.
+Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated](https://github.com/dependents/node-precinct/pull/88) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://twitter.com/evilpingwin) and [lukeed](https://twitter.com/lukeed05), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/components#adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does.
 
 We’ve also been working closely with the [Vite](https://vitejs.dev) team to iron out SSR issues uncovered by SvelteKit users. Vite is the build tool that makes the SvelteKit developer experience possible, and thanks to hard work from a contributor base that includes representatives of multiple frameworks, recent releases have solved almost all the issues we’ve been tracking as SvelteKit 1.0 release blockers.
 

From 815bc7ef6e91ea10e7de2c46325e32dd44939b84 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sat, 15 Jan 2022 01:12:23 +0800
Subject: [PATCH 49/66] fix: test cases should fail when it should fail (#7139)

---
 test/runtime/index.ts               | 2 +-
 test/server-side-rendering/index.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/runtime/index.ts b/test/runtime/index.ts
index 4fc3880208..f3c962f1d9 100644
--- a/test/runtime/index.ts
+++ b/test/runtime/index.ts
@@ -245,7 +245,7 @@ describe('runtime', () => {
 				.catch(err => {
 					// print a clickable link to open the directory
 					err.stack += `\n\ncmd-click: ${path.relative(process.cwd(), cwd)}/main.svelte`;
-					done();
+					done(err);
 					throw err;
 				})
 				.then(() => {
diff --git a/test/server-side-rendering/index.ts b/test/server-side-rendering/index.ts
index f4175c73a6..98d19a6006 100644
--- a/test/server-side-rendering/index.ts
+++ b/test/server-side-rendering/index.ts
@@ -128,13 +128,13 @@ describe('ssr', () => {
 				}
 
 				if (show) showOutput(dir, { generate: 'ssr', format: 'cjs' });
+				done();
 			} catch (err) {
 				showOutput(dir, { generate: 'ssr', format: 'cjs' });
 				err.stack += `\n\ncmd-click: ${path.relative(process.cwd(), dir)}/main.svelte`;
-				throw err;
+				done(err);
 			} finally {
 				set_current_component(null);
-				done();
 			}
 		});
 	});

From dc06ea916ea73209d827d51c6ced6cc9f8f3dc4a Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sat, 15 Jan 2022 01:16:34 +0800
Subject: [PATCH 50/66] fix: style directive not reactive in {#each} loop
 (#7140)

---
 .../render_dom/wrappers/Element/index.ts      |  2 +-
 .../_config.js                                | 19 +++++++++++++------
 .../main.svelte                               |  4 ++++
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 12cf7aaa1f..80b4c7ca7a 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -199,7 +199,7 @@ export default class ElementWrapper extends Wrapper {
 		}
 
 		// add directive and handler dependencies
-		[node.animation, node.outro, ...node.actions, ...node.classes].forEach(directive => {
+		[node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(directive => {
 			if (directive && directive.expression) {
 				block.add_dependencies(directive.expression.dependencies);
 			}
diff --git a/test/runtime/samples/inline-style-directive-shorthand/_config.js b/test/runtime/samples/inline-style-directive-shorthand/_config.js
index 64043e5269..352d4a139c 100644
--- a/test/runtime/samples/inline-style-directive-shorthand/_config.js
+++ b/test/runtime/samples/inline-style-directive-shorthand/_config.js
@@ -1,18 +1,25 @@
 export default {
 	html: `
 		<p style="color: red;"></p>
+		<p style="color: red;"></p>
 	`,
 
 	test({ assert, component, target, window }) {
-		const p = target.querySelector('p');
+		const [p1, p2] = target.querySelectorAll('p');
 
-		let styles = window.getComputedStyle(p);
-		assert.equal(styles.color, 'red');
+		assert.equal(window.getComputedStyle(p1).color, 'red');
+		assert.equal(window.getComputedStyle(p2).color, 'red');
 
 		component.color = 'blue';
-		assert.htmlEqual(target.innerHTML, '<p style="color: blue;"></p>');
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p style="color: blue;"></p>
+			<p style="color: blue;"></p>
+		`
+		);
 
-		styles = window.getComputedStyle(p);
-		assert.equal(styles.color, 'blue');
+		assert.equal(window.getComputedStyle(p1).color, 'blue');
+		assert.equal(window.getComputedStyle(p2).color, 'blue');
 	}
 };
diff --git a/test/runtime/samples/inline-style-directive-shorthand/main.svelte b/test/runtime/samples/inline-style-directive-shorthand/main.svelte
index 65bbff910b..2b5f8e3db7 100644
--- a/test/runtime/samples/inline-style-directive-shorthand/main.svelte
+++ b/test/runtime/samples/inline-style-directive-shorthand/main.svelte
@@ -3,3 +3,7 @@
 </script>
 
 <p style:color />
+
+{#each [1] as _}
+	<p style:color />
+{/each}

From de6c7c5d181b7d5aa5de0541bd67841d12c6e8fa Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Fri, 14 Jan 2022 12:18:17 -0500
Subject: [PATCH 51/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 04cb8fb40f..76922ccfce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Export `FlipParams` interface from "svelte/animate" ([#7103](https://github.com/sveltejs/svelte/issues/7103))
+* Fix `style:` directive reactivity inside `{#each}` block ([#7136](https://github.com/sveltejs/svelte/issues/7136))
 
 ## 3.46.1
 

From 7f5eecb84bc5e08f4fe520f9050d4197e67dcec3 Mon Sep 17 00:00:00 2001
From: GHOST <ghostdevbusiness@gmail.com>
Date: Fri, 14 Jan 2022 20:52:43 +0000
Subject: [PATCH 52/66] [blog] update sirens (#7142)

---
 .../content/blog/2022-01-13-accelerating-sveltes-development.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/blog/2022-01-13-accelerating-sveltes-development.md b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
index 556f92f37d..2eeebde17b 100644
--- a/site/content/blog/2022-01-13-accelerating-sveltes-development.md
+++ b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
@@ -40,7 +40,7 @@ We’ve also been working closely with the [Vite](https://vitejs.dev) team to ir
 
 ## A growing community
 
-[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](https://svelte.dev/blog/whats-new-in-svelte-december-2021#what-happened-at-svelte-summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October Brittney Postma, who contributed the site’s UI design, founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
+[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](https://svelte.dev/blog/whats-new-in-svelte-december-2021#what-happened-at-svelte-summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October [Brittney Postma](https://github.com/brittneypostma), [Willow aka GHOST](https://ghostdev.xyz), [Steph Dietz](https://github.com/StephDietz), and [Gen Ashley](https://twitter.com/coderinheels) founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
 
 Hundreds of developers join the Svelte Discord every week to chat about Svelte. You may have noticed that, as of recently, some members of the server have purple names. These are people with the ambassadors role, which was created to recognise some of the community’s most valued members and help manage the demands of a rapidly growing community. Svelte ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement.  The initial ambassadors in alphabetical order are:
 - [babichjacob](https://github.com/babichjacob)

From e4a3a875f364a1562916625f419fe9501e223d71 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Fri, 14 Jan 2022 18:44:07 -0500
Subject: [PATCH 53/66] -> v3.46.2

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76922ccfce..426c35b84f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,8 +1,8 @@
 # Svelte changelog
 
-## Unreleased
+## 3.46.2
 
-* Export `FlipParams` interface from "svelte/animate" ([#7103](https://github.com/sveltejs/svelte/issues/7103))
+* Export `FlipParams` interface from `svelte/animate` ([#7103](https://github.com/sveltejs/svelte/issues/7103))
 * Fix `style:` directive reactivity inside `{#each}` block ([#7136](https://github.com/sveltejs/svelte/issues/7136))
 
 ## 3.46.1
diff --git a/package-lock.json b/package-lock.json
index 5abe1d9ac6..8bddba41a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.46.1",
+  "version": "3.46.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.46.1",
+      "version": "3.46.2",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index 66e4275550..dfba5a0a3f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.46.1",
+  "version": "3.46.2",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From a4e4027f794dad93bcd6ffd74c1a19a9ce9ef6ac Mon Sep 17 00:00:00 2001
From: Andreas Ehrencrona <andreas.ehrencrona@velik.it>
Date: Sat, 15 Jan 2022 04:47:02 +0100
Subject: [PATCH 54/66] Handle whitespace inside #each with animation (#5477)

* Strip out whitespace inside each when it has an animation

* remove accidentally committed file

* lint

* add test to validate no error

* update changelog

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
Co-authored-by: Tan Li Hau <tanhauhau@users.noreply.github.com>
---
 CHANGELOG.md                                           |  4 ++++
 src/compiler/compile/nodes/EachBlock.ts                |  7 +++++++
 .../samples/animation-each-with-const/errors.json      |  1 +
 .../samples/animation-each-with-const/input.svelte     | 10 ++++++++++
 .../samples/animation-each-with-whitespace/errors.json |  1 +
 .../animation-each-with-whitespace/input.svelte        |  7 +++++++
 6 files changed, 30 insertions(+)
 create mode 100644 test/validator/samples/animation-each-with-const/errors.json
 create mode 100644 test/validator/samples/animation-each-with-const/input.svelte
 create mode 100644 test/validator/samples/animation-each-with-whitespace/errors.json
 create mode 100644 test/validator/samples/animation-each-with-whitespace/input.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 426c35b84f..4df49ecc77 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Ignore whitespace in `{#each}` blocks when containing elements with `animate:` ([#5477](https://github.com/sveltejs/svelte/pull/5477))
+
 ## 3.46.2
 
 * Export `FlipParams` interface from `svelte/animate` ([#7103](https://github.com/sveltejs/svelte/issues/7103))
diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts
index e1e3107d92..bb78845dd9 100644
--- a/src/compiler/compile/nodes/EachBlock.ts
+++ b/src/compiler/compile/nodes/EachBlock.ts
@@ -9,6 +9,7 @@ import { Node } from 'estree';
 import Component from '../Component';
 import { TemplateNode } from '../../interfaces';
 import compiler_errors from '../compiler_errors';
+import { INode } from './interfaces';
 import get_const_tags from './shared/get_const_tags';
 
 export default class EachBlock extends AbstractBlock {
@@ -62,6 +63,8 @@ export default class EachBlock extends AbstractBlock {
 		([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
 
 		if (this.has_animation) {
+			this.children = this.children.filter(child => !isEmptyNode(child));
+
 			if (this.children.length !== 1) {
 				const child = this.children.find(child => !!(child as Element).animation);
 				component.error((child as Element).animation, compiler_errors.invalid_animation_sole);
@@ -76,3 +79,7 @@ export default class EachBlock extends AbstractBlock {
 			: null;
 	}
 }
+
+function isEmptyNode(node: INode) {
+	return node.type === 'Text' && node.data.trim() === '';
+}
diff --git a/test/validator/samples/animation-each-with-const/errors.json b/test/validator/samples/animation-each-with-const/errors.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/animation-each-with-const/errors.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/animation-each-with-const/input.svelte b/test/validator/samples/animation-each-with-const/input.svelte
new file mode 100644
index 0000000000..1e236de76f
--- /dev/null
+++ b/test/validator/samples/animation-each-with-const/input.svelte
@@ -0,0 +1,10 @@
+<script>
+  function flip(){}
+</script>
+
+<div>
+  {#each [] as n (n)}
+    {@const a = n}
+    <div animate:flip={a} />
+  {/each}
+</div>
diff --git a/test/validator/samples/animation-each-with-whitespace/errors.json b/test/validator/samples/animation-each-with-whitespace/errors.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/animation-each-with-whitespace/errors.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/animation-each-with-whitespace/input.svelte b/test/validator/samples/animation-each-with-whitespace/input.svelte
new file mode 100644
index 0000000000..3e063716ab
--- /dev/null
+++ b/test/validator/samples/animation-each-with-whitespace/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	function flip() {}
+</script>
+
+<div>
+	{#each [] as n (n)} <div animate:flip /> {/each}
+</div>

From 787c34ceeceeb4a254dcdd55b316a4e55ee56bca Mon Sep 17 00:00:00 2001
From: Arad Aral <AmirHosseinHmd1@gmail.com>
Date: Sun, 16 Jan 2022 12:02:13 +0330
Subject: [PATCH 55/66] [docs] Use symbols for context keys in tutorial (#7046)

Closes #6870
---
 .../tutorial/15-context/01-context-api/app-a/mapbox.js        | 2 +-
 .../tutorial/15-context/01-context-api/app-b/mapbox.js        | 2 +-
 site/content/tutorial/15-context/01-context-api/text.md       | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js b/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js
index 55b4200038..9c5cec430c 100644
--- a/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js
+++ b/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js
@@ -3,6 +3,6 @@ import mapbox from 'mapbox-gl';
 // https://docs.mapbox.com/help/glossary/access-token/
 mapbox.accessToken = MAPBOX_ACCESS_TOKEN;
 
-const key = {};
+const key = Symbol();
 
 export { mapbox, key };
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js b/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js
index 55b4200038..9c5cec430c 100644
--- a/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js
+++ b/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js
@@ -3,6 +3,6 @@ import mapbox from 'mapbox-gl';
 // https://docs.mapbox.com/help/glossary/access-token/
 mapbox.accessToken = MAPBOX_ACCESS_TOKEN;
 
-const key = {};
+const key = Symbol();
 
 export { mapbox, key };
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md
index efb6157652..e1f095c494 100644
--- a/site/content/tutorial/15-context/01-context-api/text.md
+++ b/site/content/tutorial/15-context/01-context-api/text.md
@@ -40,10 +40,10 @@ The markers can now add themselves to the map.
 In `mapbox.js` you'll see this line:
 
 ```js
-const key = {};
+const key = Symbol();
 ```
 
-We can use anything as a key — we could do `setContext('mapbox', ...)` for example. The downside of using a string is that different component libraries might accidentally use the same one; using an object literal means the keys are guaranteed not to conflict in any circumstance (since an object only has referential equality to itself, i.e. `{} !== {}` whereas `"x" === "x"`), even when you have multiple different contexts operating across many component layers.
+Technically, we can use any value as a key — we could do `setContext('mapbox', ...)` for example. The downside of using a string is that different component libraries might accidentally use the same one; using [symbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), on the other hand, means that the keys are guaranteed not to conflict in any circumstance, even when you have multiple different contexts operating across many component layers, since a symbol is essentially a unique identifier.
 
 ## Contexts vs. stores
 

From 630ec4b32d5a46e8428625db018ec5f2aa72d17e Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Mon, 24 Jan 2022 20:17:44 +0700
Subject: [PATCH 56/66] [blog] fix rss feed link

Fixes https://github.com/sveltejs/sites/issues/279
---
 .../content/blog/2022-01-13-accelerating-sveltes-development.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/blog/2022-01-13-accelerating-sveltes-development.md b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
index 2eeebde17b..7860c2acbc 100644
--- a/site/content/blog/2022-01-13-accelerating-sveltes-development.md
+++ b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
@@ -64,4 +64,4 @@ SvelteKit is continuing to progress towards 1.0 and, in just the past week, we h
 
 While a lot of effort has been going into SvelteKit recently, we continue to progress the entire ecosystem. [Svelte 3.46.0](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3460) was one of our biggest releases in awhile with two major new features added: [constants in markup](https://github.com/sveltejs/rfcs/blob/master/text/0007-markup-constants.md) and [style directives](https://github.com/sveltejs/rfcs/blob/master/text/0008-style-directives.md).
 
-Svelte and SvelteKit’s trajectories have been accelerated by the numerous investments above and there will be many more updates to come — subscribe to the [blog](/blog) via [RSS](/blog/rss.xml) or check monthly to be the first to get them.
+Svelte and SvelteKit’s trajectories have been accelerated by the numerous investments above and there will be many more updates to come — subscribe to the [blog](/blog) via [RSS](https://svelte.dev/blog/rss.xml) or check monthly to be the first to get them.

From 5ccfc3c5d7a29fe6df1cb109df8d0e7868d0ea51 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Tue, 25 Jan 2022 08:48:47 +0000
Subject: [PATCH 57/66] Create CODE_OF_CONDUCT.md (#7183)

* Create CODE_OF_CONDUCT.md

* Update CODE_OF_CONDUCT.md

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

Co-authored-by: Ignatius Bagus <ignatius.mbs@gmail.com>
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 CODE_OF_CONDUCT.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 CODE_OF_CONDUCT.md

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 0000000000..65d86fe76a
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,3 @@
+This repository is governed by the Svelte Code of Conduct.
+
+https://github.com/sveltejs/community/blob/main/CODE_OF_CONDUCT.md

From 00e394e3c81ad590cb47b056c89bc26ca14f9237 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Wed, 26 Jan 2022 23:50:18 +0900
Subject: [PATCH 58/66] [fix] fix crash when using arrow functions in {@const}
 (#7144)

---
 .../compile/nodes/shared/Expression.ts        | 10 +++-
 .../samples/const-tag-each-arrow/_config.js   | 47 +++++++++++++++++++
 .../samples/const-tag-each-arrow/main.svelte  | 21 +++++++++
 3 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/const-tag-each-arrow/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-arrow/main.svelte

diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index c54540f249..dfefafd8d8 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -253,7 +253,15 @@ export default class Expression {
 
 					const declaration = b`const ${id} = ${node}`;
 
-					if (dependencies.size === 0 && contextual_dependencies.size === 0) {
+					if (owner.type === 'ConstTag') {
+						walk(node, {
+							enter(node: Node) {
+								if (node.type === 'Identifier') {
+									this.replace(block.renderer.reference(node, ctx));
+								}
+							}
+						});
+					} else if (dependencies.size === 0 && contextual_dependencies.size === 0) {
 						// we can hoist this out of the component completely
 						component.fully_hoisted.push(declaration);
 
diff --git a/test/runtime/samples/const-tag-each-arrow/_config.js b/test/runtime/samples/const-tag-each-arrow/_config.js
new file mode 100644
index 0000000000..8e8036b851
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-arrow/_config.js
@@ -0,0 +1,47 @@
+export default {
+	html: `
+			<p>#FF0000</p>
+			<p>#00FF00</p>
+			<p>#0000FF</p>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>#FF0000</p>
+			<p>#00FF00</p>
+			<p>#0000FF</p>
+		`);
+
+		component.tags = [
+			{
+				name: 'Red',
+				color: '#FF0000'
+			},
+			{
+				name: 'Green',
+				color: '#00FF00'
+			},
+			{
+				name: 'Blue',
+				color: '#0000FF'
+			},
+			{
+				name: 'Black',
+				color: '#000000'
+			},
+			{
+				name: 'White',
+				color: '#FFFFFF'
+			}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>#FF0000</p>
+			<p>#00FF00</p>
+			<p>#0000FF</p>
+			<p>#000000</p>
+			<p>#FFFFFF</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-arrow/main.svelte b/test/runtime/samples/const-tag-each-arrow/main.svelte
new file mode 100644
index 0000000000..7292a7d485
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-arrow/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	export let tags = [
+		{
+			name: 'Red',
+			color: '#FF0000'
+		},
+		{
+			name: 'Green',
+			color: '#00FF00'
+		},
+		{
+			name: 'Blue',
+			color: '#0000FF'
+		}
+	];
+</script>
+
+{#each tags as tag}
+	{@const tagColor = tags.find(t => t.name === tag.name).color}
+	<p>{tagColor}</p>
+{/each}

From 0881aa98d7dc789a3c8609290303f8f9164822ea Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 26 Jan 2022 09:52:29 -0500
Subject: [PATCH 59/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4df49ecc77..fe3e088b0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Ignore whitespace in `{#each}` blocks when containing elements with `animate:` ([#5477](https://github.com/sveltejs/svelte/pull/5477))
+* Fix compiler crash when `{@const}` contains arrow functions ([#7134](https://github.com/sveltejs/svelte/issues/7134))
 
 ## 3.46.2
 

From 5665f711fd699d8b7d2e07524b19cab194951d11 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Thu, 27 Jan 2022 00:16:20 +0900
Subject: [PATCH 60/66] [fix] raise compile error if variable name is same as
 imported variable name (#7145)

---
 src/compiler/compile/Component.ts             | 36 +++++++++++--------
 src/compiler/compile/compiler_errors.ts       |  4 +++
 src/compiler/compile/nodes/Action.ts          |  2 +-
 src/compiler/compile/nodes/Animation.ts       |  2 +-
 src/compiler/compile/nodes/InlineComponent.ts |  6 ++--
 src/compiler/compile/nodes/Transition.ts      |  2 +-
 src/compiler/compile/nodes/shared/Context.ts  |  2 +-
 .../compile/nodes/shared/Expression.ts        |  8 ++---
 src/compiler/compile/render_dom/Renderer.ts   |  2 +-
 .../illegal-variable-declaration/errors.json  | 17 +++++++++
 .../illegal-variable-declaration/input.svelte |  9 +++++
 11 files changed, 64 insertions(+), 26 deletions(-)
 create mode 100644 test/validator/samples/illegal-variable-declaration/errors.json
 create mode 100644 test/validator/samples/illegal-variable-declaration/input.svelte

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 0347a28743..5f7d4b9758 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -191,27 +191,33 @@ export default class Component {
 		this.stylesheet.warn_on_unused_selectors(this);
 	}
 
-	add_var(variable: Var, add_to_lookup = true) {
+	add_var(node: Node, variable: Var, add_to_lookup = true) {
 		this.vars.push(variable);
 
 		if (add_to_lookup) {
+			if (this.var_lookup.has(variable.name)) {
+				const exists_var = this.var_lookup.get(variable.name);
+				if (exists_var.module && exists_var.imported) {
+					this.error(node as any, compiler_errors.illegal_variable_declaration);
+				}
+			}
 			this.var_lookup.set(variable.name, variable);
 		}
 	}
 
-	add_reference(name: string) {
+	add_reference(node: Node, name: string) {
 		const variable = this.var_lookup.get(name);
 
 		if (variable) {
 			variable.referenced = true;
 		} else if (is_reserved_keyword(name)) {
-			this.add_var({
+			this.add_var(node, {
 				name,
 				injected: true,
 				referenced: true
 			});
 		} else if (name[0] === '$') {
-			this.add_var({
+			this.add_var(node, {
 				name,
 				injected: true,
 				referenced: true,
@@ -228,7 +234,7 @@ export default class Component {
 			}
 		} else {
 			if (this.compile_options.varsReport === 'full') {
-				this.add_var({ name, referenced: true }, false);
+				this.add_var(node, { name, referenced: true }, false);
 			}
 
 			this.used_names.add(name);
@@ -599,12 +605,14 @@ export default class Component {
 			}
 
 			const writable = node.type === 'VariableDeclaration' && (node.kind === 'var' || node.kind === 'let');
+			const imported = node.type.startsWith('Import');
 
-			this.add_var({
+			this.add_var(node, {
 				name,
 				module: true,
 				hoistable: true,
-				writable
+				writable,
+				imported
 			});
 		});
 
@@ -612,7 +620,7 @@ export default class Component {
 			if (name[0] === '$') {
 				return this.error(node as any, compiler_errors.illegal_subscription);
 			} else {
-				this.add_var({
+				this.add_var(node, {
 					name,
 					global: true,
 					hoistable: true
@@ -674,7 +682,7 @@ export default class Component {
 			const writable = node.type === 'VariableDeclaration' && (node.kind === 'var' || node.kind === 'let');
 			const imported = node.type.startsWith('Import');
 
-			this.add_var({
+			this.add_var(node, {
 				name,
 				initialised: instance_scope.initialised_declarations.has(name),
 				writable,
@@ -697,7 +705,7 @@ export default class Component {
 			const node = globals.get(name);
 
 			if (this.injected_reactive_declaration_vars.has(name)) {
-				this.add_var({
+				this.add_var(node, {
 					name,
 					injected: true,
 					writable: true,
@@ -705,7 +713,7 @@ export default class Component {
 					initialised: true
 				});
 			} else if (is_reserved_keyword(name)) {
-				this.add_var({
+				this.add_var(node, {
 					name,
 					injected: true
 				});
@@ -714,14 +722,14 @@ export default class Component {
 					return this.error(node as any, compiler_errors.illegal_global(name));
 				}
 
-				this.add_var({
+				this.add_var(node, {
 					name,
 					injected: true,
 					mutated: true,
 					writable: true
 				});
 
-				this.add_reference(name.slice(1));
+				this.add_reference(node, name.slice(1));
 
 				const variable = this.var_lookup.get(name.slice(1));
 				if (variable) {
@@ -729,7 +737,7 @@ export default class Component {
 					variable.referenced_from_script = true;
 				}
 			} else {
-				this.add_var({
+				this.add_var(node, {
 					name,
 					global: true,
 					hoistable: true
diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
index f6e9d17ea3..c9282189f1 100644
--- a/src/compiler/compile/compiler_errors.ts
+++ b/src/compiler/compile/compiler_errors.ts
@@ -190,6 +190,10 @@ export default {
 		code: 'illegal-global',
 		message: `${name} is an illegal variable name`
 	}),
+	illegal_variable_declaration: {
+		code: 'illegal-variable-declaration',
+		message: 'Cannot declare same variable name which is imported inside <script context="module">'
+	},
 	cyclical_reactive_declaration: (cycle: string[]) => ({
 		code: 'cyclical-reactive-declaration',
 		message: `Cyclical dependency detected: ${cycle.join(' → ')}`
diff --git a/src/compiler/compile/nodes/Action.ts b/src/compiler/compile/nodes/Action.ts
index 347ea2fb30..f0d92f8537 100644
--- a/src/compiler/compile/nodes/Action.ts
+++ b/src/compiler/compile/nodes/Action.ts
@@ -18,7 +18,7 @@ export default class Action extends Node {
 		component.warn_if_undefined(object, info, scope);
 
 		this.name = info.name;
-		component.add_reference(object);
+		component.add_reference(this as any, object);
 
 		this.expression = info.expression
 			? new Expression(component, this, scope, info.expression)
diff --git a/src/compiler/compile/nodes/Animation.ts b/src/compiler/compile/nodes/Animation.ts
index ac9dddd275..507aa1df04 100644
--- a/src/compiler/compile/nodes/Animation.ts
+++ b/src/compiler/compile/nodes/Animation.ts
@@ -18,7 +18,7 @@ export default class Animation extends Node {
 		component.warn_if_undefined(info.name, info, scope);
 
 		this.name = info.name;
-		component.add_reference(info.name.split('.')[0]);
+		component.add_reference(this as any, info.name.split('.')[0]);
 
 		if (parent.animation) {
 			component.error(this, compiler_errors.duplicate_animation);
diff --git a/src/compiler/compile/nodes/InlineComponent.ts b/src/compiler/compile/nodes/InlineComponent.ts
index 9d88b136cd..e65bf445da 100644
--- a/src/compiler/compile/nodes/InlineComponent.ts
+++ b/src/compiler/compile/nodes/InlineComponent.ts
@@ -29,7 +29,7 @@ export default class InlineComponent extends Node {
 		if (info.name !== 'svelte:component' && info.name !== 'svelte:self') {
 			const name = info.name.split('.')[0]; // accommodate namespaces
 			component.warn_if_undefined(name, info, scope);
-			component.add_reference(name);
+			component.add_reference(this as any, name);
 		}
 
 		this.name = info.name;
@@ -141,10 +141,10 @@ export default class InlineComponent extends Node {
 		}
 
 		if (info.children.some(node => not_whitespace_text(node))) {
-			children.push({ 
+			children.push({
 				start: info.start,
 				end: info.end,
-				type: 'SlotTemplate', 
+				type: 'SlotTemplate',
 				name: 'svelte:fragment',
 				attributes: [],
 				children: info.children
diff --git a/src/compiler/compile/nodes/Transition.ts b/src/compiler/compile/nodes/Transition.ts
index 78799ac7a9..3a4c5a04a7 100644
--- a/src/compiler/compile/nodes/Transition.ts
+++ b/src/compiler/compile/nodes/Transition.ts
@@ -19,7 +19,7 @@ export default class Transition extends Node {
 		component.warn_if_undefined(info.name, info, scope);
 
 		this.name = info.name;
-		component.add_reference(info.name.split('.')[0]);
+		component.add_reference(this as any, info.name.split('.')[0]);
 
 		this.directive = info.intro && info.outro ? 'transition' : info.intro ? 'in' : 'out';
 		this.is_local = info.modifiers.includes('local');
diff --git a/src/compiler/compile/nodes/shared/Context.ts b/src/compiler/compile/nodes/shared/Context.ts
index 7507d1e37e..670f0531e6 100644
--- a/src/compiler/compile/nodes/shared/Context.ts
+++ b/src/compiler/compile/nodes/shared/Context.ts
@@ -187,7 +187,7 @@ function mark_referenced(
 			if (is_reference(node, parent)) {
 				const { name } = flatten_reference(node);
 				if (!scope.is_let(name) && !scope.names.has(name)) {
-					component.add_reference(name);
+					component.add_reference(node, name);
 				}
 			}
 		}
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index dfefafd8d8..98fb2f1e3a 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -110,7 +110,7 @@ export default class Expression {
 							dependencies.add(name);
 						}
 
-						component.add_reference(name);
+						component.add_reference(node, name);
 						component.warn_if_undefined(name, nodes[0], template_scope);
 					}
 
@@ -144,7 +144,7 @@ export default class Expression {
 							const each_block = template_scope.get_owner(name);
 							(each_block as EachBlock).has_binding = true;
 						} else {
-							component.add_reference(name);
+							component.add_reference(node, name);
 
 							const variable = component.var_lookup.get(name);
 							if (variable) variable[deep ? 'mutated' : 'reassigned'] = true;
@@ -220,7 +220,7 @@ export default class Expression {
 							});
 						} else {
 							dependencies.add(name);
-							component.add_reference(name); // TODO is this redundant/misplaced?
+							component.add_reference(node, name); // TODO is this redundant/misplaced?
 						}
 					} else if (is_contextual(component, template_scope, name)) {
 						const reference = block.renderer.reference(node, ctx);
@@ -267,7 +267,7 @@ export default class Expression {
 
 						this.replace(id as any);
 
-						component.add_var({
+						component.add_var(node, {
 							name: id.name,
 							internal: true,
 							hoistable: true,
diff --git a/src/compiler/compile/render_dom/Renderer.ts b/src/compiler/compile/render_dom/Renderer.ts
index c585cb3f72..179fc0c956 100644
--- a/src/compiler/compile/render_dom/Renderer.ts
+++ b/src/compiler/compile/render_dom/Renderer.ts
@@ -264,7 +264,7 @@ export default class Renderer {
 
 		// TODO is this correct?
 		if (this.component.var_lookup.get(name)) {
-			this.component.add_reference(name);
+			this.component.add_reference(node, name);
 		}
 
 		if (member !== undefined) {
diff --git a/test/validator/samples/illegal-variable-declaration/errors.json b/test/validator/samples/illegal-variable-declaration/errors.json
new file mode 100644
index 0000000000..e3d273138e
--- /dev/null
+++ b/test/validator/samples/illegal-variable-declaration/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "illegal-variable-declaration",
+		"message": "Cannot declare same variable name which is imported inside <script context=\"module\">",
+		"start": {
+			"line": 6,
+			"column": 1,
+			"character": 86
+		},
+		"end": {
+			"line": 6,
+			"column": 9,
+			"character": 94
+		},
+		"pos": 86
+	}
+]
diff --git a/test/validator/samples/illegal-variable-declaration/input.svelte b/test/validator/samples/illegal-variable-declaration/input.svelte
new file mode 100644
index 0000000000..4542380f49
--- /dev/null
+++ b/test/validator/samples/illegal-variable-declaration/input.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	import { FOO } from './dummy.svelte';
+</script>
+
+<script>
+	let FOO;
+</script>
+
+{FOO}

From c1544ec6a71e8deb1c68ea1f72f23a202281dadd Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 26 Jan 2022 10:18:14 -0500
Subject: [PATCH 61/66] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe3e088b0f..9d542c820e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Ignore whitespace in `{#each}` blocks when containing elements with `animate:` ([#5477](https://github.com/sveltejs/svelte/pull/5477))
+* Throw compiler error when variable in `context="instance"` collides with import in `context="module"` ([#7090](https://github.com/sveltejs/svelte/issues/7090))
 * Fix compiler crash when `{@const}` contains arrow functions ([#7134](https://github.com/sveltejs/svelte/issues/7134))
 
 ## 3.46.2

From 883dfecb3cd089fdf013fe168e672968a5071770 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 26 Jan 2022 10:18:42 -0500
Subject: [PATCH 62/66] -> v3.46.3

---
 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 9d542c820e..4bdb6f3964 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Svelte changelog
 
-## Unreleased
+## 3.46.3
 
 * Ignore whitespace in `{#each}` blocks when containing elements with `animate:` ([#5477](https://github.com/sveltejs/svelte/pull/5477))
 * Throw compiler error when variable in `context="instance"` collides with import in `context="module"` ([#7090](https://github.com/sveltejs/svelte/issues/7090))
diff --git a/package-lock.json b/package-lock.json
index 8bddba41a1..4cd6dea882 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "svelte",
-  "version": "3.46.2",
+  "version": "3.46.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "svelte",
-      "version": "3.46.2",
+      "version": "3.46.3",
       "license": "MIT",
       "devDependencies": {
         "@ampproject/remapping": "^0.3.0",
diff --git a/package.json b/package.json
index dfba5a0a3f..e09f7a48b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.46.2",
+  "version": "3.46.3",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

From 4a78137a2a671a39b330ac259dd78907410bb517 Mon Sep 17 00:00:00 2001
From: Rene Kootstra <kootstra.rene@gmail.com>
Date: Wed, 26 Jan 2022 17:44:14 +0100
Subject: [PATCH 63/66] [docs] fix #each in window-bindings example (#7181)

---
 .../17-special-elements/03-svelte-window-bindings/App.svelte  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte b/site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte
index 28831a6d31..15c2aa0ebc 100644
--- a/site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte
+++ b/site/content/examples/17-special-elements/03-svelte-window-bindings/App.svelte
@@ -7,7 +7,7 @@
 <svelte:window bind:scrollY={y}/>
 
 <a class="parallax-container" href="https://www.firewatchgame.com">
-	{#each [0, 1, 2, 3, 4, 5, 6, 7, 8] as layer}
+	{#each layers as layer}
 		<img
 			style="transform: translate(0,{-y * layer / (layers.length - 1)}px)"
 			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
@@ -85,4 +85,4 @@
 		padding: 0;
 		background-color: rgb(253, 174, 51);
 	}
-</style>
\ No newline at end of file
+</style>

From 68dd118de0ea93e7da48304e22f7697704fada0d Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Wed, 26 Jan 2022 13:27:55 -0500
Subject: [PATCH 64/66] [chore] remove codecov material (#7190)

---
 .gitignore        |   2 -
 package-lock.json | 686 ----------------------------------------------
 package.json      |   6 -
 3 files changed, 694 deletions(-)

diff --git a/.gitignore b/.gitignore
index 228136cbc8..ee1daa2c03 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,8 +16,6 @@ node_modules
 /transition
 /animate
 /scratch/
-/coverage/
-/coverage.lcov
 /test/*/samples/_
 /yarn-error.log
 _actual*.*
diff --git a/package-lock.json b/package-lock.json
index 4cd6dea882..40ee10e6aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,9 +24,7 @@
         "@typescript-eslint/parser": "^4.31.2",
         "acorn": "^8.4.1",
         "agadoo": "^1.1.0",
-        "c8": "^5.0.1",
         "code-red": "^0.2.4",
-        "codecov": "^3.5.0",
         "css-tree": "^1.1.2",
         "eslint": "^7.32.0",
         "eslint-plugin-import": "^2.24.2",
@@ -97,12 +95,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@bcoe/v8-coverage": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.1.tgz",
-      "integrity": "sha512-KioOCsSvSvXx6xUNLiJz+P+VMb7NRcePjoefOr74Y5P6lEKsiOn35eZyZzgpK4XCNJdXTDR7+zykj0lwxRvZ2g==",
-      "dev": true
-    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -329,33 +321,12 @@
       "resolved": "git+ssh://git@github.com/sveltejs/eslint-config.git#31fd4faeea88990069502460b023698b1c9c2d13",
       "dev": true
     },
-    "node_modules/@tootallnate/once": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.0.0.tgz",
-      "integrity": "sha512-KYyTT/T6ALPkIRd2Ge080X/BsXvy9O0hcWTtMWkPvwAwF99+vn6Dv4GzrFT/Nn1LePr+FFDbRXXlqmsy9lw2zA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "0.0.50",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
       "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
       "dev": true
     },
-    "node_modules/@types/is-windows": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@types/is-windows/-/is-windows-0.2.0.tgz",
-      "integrity": "sha1-byTuSHMdMRaOpRBhDW3RXl/Jxv8=",
-      "dev": true
-    },
-    "node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
-      "integrity": "sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==",
-      "dev": true
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -767,15 +738,6 @@
         "sprintf-js": "~1.0.2"
       }
     },
-    "node_modules/argv": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz",
-      "integrity": "sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.6.10"
-      }
-    },
     "node_modules/array-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
@@ -960,32 +922,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/c8": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/c8/-/c8-5.0.1.tgz",
-      "integrity": "sha512-63V/XrzqX2wgByuJyafJYuaudvxxmGrm/acqRJpvbtKvRUj6h/85EFrVweQ14j1F7wRASp0W9zyZqj8fnWI+4Q==",
-      "dev": true,
-      "dependencies": {
-        "@bcoe/v8-coverage": "^0.2.1",
-        "find-up": "^3.0.0",
-        "foreground-child": "^1.5.6",
-        "furi": "^1.3.0",
-        "istanbul-lib-coverage": "^2.0.1",
-        "istanbul-lib-report": "^2.0.1",
-        "istanbul-reports": "^2.2.4",
-        "rimraf": "^2.6.2",
-        "test-exclude": "^5.0.0",
-        "v8-to-istanbul": "^3.1.3",
-        "yargs": "^13.1.0",
-        "yargs-parser": "^10.1.0"
-      },
-      "bin": {
-        "c8": "bin/c8.js"
-      },
-      "engines": {
-        "node": ">=10.12.0"
-      }
-    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -1095,25 +1031,6 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
-    "node_modules/codecov": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.6.5.tgz",
-      "integrity": "sha512-v48WuDMUug6JXwmmfsMzhCHRnhUf8O3duqXvltaYJKrO1OekZWpB/eH6iIoaxMl8Qli0+u3OxptdsBOYiD7VAQ==",
-      "dev": true,
-      "dependencies": {
-        "argv": "0.0.2",
-        "ignore-walk": "3.0.3",
-        "js-yaml": "3.13.1",
-        "teeny-request": "6.0.1",
-        "urlgrey": "0.4.4"
-      },
-      "bin": {
-        "codecov": "bin/codecov"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1171,31 +1088,12 @@
         "typedarray": "^0.0.6"
       }
     },
-    "node_modules/convert-source-map": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
-      "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.1"
-      }
-    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
-    "node_modules/cross-spawn": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz",
-      "integrity": "sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE=",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^4.0.1",
-        "which": "^1.2.9"
-      }
-    },
     "node_modules/css-tree": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
@@ -2362,16 +2260,6 @@
       "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
       "dev": true
     },
-    "node_modules/foreground-child": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-1.5.6.tgz",
-      "integrity": "sha1-T9ca0t/elnibmApcCilZN8svXOk=",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^4",
-        "signal-exit": "^3.0.0"
-      }
-    },
     "node_modules/forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -2428,16 +2316,6 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "node_modules/furi": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/furi/-/furi-1.3.0.tgz",
-      "integrity": "sha512-TYoXEeRLKHXNWcCBP0VH1psPktQ9G8Y0GfZwMXCvwVbhbfNx7JItKWhB5mMBYufNjqxEHq+Ivd1nLtr5vQyVoQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/is-windows": "^0.2.0",
-        "is-windows": "^1.0.2"
-      }
-    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -2692,38 +2570,6 @@
         "whatwg-encoding": "^1.0.1"
       }
     },
-    "node_modules/html-escaper": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
-      "dev": true
-    },
-    "node_modules/http-proxy-agent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
-      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
-      "dev": true,
-      "dependencies": {
-        "@tootallnate/once": "1",
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/http-proxy-agent/node_modules/agent-base": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.0.tgz",
-      "integrity": "sha512-j1Q7cSCqN+AwrmDd+pzgqc0/NpC655x2bUf5ZjRIO77DcNBFmh+OgRNzF6OKdCC9RSCb19fGd99+bhXFdkRNqw==",
-      "dev": true,
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
     "node_modules/http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -2773,15 +2619,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/ignore-walk": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
-      "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
-      "dev": true,
-      "dependencies": {
-        "minimatch": "^3.0.4"
-      }
-    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3078,15 +2915,6 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
-    "node_modules/is-windows": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -3105,41 +2933,6 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
-    "node_modules/istanbul-lib-coverage": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
-      "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/istanbul-lib-report": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz",
-      "integrity": "sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==",
-      "dev": true,
-      "dependencies": {
-        "istanbul-lib-coverage": "^2.0.5",
-        "make-dir": "^2.1.0",
-        "supports-color": "^6.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/istanbul-reports": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-2.2.7.tgz",
-      "integrity": "sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==",
-      "dev": true,
-      "dependencies": {
-        "html-escaper": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3384,16 +3177,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dev": true,
-      "dependencies": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.25.3",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz",
@@ -3403,19 +3186,6 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
-    "node_modules/make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "dependencies": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -3656,15 +3426,6 @@
         "semver": "^5.7.0"
       }
     },
-    "node_modules/node-fetch": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
-      "dev": true,
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      }
-    },
     "node_modules/node-modules-regexp": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
@@ -3955,15 +3716,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/pirates": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
@@ -4152,12 +3904,6 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "dev": true
     },
-    "node_modules/pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true
-    },
     "node_modules/psl": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.3.0.tgz",
@@ -4256,19 +4002,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/read-pkg-up": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
-      "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^3.0.0",
-        "read-pkg": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -4585,12 +4318,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/signal-exit": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
-      "dev": true
-    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4760,15 +4487,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/stream-events": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
-      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
-      "dev": true,
-      "dependencies": {
-        "stubs": "^3.0.0"
-      }
-    },
     "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -4838,12 +4556,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/stubs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
-      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls=",
-      "dev": true
-    },
     "node_modules/sucrase": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.16.0.tgz",
@@ -4882,18 +4594,6 @@
         "node": "*"
       }
     },
-    "node_modules/supports-color": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/svelte": {
       "version": "3.43.0",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
@@ -5005,34 +4705,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/teeny-request": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-6.0.1.tgz",
-      "integrity": "sha512-TAK0c9a00ELOqLrZ49cFxvPVogMUFaWY8dUsQc/0CuQPGF+BOxOQzXfE413BAk2kLomwNplvdtMpeaeGWmoc2g==",
-      "dev": true,
-      "dependencies": {
-        "http-proxy-agent": "^4.0.0",
-        "https-proxy-agent": "^4.0.0",
-        "node-fetch": "^2.2.0",
-        "stream-events": "^1.0.5",
-        "uuid": "^3.3.2"
-      }
-    },
-    "node_modules/test-exclude": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-5.2.3.tgz",
-      "integrity": "sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3",
-        "minimatch": "^3.0.4",
-        "read-pkg-up": "^4.0.0",
-        "require-main-filename": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -5235,12 +4907,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/urlgrey": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-0.4.4.tgz",
-      "integrity": "sha1-iS/pWWCAXoVRnxzUOJ8stMu3ZS8=",
-      "dev": true
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -5262,20 +4928,6 @@
       "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
       "dev": true
     },
-    "node_modules/v8-to-istanbul": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-3.2.3.tgz",
-      "integrity": "sha512-B8d/oxMtc/x0TYXr9b+Ywu5KexA/on4QMQ9M1kTYnoGZzKdo8LLk9ySlWePdDOtr2G0/2Injgcp3sOR9gU+3vQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^1.6.0",
-        "source-map": "^0.7.3"
-      },
-      "engines": {
-        "node": ">=10.10.0"
-      }
-    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -5491,12 +5143,6 @@
       "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
       "dev": true
     },
-    "node_modules/yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true
-    },
     "node_modules/yargs": {
       "version": "13.3.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
@@ -5515,24 +5161,6 @@
         "yargs-parser": "^13.1.2"
       }
     },
-    "node_modules/yargs-parser": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
-      "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
-      "dev": true,
-      "dependencies": {
-        "camelcase": "^4.1.0"
-      }
-    },
-    "node_modules/yargs-parser/node_modules/camelcase": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-      "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/yargs-unparser": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-1.6.0.tgz",
@@ -5605,12 +5233,6 @@
         "js-tokens": "^4.0.0"
       }
     },
-    "@bcoe/v8-coverage": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.1.tgz",
-      "integrity": "sha512-KioOCsSvSvXx6xUNLiJz+P+VMb7NRcePjoefOr74Y5P6lEKsiOn35eZyZzgpK4XCNJdXTDR7+zykj0lwxRvZ2g==",
-      "dev": true
-    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -5807,30 +5429,12 @@
       "dev": true,
       "from": "@sveltejs/eslint-config@github:sveltejs/eslint-config#v5.8.0"
     },
-    "@tootallnate/once": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.0.0.tgz",
-      "integrity": "sha512-KYyTT/T6ALPkIRd2Ge080X/BsXvy9O0hcWTtMWkPvwAwF99+vn6Dv4GzrFT/Nn1LePr+FFDbRXXlqmsy9lw2zA==",
-      "dev": true
-    },
     "@types/estree": {
       "version": "0.0.50",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
       "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
       "dev": true
     },
-    "@types/is-windows": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@types/is-windows/-/is-windows-0.2.0.tgz",
-      "integrity": "sha1-byTuSHMdMRaOpRBhDW3RXl/Jxv8=",
-      "dev": true
-    },
-    "@types/istanbul-lib-coverage": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
-      "integrity": "sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==",
-      "dev": true
-    },
     "@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -6121,12 +5725,6 @@
         "sprintf-js": "~1.0.2"
       }
     },
-    "argv": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz",
-      "integrity": "sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=",
-      "dev": true
-    },
     "array-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
@@ -6278,26 +5876,6 @@
       "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
       "dev": true
     },
-    "c8": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/c8/-/c8-5.0.1.tgz",
-      "integrity": "sha512-63V/XrzqX2wgByuJyafJYuaudvxxmGrm/acqRJpvbtKvRUj6h/85EFrVweQ14j1F7wRASp0W9zyZqj8fnWI+4Q==",
-      "dev": true,
-      "requires": {
-        "@bcoe/v8-coverage": "^0.2.1",
-        "find-up": "^3.0.0",
-        "foreground-child": "^1.5.6",
-        "furi": "^1.3.0",
-        "istanbul-lib-coverage": "^2.0.1",
-        "istanbul-lib-report": "^2.0.1",
-        "istanbul-reports": "^2.2.4",
-        "rimraf": "^2.6.2",
-        "test-exclude": "^5.0.0",
-        "v8-to-istanbul": "^3.1.3",
-        "yargs": "^13.1.0",
-        "yargs-parser": "^10.1.0"
-      }
-    },
     "call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -6389,19 +5967,6 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
-    "codecov": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.6.5.tgz",
-      "integrity": "sha512-v48WuDMUug6JXwmmfsMzhCHRnhUf8O3duqXvltaYJKrO1OekZWpB/eH6iIoaxMl8Qli0+u3OxptdsBOYiD7VAQ==",
-      "dev": true,
-      "requires": {
-        "argv": "0.0.2",
-        "ignore-walk": "3.0.3",
-        "js-yaml": "3.13.1",
-        "teeny-request": "6.0.1",
-        "urlgrey": "0.4.4"
-      }
-    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -6450,31 +6015,12 @@
         "typedarray": "^0.0.6"
       }
     },
-    "convert-source-map": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
-      "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.1.1"
-      }
-    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
-    "cross-spawn": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz",
-      "integrity": "sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE=",
-      "dev": true,
-      "requires": {
-        "lru-cache": "^4.0.1",
-        "which": "^1.2.9"
-      }
-    },
     "css-tree": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
@@ -7391,16 +6937,6 @@
       "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
       "dev": true
     },
-    "foreground-child": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-1.5.6.tgz",
-      "integrity": "sha1-T9ca0t/elnibmApcCilZN8svXOk=",
-      "dev": true,
-      "requires": {
-        "cross-spawn": "^4",
-        "signal-exit": "^3.0.0"
-      }
-    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -7443,16 +6979,6 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "furi": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/furi/-/furi-1.3.0.tgz",
-      "integrity": "sha512-TYoXEeRLKHXNWcCBP0VH1psPktQ9G8Y0GfZwMXCvwVbhbfNx7JItKWhB5mMBYufNjqxEHq+Ivd1nLtr5vQyVoQ==",
-      "dev": true,
-      "requires": {
-        "@types/is-windows": "^0.2.0",
-        "is-windows": "^1.0.2"
-      }
-    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -7640,34 +7166,6 @@
         "whatwg-encoding": "^1.0.1"
       }
     },
-    "html-escaper": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
-      "dev": true
-    },
-    "http-proxy-agent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
-      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
-      "dev": true,
-      "requires": {
-        "@tootallnate/once": "1",
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "dependencies": {
-        "agent-base": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.0.tgz",
-          "integrity": "sha512-j1Q7cSCqN+AwrmDd+pzgqc0/NpC655x2bUf5ZjRIO77DcNBFmh+OgRNzF6OKdCC9RSCb19fGd99+bhXFdkRNqw==",
-          "dev": true,
-          "requires": {
-            "debug": "4"
-          }
-        }
-      }
-    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -7704,15 +7202,6 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
-    "ignore-walk": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
-      "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
-      "dev": true,
-      "requires": {
-        "minimatch": "^3.0.4"
-      }
-    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -7914,12 +7403,6 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
-    "is-windows": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-      "dev": true
-    },
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -7938,32 +7421,6 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
-    "istanbul-lib-coverage": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
-      "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==",
-      "dev": true
-    },
-    "istanbul-lib-report": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz",
-      "integrity": "sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==",
-      "dev": true,
-      "requires": {
-        "istanbul-lib-coverage": "^2.0.5",
-        "make-dir": "^2.1.0",
-        "supports-color": "^6.1.0"
-      }
-    },
-    "istanbul-reports": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-2.2.7.tgz",
-      "integrity": "sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==",
-      "dev": true,
-      "requires": {
-        "html-escaper": "^2.0.0"
-      }
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8176,16 +7633,6 @@
         "chalk": "^2.4.2"
       }
     },
-    "lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dev": true,
-      "requires": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
-    },
     "magic-string": {
       "version": "0.25.3",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz",
@@ -8195,16 +7642,6 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
-    "make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "requires": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      }
-    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -8399,12 +7836,6 @@
         "semver": "^5.7.0"
       }
     },
-    "node-fetch": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
-      "dev": true
-    },
     "node-modules-regexp": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
@@ -8628,12 +8059,6 @@
       "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
       "dev": true
     },
-    "pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true
-    },
     "pirates": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
@@ -8781,12 +8206,6 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "dev": true
     },
-    "pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true
-    },
     "psl": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.3.0.tgz",
@@ -8857,16 +8276,6 @@
         "path-type": "^3.0.0"
       }
     },
-    "read-pkg-up": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
-      "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
-      "dev": true,
-      "requires": {
-        "find-up": "^3.0.0",
-        "read-pkg": "^3.0.0"
-      }
-    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -9119,12 +8528,6 @@
         "object-inspect": "^1.9.0"
       }
     },
-    "signal-exit": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
-      "dev": true
-    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -9265,15 +8668,6 @@
       "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
       "dev": true
     },
-    "stream-events": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
-      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
-      "dev": true,
-      "requires": {
-        "stubs": "^3.0.0"
-      }
-    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -9325,12 +8719,6 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
-    "stubs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
-      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls=",
-      "dev": true
-    },
     "sucrase": {
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.16.0.tgz",
@@ -9361,15 +8749,6 @@
         }
       }
     },
-    "supports-color": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-      "dev": true,
-      "requires": {
-        "has-flag": "^3.0.0"
-      }
-    },
     "svelte": {
       "version": "3.43.0",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
@@ -9461,31 +8840,6 @@
         }
       }
     },
-    "teeny-request": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-6.0.1.tgz",
-      "integrity": "sha512-TAK0c9a00ELOqLrZ49cFxvPVogMUFaWY8dUsQc/0CuQPGF+BOxOQzXfE413BAk2kLomwNplvdtMpeaeGWmoc2g==",
-      "dev": true,
-      "requires": {
-        "http-proxy-agent": "^4.0.0",
-        "https-proxy-agent": "^4.0.0",
-        "node-fetch": "^2.2.0",
-        "stream-events": "^1.0.5",
-        "uuid": "^3.3.2"
-      }
-    },
-    "test-exclude": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-5.2.3.tgz",
-      "integrity": "sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==",
-      "dev": true,
-      "requires": {
-        "glob": "^7.1.3",
-        "minimatch": "^3.0.4",
-        "read-pkg-up": "^4.0.0",
-        "require-main-filename": "^2.0.0"
-      }
-    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -9653,12 +9007,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "urlgrey": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-0.4.4.tgz",
-      "integrity": "sha1-iS/pWWCAXoVRnxzUOJ8stMu3ZS8=",
-      "dev": true
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -9677,17 +9025,6 @@
       "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
       "dev": true
     },
-    "v8-to-istanbul": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-3.2.3.tgz",
-      "integrity": "sha512-B8d/oxMtc/x0TYXr9b+Ywu5KexA/on4QMQ9M1kTYnoGZzKdo8LLk9ySlWePdDOtr2G0/2Injgcp3sOR9gU+3vQ==",
-      "dev": true,
-      "requires": {
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^1.6.0",
-        "source-map": "^0.7.3"
-      }
-    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -9878,12 +9215,6 @@
       "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
       "dev": true
     },
-    "yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true
-    },
     "yargs": {
       "version": "13.3.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
@@ -9914,23 +9245,6 @@
         }
       }
     },
-    "yargs-parser": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
-      "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
-      "dev": true,
-      "requires": {
-        "camelcase": "^4.1.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
-          "dev": true
-        }
-      }
-    },
     "yargs-unparser": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-1.6.0.tgz",
diff --git a/package.json b/package.json
index e09f7a48b4..a21e7a080e 100644
--- a/package.json
+++ b/package.json
@@ -86,10 +86,6 @@
     "test": "mocha --exit",
     "test:unit": "mocha --require sucrase/register --recursive src/**/__test__.ts --exit",
     "quicktest": "mocha",
-    "precoverage": "c8 mocha",
-    "coverage": "c8 report --reporter=text-lcov > coverage.lcov && c8 report --reporter=html",
-    "codecov": "codecov",
-    "precodecov": "npm run coverage",
     "build": "rollup -c && npm run tsd",
     "prepare": "npm run build",
     "dev": "rollup -cw",
@@ -131,9 +127,7 @@
     "@typescript-eslint/parser": "^4.31.2",
     "acorn": "^8.4.1",
     "agadoo": "^1.1.0",
-    "c8": "^5.0.1",
     "code-red": "^0.2.4",
-    "codecov": "^3.5.0",
     "css-tree": "^1.1.2",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.24.2",

From e460acc8f1aa76e66234393c6380e2f6b5e57272 Mon Sep 17 00:00:00 2001
From: NazarLazarchuk <nazik.lazarchyk@gmail.com>
Date: Thu, 27 Jan 2022 12:13:25 +0200
Subject: [PATCH 65/66] [docs] Rename a variable `count_value` to `countValue`
 in the `Stores` section (#7180)

---
 .../examples/07-stores/00-writable-stores/App.svelte      | 6 +++---
 .../08-stores/01-writable-stores/app-a/App.svelte         | 6 +++---
 .../08-stores/01-writable-stores/app-b/App.svelte         | 6 +++---
 .../content/tutorial/08-stores/01-writable-stores/text.md | 2 +-
 .../08-stores/02-auto-subscriptions/app-a/App.svelte      | 6 +++---
 .../tutorial/08-stores/02-auto-subscriptions/text.md      | 8 ++++----
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/site/content/examples/07-stores/00-writable-stores/App.svelte b/site/content/examples/07-stores/00-writable-stores/App.svelte
index ee542f789d..61e55401a5 100644
--- a/site/content/examples/07-stores/00-writable-stores/App.svelte
+++ b/site/content/examples/07-stores/00-writable-stores/App.svelte
@@ -4,14 +4,14 @@
 	import Decrementer from './Decrementer.svelte';
 	import Resetter from './Resetter.svelte';
 
-	let count_value;
+	let countValue;
 
 	const unsubscribe = count.subscribe(value => {
-		count_value = value;
+		countValue = value;
 	});
 </script>
 
-<h1>The count is {count_value}</h1>
+<h1>The count is {countValue}</h1>
 
 <Incrementer/>
 <Decrementer/>
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte b/site/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte
index f2a4023f25..481b3070dc 100644
--- a/site/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte
@@ -4,14 +4,14 @@
 	import Decrementer from './Decrementer.svelte';
 	import Resetter from './Resetter.svelte';
 
-	let count_value;
+	let countValue;
 
 	count.subscribe(value => {
-		count_value = value;
+		countValue = value;
 	});
 </script>
 
-<h1>The count is {count_value}</h1>
+<h1>The count is {countValue}</h1>
 
 <Incrementer/>
 <Decrementer/>
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte b/site/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte
index c77563e354..57bbde1c1e 100644
--- a/site/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte
@@ -4,14 +4,14 @@
 	import Decrementer from './Decrementer.svelte';
 	import Resetter from './Resetter.svelte';
 
-	let count_value;
+	let countValue;
 
 	count.subscribe(value => {
-		count_value = value;
+		countValue = value;
 	});
 </script>
 
-<h1>The count is {count_value}</h1>
+<h1>The count is {countValue}</h1>
 
 <Incrementer/>
 <Decrementer/>
diff --git a/site/content/tutorial/08-stores/01-writable-stores/text.md b/site/content/tutorial/08-stores/01-writable-stores/text.md
index 247ef86e8d..dc7081f46a 100644
--- a/site/content/tutorial/08-stores/01-writable-stores/text.md
+++ b/site/content/tutorial/08-stores/01-writable-stores/text.md
@@ -4,7 +4,7 @@ title: Writable stores
 
 Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.
 
-In Svelte, we do this with *stores*. A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `count` is a store, and we're setting `count_value` in the `count.subscribe` callback.
+In Svelte, we do this with *stores*. A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `count` is a store, and we're setting `countValue` in the `count.subscribe` callback.
 
 Click the `stores.js` tab to see the definition of `count`. It's a *writable* store, which means it has `set` and `update` methods in addition to `subscribe`.
 
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
index f2a4023f25..481b3070dc 100644
--- a/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
@@ -4,14 +4,14 @@
 	import Decrementer from './Decrementer.svelte';
 	import Resetter from './Resetter.svelte';
 
-	let count_value;
+	let countValue;
 
 	count.subscribe(value => {
-		count_value = value;
+		countValue = value;
 	});
 </script>
 
-<h1>The count is {count_value}</h1>
+<h1>The count is {countValue}</h1>
 
 <Incrementer/>
 <Decrementer/>
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/text.md b/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
index fc7967f658..2bed4a67d1 100644
--- a/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
@@ -8,7 +8,7 @@ Start by declaring `unsubscribe` in `App.svelte`:
 
 ```js
 const unsubscribe = count.subscribe(value => {
-	count_value = value;
+	countValue = value;
 });
 ```
 > Calling a `subscribe` method returns an `unsubscribe` function.
@@ -23,16 +23,16 @@ You now declared `unsubscribe`, but it still needs to be called, for example thr
 	import Decrementer from './Decrementer.svelte';
 	import Resetter from './Resetter.svelte';
 
-	let count_value;
+	let countValue;
 
 	const unsubscribe = count.subscribe(value => {
-		count_value = value;
+		countValue = value;
 	});
 
 	onDestroy(unsubscribe);
 </script>
 
-<h1>The count is {count_value}</h1>
+<h1>The count is {countValue}</h1>
 ```
 
 It starts to get a bit boilerplatey though, especially if your component subscribes to multiple stores. Instead, Svelte has a trick up its sleeve — you can reference a store value by prefixing the store name with `$`:

From d1b3f462a5cfc29283963ad13741f8ef87ea3631 Mon Sep 17 00:00:00 2001
From: Geoff Rich <4992896+geoffrich@users.noreply.github.com>
Date: Thu, 27 Jan 2022 15:47:03 -0500
Subject: [PATCH 66/66] [docs] add docs for a11y-no-redundant-roles (#7195)

---
 site/content/docs/05-accessibility-warnings.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
index 149603dcf9..b39b06f9ff 100644
--- a/site/content/docs/05-accessibility-warnings.md
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -213,6 +213,20 @@ Enforce that `on:mouseover` and `on:mouseout` are accompanied by `on:focus` and
 
 ---
 
+### `a11y-no-redundant-roles`
+
+Some HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser [has no effect](https://www.w3.org/TR/using-aria/#aria-does-nothing) and is redundant.
+
+```sv
+<!-- A11y: Redundant role 'button' -->
+<button role="button" />
+
+<!-- A11y: Redundant role 'img' -->
+<img role="img" src="foo.jpg" />
+```
+
+---
+
 ### `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.