Merge remote-tracking branch 'upstream/main' into scope-not

Author: dummdidumm

.changeset/eleven-humans-kneel.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: cleanup non-branch effects created inside block effects

.changeset/ninety-months-laugh.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure effects destroy owned deriveds upon teardown

.changeset/pink-shirts-film.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure proxied arrays correctly update their length upon deletions

.changeset/pre.json

@@ -22,6 +22,7 @@
     "angry-weeks-design",
     "beige-clocks-notice",
     "beige-cobras-smoke",
+    "beige-donkeys-exercise",
     "beige-flies-wash",
     "beige-gifts-appear",
     "beige-lamps-ring",
@@ -184,6 +185,7 @@
     "eleven-cycles-applaud",
     "eleven-donuts-sit",
     "eleven-hounds-pump",
+    "eleven-humans-kneel",
     "eleven-icons-sniff",
     "eleven-peaches-tap",
     "eleven-teachers-drive",
@@ -448,6 +450,7 @@
     "loud-penguins-unite",
     "loud-ravens-drop",
     "loud-socks-look",
+    "loud-walls-wave",
     "lovely-bugs-sneeze",
     "lovely-carpets-lick",
     "lovely-houses-own",
@@ -526,6 +529,7 @@
     "ninety-days-visit",
     "ninety-dingos-walk",
     "ninety-dots-train",
+    "ninety-months-laugh",
     "ninety-rockets-battle",
     "odd-buckets-lie",
     "odd-needles-joke",
@@ -571,6 +575,7 @@
     "pink-countries-repair",
     "pink-goats-promise",
     "pink-mayflies-tie",
+    "pink-shirts-film",
     "plenty-clouds-reply",
     "plenty-elephants-fry",
     "plenty-items-build",
@@ -731,6 +736,7 @@
     "slimy-news-help",
     "slimy-onions-approve",
     "slimy-walls-draw",
+    "slow-badgers-invite",
     "slow-beds-shave",
     "slow-chefs-dream",
     "slow-gorillas-yawn",
@@ -764,6 +770,7 @@
     "soft-clocks-remember",
     "soft-geese-learn",
     "soft-months-grab",
+    "soft-stingrays-attend",
     "soft-tigers-wink",
     "sour-bags-fail",
     "sour-forks-stare",
@@ -899,6 +906,7 @@
     "twelve-bears-worry",
     "twelve-cows-learn",
     "twelve-dragons-join",
+    "twelve-mayflies-decide",
     "twelve-onions-juggle",
     "twelve-scissors-kneel",
     "twelve-shrimps-run",

.changeset/slow-badgers-invite.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid assigning input.value if the value is the same to fix `minlength`

documentation/docs/01-introduction/02-getting-started.md

@@ -24,7 +24,7 @@ Don't worry if you don't know Svelte yet! You can ignore all the nice features S
 
 ### Alternatives to SvelteKit
 
-If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory thanks using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#is-there-a-router) as well.
+If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory thanks using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#Is-there-a-router) as well.
 
 Alternatively, there are plugins for [Rollup](https://github.com/sveltejs/rollup-plugin-svelte), [Webpack](https://github.com/sveltejs/svelte-loader) [and a few others](https://sveltesociety.dev/packages?category=build-plugins) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but setting up SSR with them requires more manual work.
 

documentation/docs/02-template-syntax/01-component-fundamentals.md

@@ -21,7 +21,7 @@ All three sections — script, styles and markup — are optional.
 </style>
 ```
 
-## &lt;script&gt;
+## `<script>`
 
 A `<script>` block contains JavaScript (or TypeScript, when adding the `lang="ts"` attribute) that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup.
 
@@ -161,7 +161,7 @@ If you'd like to react to changes to a prop, use the `$derived` or `$effect` run
 
 For more information on reactivity, read the documentation around runes.
 
-## &lt;script module&gt;
+## `<script module>`
 
 A `<script>` tag with a `module` attribute runs once when the module first evaluates, rather than for each component instance. Values declared in this block are accessible from a regular `<script>` (and the component markup) but not vice versa.
 
@@ -186,7 +186,7 @@ You cannot `export default`, since the default export is the component itself.
 </script>
 ```
 
-## &lt;style&gt;
+## `<style>`
 
 CSS inside a `<style>` block will be scoped to that component.
 

documentation/docs/02-template-syntax/06-transitions-and-animations.md

@@ -312,7 +312,7 @@ DOMRect {
 
 An animation is triggered when the contents of a [keyed each block](control-flow#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](svelte-animate) or [custom animation functions](#custom-animation-functions).
+Animations can be used with Svelte's [built-in animation functions](svelte-animate) or [custom animation functions](#Custom-animation-functions).
 
 ```svelte
 <!-- When `list` is reordered the animation will run-->

documentation/docs/04-runtime/02-context.md

@@ -10,8 +10,7 @@ Most state is component-level state that lives as long as its component lives. T
 The easiest way to do that is to create global state and just import that.
 
 ```ts
-/// file: state.svelte.ts
-
+/// file: state.svelte.js
 export const myGlobalState = $state({
 	user: {
 		/* ... */

documentation/docs/04-runtime/03-lifecycle-hooks.md

@@ -110,23 +110,21 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 - [Before](/#H4sIAAAAAAAAE31WXa_bNgz9K6yL1QmWOLlrC-w6H8MeBgwY9tY9NfdBtmlbiywZkpyPBfnvo2zLcZK28AWuRPGI5OGhkEuQc4EmiL9eAskqDOLg97oOZoE9125jDigs0t6oRqfOsjap5rXd7uTO8qpW2sIFEsyVxn_qjFmcAcstar-xPN3DFXKtKgi768IVgQku0ELj3Lgs_kZjWIEGNpAzYXDlHWyJFZI1zJjeh4O5uvl_DY8oUkVeVoFuJKYls-_CGYS25Aboj0EtWNqel0wWoBoLTGZgmdgDS9zW4Uz4NsrswPHoyutN4xInkylstnBxdmIhh8m7xzqmoNE2Wq46n1RJQzEbq4g-JQSl7e-HDx-GdaTy3KD9E3lRWvj5Zu9QX1QN20dj7zyHz8s-1S6lW7Cpz3RnXTcm04hIlfdFuO8p2mQ5-3a06cqjrn559bF_2NHOnRZ5I1PLlXQNyQT-hedMHeUEDyjtdMxsa4n2eIbNhlTwhyRthaOKOmYtniwF6pwt0wXa6MBEg0OibZec27gz_dk3UrZ6hB2LLYoiv521Yd8Gt-foTrfhiCDP0lC9VUUhcDLU49Xe_9943cNvEArHfAjxeBTovvXiNpFynfEDpIIZs9kFbg52QbeNHWZzebz32s7xHco3nJAJl1nshmhz8dYOQJDyZetnbb2gTWe-vEeWlrfpZMavr56ldb29eNt6UXvgwgFbp_WC0tl2RK25rGk6lYz3nUI2lzvBXGHhPZPGWmKUXFNBKqdaW259wl_aHbiqoVIZdpE60Nax6IOujT0LbFFxIVTCxCRR2XloUcYNvSbnGHKBp763jHoj59xiZWJI0Wm0P_m3MSS985xkasn-cFq20xTDy3J5KFcjgUTD69BHdcHIjz431z28IqlxGcPSfdFnrGDZn6gD6lyo45zyHAD-btczf-98nhQxHEvKfeUtOVkSejD3q-9X7JbzjGtsdUxlKdFU8qGsT78uaw848syWMXz85Waq2Gnem4mAn3prweq4q6Y3JEpnqMmnPoFRgmd3ySW0LLRqSKlwYHriCvJvUs2yjMaaoA-XzTXLeGMe45zmhv_XAno3Mj0xF7USuqNvnE9H343QHlq-eAgxpbTPNR9yzUkgLjwSR0NK4wKoxy-jDg-9vy8sUSToakzW-9fX13Em9Q8T6Z26uZhBN36XUYo5q7ggLXBZoub2Ofv7g6GCZfTxe034NCjiudXj7Omla0eTfo7QBPOcYxbE7qG-vl3_B1G-_i_JCAAA)
 - [After](/#H4sIAAAAAAAAE31WXa-jNhD9K7PsdknUQJLurtRLPqo-VKrU1327uQ8GBnBjbGSb5KZR_nvHgMlXtyIS9njO-MyZGZRzUHCBJkhez4FkNQZJ8HvTBLPAnhq3MQcUFmlvVKszZ1mbTPPGbndyZ3ndKG3hDJZne7hAoVUNYY8JV-RBPgIt2AprhA18MpZZnIQ50_twuvLHNRrDSjRXj9fwiCJTBLIKdCsxq5j9EM4gtBU3QD8GjWBZd14xWYJqLTCZg2ViDyx1W4cz4dv0hsiB49FRHkyfsCgws3GjcTKZwmYLZ2feWc9o1W8zJQ2Fb62i5JUQRNRHgs-fx3WsisKg_RN5WVn4-WrvUd9VA9tH4-AcwbfFQIpkLWByvWzqSe2sk3kyjUlOec_XPU-3TRaz_75tuvKoi19e3OvipSpamVmupJM2F_gXnnJ1lBM8oLQjHceys8R7PMFms4HwD2lRhzeEe-EsvluSrHe2TJdo4wMTLY48XKwPzm0KGm2r5ajFtRYU4TWOY7-ddWHfxhDP0QkQhnf5PWRnVVkKnIx8fZsOb5dR16nwG4TCCRdCMphWQ7z1_DoOcp3zA2SCGbPZBa5jd0G_TRxmc36Me-mG6A7l60XIlMs8ce2-OXtrDyBItdz6qVjPadObzx-RZdV1nJjx64tXad1sz962njceOHfAzmk9JzrbXqg1lw3NkZL7vgE257t-uMDcO6attSSokpmgFqVMO2U93e_dDlzOUKsc-3t6zNZp6K9cG3sS2KGSUqiUiUmq8tNYoJwbmvpTAoXA96GyjCojI26xNglk6DpwOPm7NdRYp4ia0JL94bTqRiGB5WJxqFY37RGPoz3c6i4jP3rcUA7wmhqNywQW7om_YQ2L4UQdUBdCHSPiOQJ8bFcxHzeK0jKBY0XcV95SkCWlD9t-9eOM3TLKucauiyktJdpaPqT19ddF4wFHntsqgS-_XE01e48GMwnw02AtWZP02QyGVOkcNfk072CU4PkduZSWpVYt9SkcmJ64hPwHpWF5ziVls3wIFmmW89Y83vMeGf5PBxjcyPSkXNy10J18t3x6-a6CDtBq6SGklNKeazFyLahB3PVIGo2UbhOgGi9vKjzW_j6xVFFD17difXx5ebll0vwvkcGpn4sZ9MN3vqFYsJoL6gUuK9TcPrO_PxgzWMRfflSEr2NHPJf6lj1957rRpH8CNMG84JgHidUtXt4u_wK21LXERAgAAA==)
 
-```diff
+<!-- prettier-ignore -->
+```svelte
 <script>
--	import { beforeUpdate, afterUpdate, tick } from 'svelte';
-+	import { tick } from 'svelte';
+	import { ---beforeUpdate, afterUpdate,--- tick } from 'svelte';
 
--	let updatingMessages = false;
--	let theme = 'dark';
--	let messages = [];
-+	let theme = $state('dark');
-+	let messages = $state([]);
+	---let updatingMessages = false;---
+	let theme = +++$state('dark')+++;
+	let messages = +++$state([])+++;
 
 	let viewport;
 
--	beforeUpdate(() => {
-+	$effect.pre(() => {
--		if (!updatingMessages) return;
-+		messages;
+	---beforeUpdate(() => {---
+	+++$effect.pre(() => {+++
+		---if (!updatingMessages) return;---
+		+++messages;+++
 		const autoscroll = viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;
 
 		if (autoscroll) {
@@ -135,15 +133,15 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 			});
 		}
 
--		updatingMessages = false;
+		---updatingMessages = false;---
 	});
 
 	function handleKeydown(event) {
 		if (event.key === 'Enter') {
 			const text = event.target.value;
 			if (!text) return;
 
--			updatingMessages = true;
+			---updatingMessages = true;---
 			messages = [...messages, text];
 			event.target.value = '';
 		}
@@ -161,12 +159,8 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 		{/each}
 	</div>
 
--	<input on:keydown={handleKeydown} />
-+	<input onkeydown={handleKeydown} />
+	<input +++onkeydown+++={handleKeydown} />
 
--	<button on:click={toggle}>
-+	<button onclick={toggle}>
-		Toggle dark mode
-	</button>
+	<button +++onclick+++={toggle}> Toggle dark mode </button>
 </div>
 ```

documentation/docs/05-misc/02-testing.md

@@ -16,10 +16,10 @@ npm install -D vitest
 
 Then adjust your `vite.config.js`:
 
-```diff
+<!-- prettier-ignore -->
+```js
 /// file: vite.config.js
-- import { defineConfig } from 'vite';
-+ import { defineConfig } from 'vitest/config';
+import { defineConfig } from +++'vitest/config'+++;
 
 export default defineConfig({ /* ... */ })
 ```

documentation/docs/05-misc/04-custom-elements.md

@@ -53,7 +53,7 @@ el.name = 'everybody';
 
 Custom elements are created from Svelte components using a wrapper approach. This means the inner Svelte component has no knowledge that it is a custom element. The custom element wrapper takes care of handling its lifecycle appropriately.
 
-When a custom element is created, the Svelte component it wraps is _not_ created right away. It is only created in the next tick after the `connectedCallback` is invoked. Properties assigned to the custom element before it is inserted into the DOM are temporarily saved and then set on component creation, so their values are not lost. The same does not work for invoking exported functions on the custom element though, they are only available after the element has mounted. If you need to invoke functions before component creation, you can work around it by using the [`extend` option](#component-options).
+When a custom element is created, the Svelte component it wraps is _not_ created right away. It is only created in the next tick after the `connectedCallback` is invoked. Properties assigned to the custom element before it is inserted into the DOM are temporarily saved and then set on component creation, so their values are not lost. The same does not work for invoking exported functions on the custom element though, they are only available after the element has mounted. If you need to invoke functions before component creation, you can work around it by using the [`extend` option](#Component-options).
 
 When a custom element written with Svelte is created or updated, the shadow DOM will reflect the value in the next tick, not immediately. This way updates can be batched, and DOM moves which temporarily (but synchronously) detach the element from the DOM don't lead to unmounting the inner component.