Merge branch 'main' into pkg-pr-new-version

Author: paoloricciuti

apps/svelte.dev/content/blog/2016-11-26-frameworks-without-the-framework.md

@@ -32,7 +32,7 @@ The [Svelte implementation of TodoMVC](https://svelte-todomvc.surge.sh/) weighs
 
 And once your app _is_ up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
 
-It's basically as fast as vanilla JS, which makes sense because it _is_ vanilla JS – just vanilla JS that you didn't have to write.
+It's basically as fast as vanilla JS, which makes sense because it _is_ vanilla JS – just vanilla JS that you didn't have to write.
 
 ## But that's not the important thing
 

apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md

@@ -19,7 +19,7 @@ Everything in CSS is global. Because of that, styles intended for one bit of mar
 
 It gets worse when you're working on a team. No-one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
 
-The consequence of all this is the **append-only stylesheet**. There's no way of knowing which code can safely be removed, so it's common to undo some existing style with another, more specific style — even on relatively small projects.
+The consequence of all this is the **append-only stylesheet**. There's no way of knowing which code can safely be removed, so it's common to undo some existing style with another, more specific style — even on relatively small projects.
 
 ## Single File Components change all that
 

apps/svelte.dev/content/blog/2019-04-20-write-less-code.md

@@ -110,7 +110,7 @@ It's unusual for the difference to be _quite_ so obvious — in my experience, a
 
 ### Top-level elements
 
-In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `<div>`, but it's the same basic idea, and still results in an extra level of indentation).
+In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `<div>`, but it's the same basic idea, and still results in an extra level of indentation).
 
 In Vue, your markup must be wrapped in a `<template>` element, which I'd argue is redundant.
 

apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md

@@ -11,13 +11,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.
 
-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.
 

apps/svelte.dev/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md

@@ -77,7 +77,7 @@ _To Read_
 - [Using Sequelize with SvelteKit](https://cherrific.io/0xedB00816FB204b4CD9bCb45FF2EF693E99723484/story/23) by MetaZebre
 - [Implementing Maintenance mode on a SvelteKit site](https://blog.encodeart.dev/implementing-maintenance-mode-on-a-sveltekit-site) by Andreas Söderlund
 - [ActionStore: Real-time Svelte stores for Rails](https://dev.to/buhrmi/actionstore-real-time-svelte-stores-for-rails-4jhg) by Stefan Buhrmester
-- [Svelte CSS Image Slider: with Bouncy Overscroll](https://rodneylab.com/svelte-css-image-slider/) and [SvelteKit Local Edge Functions: Edge on Localhost](https://rodneylab.com/sveltekit-local-edge-functions/) by Rodney Lab
+- [Svelte CSS Image Slider: with Bouncy Overscroll](https://rodneylab.com/svelte-css-image-slider/) and [SvelteKit Local Edge Functions: Edge on Localhost](https://rodneylab.com/sveltekit-local-edge-functions/) by Rodney Lab
 - [Creating a Svelte Tabs component with Slot props](https://blog.openreplay.com/creating-a-svelte-tabs-component-with-slot-props/) by Shinichi Okada
 - [Sky Cart: An Open Source, cloud-agnostic shopping cart using Stripe Checkout](https://dev.to/stripe/sky-cart-an-open-source-cloud-agnostic-shopping-cart-using-stripe-checkout-o5k) by Mike Bifulco for Stripe
 

apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md

@@ -333,7 +333,7 @@ export async function load({ fetch, setHeaders }) {
 }
 ```
 
-Setting the same header multiple times (even in separate `load` functions) is an error. You can only set a given header once using the `setHeaders` function. You cannot add a `set-cookie` header with `setHeaders` — use `cookies.set(name, value, options)` instead.
+Setting the same header multiple times (even in separate `load` functions) is an error. You can only set a given header once using the `setHeaders` function. You cannot add a `set-cookie` header with `setHeaders` — use `cookies.set(name, value, options)` instead.
 
 ## Using parent data
 

apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md

@@ -156,7 +156,7 @@ export const actions = {
 
 ### Validation errors
 
-If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `$page.status` and the data through `form`:
+If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `$page.status` and the data through `form`:
 
 ```js
 /// file: src/routes/login/+page.server.js
@@ -195,7 +195,7 @@ export const actions = {
 };
 ```
 
-> [!NOTE] Note that as a precaution, we only return the email back to the page — not the password.
+> [!NOTE] Note that as a precaution, we only return the email back to the page — not the password.
 
 ```svelte
 /// file: src/routes/login/+page.svelte

apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md

@@ -129,7 +129,7 @@ The `$env/dynamic/public` and `$env/dynamic/private` modules provide access to _
 
 During prerendering in SvelteKit 1, they are one and the same. As such, prerendered pages that make use of 'dynamic' environment variables are really 'baking in' build time values, which is incorrect. Worse, `$env/dynamic/public` is populated in the browser with these stale values if the user happens to land on a prerendered page before navigating to dynamically-rendered pages.
 
-Because of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `_env.js` — this can be configured with `config.kit.env.publicModule`) instead of reading them from the server-rendered HTML.
+Because of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `_env.js` — this can be configured with `config.kit.env.publicModule`) instead of reading them from the server-rendered HTML.
 
 ## `form` and `data` have been removed from `use:enhance` callbacks
 

apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md

@@ -45,3 +45,9 @@ Sometimes you need to create complex derivations that don't fit inside a short e
 ```
 
 In essence, `$derived(expression)` is equivalent to `$derived.by(() => expression)`.
+
+## Understanding dependencies
+
+Anything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.
+
+To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).

apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md

@@ -2,7 +2,7 @@
 title: $effect
 ---
 
-Effects are what make your application _do things_. When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed, and re-runs the function when that state later changes.
+Effects are what make your application _do things_. When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.
 
 Most of the effects in a Svelte app are created by Svelte itself — they're the bits that update the text in `<h1>hello {name}!</h1>` when `name` changes, for example.