Update from base repo

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Svelte changelog
 
+## Unreleased
+
+* Prevent duplicate invalidation with certain two-way component bindings ([#3180](https://github.com/sveltejs/svelte/issues/3180), [#5117](https://github.com/sveltejs/svelte/issues/5117), [#5144](https://github.com/sveltejs/svelte/issues/5144))
+* Fix reactivity when passing `$$props` to a `<slot>` ([#3364](https://github.com/sveltejs/svelte/issues/3364))
+* Fix unneeded invalidation of `$$props` and `$$restProps` ([#4993](https://github.com/sveltejs/svelte/issues/4993), [#5118](https://github.com/sveltejs/svelte/issues/5118))
+* Provide better compiler error message when mismatched tags are due to autoclosing of tags ([#5049](https://github.com/sveltejs/svelte/issues/5049))
+* Fix `bind:group` when using contextual reference ([#5174](https://github.com/sveltejs/svelte/issues/5174))
+
 ## 3.24.0
 
 * Support nullish coalescing (`??`) and optional chaining (`?.`) operators ([#1972](https://github.com/sveltejs/svelte/issues/1972))

site/README.md

@@ -53,6 +53,26 @@ To build the website, run `npm run sapper`. The output can be found in `__sapper
 
 Tests can be run using `npm run test`.
 
+
+## Linking `@sveltejs/site-kit` and `@sveltejs/site-repl`
+
+This site depends on `@sveltejs/site-kit`, a collection of styles, components and icons used in common by *.svelte.dev websites, and `@sveltejs/site-repl`.
+
+In order to work on features that depend on those packages, you need to [link](https://docs.npmjs.com/cli/link) their repositories:
+
+- `cd <somewhere>`
+- `git clone https://github.com/sveltejs/site-kit`
+- `git clone https://github.com/sveltejs/svelte-repl`
+- `cd <somewhere>/site-kit`
+- `npm link`
+- `cd <somewhere>/svelte-repl`
+- `npm link`
+- `cd <svelte-repo>/site`
+- `npm link @sveltejs/site-kit`
+- `npm link @sveltejs/svelte-repl`
+
+
+
 ## Translating the API docs
 
 Anchors are automatically generated using headings in the documentation and by default (for the english language) they are latinised to make sure the URL is always conforming to RFC3986.

site/content/blog/2016-11-26-frameworks-without-the-framework.md

@@ -30,7 +30,7 @@ Given that, what if the framework *didn't actually run in the browser*? What if,
 
 Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](https://v2.svelte.dev/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible.
 
-The [Svelte implementation of TodoMVC](http://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM *without any app code* weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
+The [Svelte implementation of TodoMVC](https://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM *without any app code* weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
 
 And once your app *is* up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
 

site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md

@@ -5,7 +5,7 @@ author: Rich Harris
 authorURL: https://twitter.com/Rich_Harris
 ---
 
-> Quickstart for the impatient: [the Sapper docs](https://sapper.svelte.technology), and the [starter template](https://github.com/sveltejs/sapper-template)
+> Quickstart for the impatient: [the Sapper docs](https://sapper.svelte.dev), and the [starter template](https://github.com/sveltejs/sapper-template)
 
 If you had to list the characteristics of the perfect Node.js web application framework, you'd probably come up with something like this:
 
@@ -47,9 +47,9 @@ What happens if we use the new model as a starting point?
 
 ## Introducing Sapper
 
-<aside><p>The <a href="https://sapper.svelte.technology/docs#why-the-name-">name comes from</a> the term for combat engineers, and is also short for Svelte app maker</p></aside>
+<aside><p>The <a href="https://sapper.svelte.dev/docs#Why_the_name">name comes from</a> the term for combat engineers, and is also short for Svelte app maker</p></aside>
 
-[Sapper](https://sapper.svelte.technology) is the answer to that question. **Sapper is a Next.js-style framework that aims to meet the eleven criteria at the top of this article while dramatically reducing the amount of code that gets sent to the browser.** It's implemented as Express-compatible middleware, meaning it's easy to understand and customise.
+[Sapper](https://sapper.svelte.dev) is the answer to that question. **Sapper is a Next.js-style framework that aims to meet the eleven criteria at the top of this article while dramatically reducing the amount of code that gets sent to the browser.** It's implemented as Express-compatible middleware, meaning it's easy to understand and customise.
 
 The same 'hello world' app that took 204kb with React and Next weighs just 7kb with Sapper. That number is likely to fall further in the future as we explore the space of optimisation possibilities, such as not shipping any JavaScript *at all* for pages that aren't interactive, beyond the tiny Sapper runtime that handles client-side routing.
 

site/content/blog/2019-04-16-svelte-for-new-developers.md

@@ -51,7 +51,7 @@ Once installed, you'll have access to three new commands:
 
 ## Installing a text editor
 
-To write code, you need a good editor. The most popular choice is [Visual Studio Code](https://code.visualstudio.com/) or VSCode, and justifiably so — it's well-designed and fully-featured, and has a wealth of extensions ([including one for Svelte](https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode), which provides syntax highlighting and diagnostic messages when you're writing components).
+To write code, you need a good editor. The most popular choice is [Visual Studio Code](https://code.visualstudio.com/) or VSCode, and justifiably so — it's well-designed and fully-featured, and has a wealth of extensions ([including one for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which provides syntax highlighting and diagnostic messages when you're writing components).
 
 
 ## Creating a project
@@ -74,8 +74,6 @@ This creates a new directory, `my-svelte-project`, adds files from the [sveltejs
 
 In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application — `dev`, `build` and `start`. To launch your app in development mode, type the following:
 
-> TODO update the template, it needs... some work
-
 ```bash
 npm run dev
 ```

site/content/blog/2020-07-17-svelte-and-typescript.md

@@ -0,0 +1,141 @@
+---
+title: Svelte <3 TypeScript
+description: Typernetically enhanced web apps
+author: Orta Therox
+authorURL: https://twitter.com/orta
+---
+
+It's been by far the most requested feature for a while, and it's finally here: Svelte officially supports TypeScript.
+
+We think it'll give you a much nicer development experience — one that also scales beautifully to larger Svelte code bases — regardless of whether you use TypeScript or JavaScript.
+
+<figure>
+	<img alt="Screenshot of TypeScript in Svelte" src="media/svelte-ts.png">
+	<figcaption>Image of TypeScript + Svelte in VS Code (theme is <a href="https://marketplace.visualstudio.com/items?itemName=karyfoundation.theme-karyfoundation-themes">Kary Pro</a>.)</figcaption>
+</figure>
+
+
+## Try it now
+
+You can start a new Svelte TypeScript project using the [normal template](https://github.com/sveltejs/template) and by running `node scripts/setupTypeScript.js` before you do anything else:
+
+```bash
+npx degit sveltejs/template svelte-typescript-app
+cd svelte-typescript-app
+node scripts/setupTypeScript.js
+```
+
+If you're a VS Code user, make sure you're using the (new) [official extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which replaces the popular extension by James Birtles.
+Later in this blog post, we'll detail the individual steps involved in using TypeScript in an existing Svelte project.
+
+## What does it mean to support TypeScript in Svelte?
+
+TypeScript support in Svelte has been possible for a long time, but you had to mix a lot of disparate tools together and each project ran independently. Today, nearly all of these tools live under the Svelte organization and are maintained by a set of people who take responsibility over the whole pipeline and have common goals.
+
+A week before COVID was declared a pandemic, [I pitched a consolidation](https://github.com/sveltejs/svelte/issues/4518) of the best Svelte tools and ideas from similar dev-ecosystems and provided a set of steps to get first class TypeScript support. Since then, many people have pitched in and written the code to get us there.
+
+When we say that Svelte now supports TypeScript, we mean a few different things:
+
+* You can use TypeScript inside your `<script>` blocks — just add the `lang="ts"` attribute
+* Components with TypeScript can be type-checked with the `svelte-check` command
+* You get autocompletion hints and type-checking as you're writing components, even in expressions inside markup
+* TypeScript files understand the Svelte component API — no more red squiggles when you import a `.svelte` file into a `.ts` module
+
+#### How does it work?
+
+To understand the two main parts of TypeScript support, we'll compare it to the technique TypeScript uses to provide dev tools. There is a compiler `tsc` which you run on the command-line to convert `*.ts` to `*.js`, then there is a `TSServer` which is a node API that responds to requests from text editors. The `TSServer` is what provides all the JavaScript and TypeScript realtime introspection for editors while coding, and it has most of the compiler's code inside it.
+
+For Svelte, we have the Svelte compiler, and now we have the [`svelte-language-server`](https://github.com/sveltejs/language-tools/tree/master/packages/language-server#svelte-language-server) which responds to text editor calls via the [Language Server Protocol standard](https://microsoft.github.io//language-server-protocol/overviews/lsp/overview/). First class TypeScript support means that _both_ of these two systems do a good job of handling TypeScript code.
+
+The Svelte compiler support for TypeScript is handled by [Christian Kaisermann](https://github.com/kaisermann)'s [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess#svelte-preprocess) which is now an official Svelte project.
+
+For the editor level, we took inspiration from [Pine's](https://github.com/octref) work in the [Vue](https://vuejs.org) ecosystem via [Vetur](https://github.com/vuejs/vetur). Vetur provides an [LSP](https://github.com/vuejs/vetur/blob/master/server), a VS Code extension and a [CLI](https://github.com/vuejs/vetur/blob/master/vti). Svelte now also has an [LSP](https://github.com/sveltejs/language-tools/blob/master/packages/language-server), a [VS Code extension](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-vscode) and a [CLI](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check).
+
+
+#### `*.svelte` Introspection
+
+For the official Svelte VS Code extension, we built off the foundations which [James Birtles](https://github.com/UnwrittenFun) has created in [`UnwrittenFun/svelte-vscode`](https://github.com/UnwrittenFun/svelte-vscode) and [`UnwrittenFun/svelte-language-server`](https://github.com/UnwrittenFun/svelte-language-server/).
+
+[Simon Holthausen](https://github.com/dummdidumm) and [Lyu, Wei-Da](https://github.com/jasonlyu123) have done great work improving the JavaScript and TypeScript introspection, including integrating [@halfnelson](https://github.com/halfnelson)'s [svelte2tsx](https://github.com/sveltejs/language-tools/tree/master/packages/svelte2tsx#svelte2tsx) which powers understanding the props on components in your codebase.
+
+
+## Adding TypeScript to an existing project
+
+Before getting started, add the dependencies:
+
+```bash
+npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check
+```
+
+##### 1. Compiling TypeScript
+
+You first need to set up [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess#svelte-preprocess), which passes the contents of your `<script lang="ts">` blocks through the TypeScript compiler.
+
+In a Rollup project, that would look like this — note that we also need to install `@rollup/plugin-typescript` so that Rollup can handle `.ts` files:
+
+```diff
++ import autoPreprocess from 'svelte-preprocess';
++ import typescript from '@rollup/plugin-typescript';
+
+export default {
+  ...,
+  plugins: [
+    svelte({
++       preprocess: autoPreprocess()
+    }),
++   typescript({ sourceMap: !production })
+  ]
+}
+```
+
+[Full instructions for other environments here](https://github.com/sveltejs/svelte-preprocess#usage).
+
+To configure TypeScript, you will need to create a `tsconfig.json` in the root of your project:
+
+```json
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*", "src/node_modules"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
+}
+```
+
+Your `include`/`exclude` may differ per project — these are defaults that should work across most Svelte projects.
+
+##### 2. Editor Support
+
+Any editor [using an LSP](https://langserver.org/#implementations-client) can be supported. The [VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) extension has been our primary focus, but there is work in progress [on Atom](https://github.com/sveltejs/language-tools/pull/160), and Vim via [coc-svelte](https://github.com/coc-extensions/coc-svelte) has been updated with the latest LSP.
+
+These editor extensions will improve your coding experience even if you only use JavaScript. The editor won't offer errors, but it will offer inference and refactoring tools. You can [add `// @check-js`](https://www.staging-typescript.org/docs/handbook/intro-to-js-ts.html) to the top of a `<script>` tag using JavaScript to get better error messages with no infra changes.
+
+To switch a `<script>` to use TypeScript, use `<script lang="ts">` and that should be it. Hopefully you won't be seeing an ocean of red squiggles.
+
+##### 3. CI Checks
+
+Having red squiggles is great, well, kinda. On the long run though, you want to be able to verify that there are no errors in your code. To verify your project is error free, you can use the CLI tool [`svelte-check`](https://www.npmjs.com/package/svelte-check). It acts like an editor asking for errors against all of your `.svelte` files.
+
+You can add the dependency to your project and then add it to CI.
+
+```bash
+❯ npx svelte-check
+
+Loading svelte-check in workspace: /Users/ortatherox/dev/svelte/example-app
+Getting Svelte diagnostics...
+====================================
+
+/Users/ortatherox/dev/svelte/example-app/src/App.svelte:3:2
+Error: Type '123' is not assignable to type 'string'. (ts)
+
+====================================
+svelte-check found 1 error
+error Command failed with exit code 1.
+```
+
+## What about TypeScript in Sapper projects?
+
+Watch this space!
+
+## How can I contribute?
+
+We're so glad you asked. The work is happening in the [sveltejs/language-tools](https://github.com/sveltejs/language-tools) repo and in the [#language-tools](https://discord.gg/enV6v8K) channel in the Svelte Discord. If you'd like to report issues, submit fixes, or help out with extensions for new editors and so on, that's where you can find us. See you there!

site/content/docs/02-template-syntax.md

@@ -773,7 +773,7 @@ Actions are functions that are called when an element is created. They can retur
 
 ---
 
-An action can have parameters. If the returned value has an `update` method, it will be called whenever those parameters change, immediately after Svelte has applied updates to the markup.
+An action can have a parameter. If the returned value has an `update` method, it will be called whenever that parameter changes, immediately after Svelte has applied updates to the markup.
 
 > Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
 

site/content/examples/05-bindings/07-each-block-bindings/App.svelte

@@ -16,16 +16,10 @@
 	$: remaining = todos.filter(t => !t.done).length;
 </script>
 
-<style>
-	.done {
-		opacity: 0.4;
-	}
-</style>
-
 <h1>Todos</h1>
 
 {#each todos as todo}
-	<div class:done={todo.done}>
+	<div>
 		<input
 			type=checkbox
 			bind:checked={todo.done}
@@ -34,6 +28,7 @@
 		<input
 			placeholder="What needs to be done?"
 			bind:value={todo.text}
+			disabled={todo.done}
 		>
 	</div>
 {/each}

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](https://svelte.dev/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.

site/content/faq/450-how-do-i-document-my-components.md

@@ -0,0 +1,32 @@
+---
+question: How do I document my components?
+---
+
+In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.
+
+````svelte
+<script>
+	/** What should we call the user? */
+	export let name = 'world';
+</script>
+
+<!--
+@component
+Here's some documentation for this component.
+It will show up on hover.
+
+- You can use markdown here.
+- You can also use code blocks here.
+- Usage:
+  ```tsx
+  <main name="Arethra">
+  ```
+-->
+<main>
+	<h1>
+		Hello, {name}
+	</h1>
+</main>
+````
+
+Note: The `@component` is necessary in the HTML comment which describes your component.

site/content/tutorial/16-special-elements/01-svelte-self/text.md

@@ -14,12 +14,12 @@ It's useful for things like this folder tree view, where folders can contain *ot
 {/if}
 ```
 
-...but that's impossible, because a file can't import itself. Instead, we use `<svelte:self>`:
+...but that's impossible, because a module can't import itself. Instead, we use `<svelte:self>`:
 
 ```html
 {#if file.type === 'folder'}
 	<svelte:self {...file}/>
 {:else}
 	<File {...file}/>
 {/if}
-```
+```