Merge branch 'main' into feat/tizu-crossfade-strategy

Author: tizu69

.changeset/brown-rockets-shake.md

@@ -10,13 +10,13 @@ You don't have to migrate to the new syntax right away - Svelte 5 still supports
 
 At the heart of Svelte 5 is the new runes API. Runes are basically compiler instructions that inform Svelte about reactivity. Syntactically, runes are functions starting with a dollar-sign.
 
-### let -> $state
+### let → $state
 
 In Svelte 4, a `let` declaration at the top level of a component was implicitly reactive. In Svelte 5, things are more explicit: a variable is reactive when created using the `$state` rune. Let's migrate the counter to runes mode by wrapping the counter in `$state`:
 
 ```svelte
 <script>
-	let count = +++$state(+++0+++)+++;
+	let count = +++$state(0)+++;
 </script>
 ```
 
@@ -25,14 +25,14 @@ Nothing else changes. `count` is still the number itself, and you read and write
 > [!DETAILS] Why we did this
 > `let` being implicitly reactive at the top level worked great, but it meant that reactivity was constrained - a `let` declaration anywhere else was not reactive. This forced you to resort to using stores when refactoring code out of the top level of components for reuse. This meant you had to learn an entirely separate reactivity model, and the result often wasn't as nice to work with. Because reactivity is more explicit in Svelte 5, you can keep using the same API outside the top level of components. Head to [the tutorial](/tutorial) to learn more.
 
-### $: -> $derived/$effect
+### $: → $derived/$effect
 
 In Svelte 4, a `$:` statement at the top level of a component could be used to declare a derivation, i.e. state that is entirely defined through a computation of other state. In Svelte 5, this is achieved using the `$derived` rune:
 
 ```svelte
 <script>
-	let count = +++$state(+++0+++)+++;
-	---$:--- +++const+++ double = +++$derived(+++count * 2+++)+++;
+	let count = $state(0);
+	---$:--- +++const+++ double = +++$derived(count * 2)+++;
 </script>
 ```
 
@@ -42,7 +42,8 @@ A `$:` statement could also be used to create side effects. In Svelte 5, this is
 
 ```svelte
 <script>
-	let count = +++$state(+++0+++)+++;
+	let count = $state(0);
+
 	---$:---+++$effect(() =>+++ {
 		if (count > 5) {
 			alert('Count is too high!');
@@ -73,14 +74,14 @@ Note that [when `$effect` runs is different]($effect#Understanding-dependencies)
 > - executing dependencies as needed and therefore being immune to ordering problems
 > - being TypeScript-friendly
 
-### export let -> $props
+### export let → $props
 
 In Svelte 4, properties of a component were declared using `export let`. Each property was one declaration. In Svelte 5, all properties are declared through the `$props` rune, through destructuring:
 
 ```svelte
 <script>
-	---export let optional = 'unset';
-	export let required;---
+	---export let optional = 'unset';---
+	---export let required;---
 	+++let { optional = 'unset', required } = $props();+++
 </script>
 ```
@@ -105,8 +106,8 @@ In Svelte 5, the `$props` rune makes this straightforward without any additional
 
 ```svelte
 <script>
-	---let klass = '';
-	export { klass as class};---
+	---let klass = '';---
+	---export { klass as class};---
 	+++let { class: klass, ...rest } = $props();+++
 </script>
 <button class={klass} {...---$$restProps---+++rest+++}>click me</button>
@@ -192,9 +193,9 @@ This function is deprecated in Svelte 5. Instead, components should accept _call
 ```svelte
 <!--- file: Pump.svelte --->
 <script>
-    ---import { createEventDispatcher } from 'svelte';
-    const dispatch = createEventDispatcher();
-    ---
+	---import { createEventDispatcher } from 'svelte';---
+	---const dispatch = createEventDispatcher();---
+
 	+++let { inflate, deflate } = $props();+++
 	let power = $state(5);
 </script>
@@ -466,11 +467,11 @@ By now you should have a pretty good understanding of the before/after and how t
 We thought the same, which is why we provide a migration script to do most of the migration automatically. You can upgrade your project by using `npx sv migrate svelte-5`. This will do the following things:
 
 - bump core dependencies in your `package.json`
-- migrate to runes (`let` -> `$state` etc)
-- migrate to event attributes for DOM elements (`on:click` -> `onclick`)
-- migrate slot creations to render tags (`<slot />` -> `{@render children()}`)
-- migrate slot usages to snippets (`<div slot="x">...</div>` -> `{#snippet x()}<div>...</div>{/snippet}`)
-- migrate obvious component creations (`new Component(...)` -> `mount(Component, ...)`)
+- migrate to runes (`let` → `$state` etc)
+- migrate to event attributes for DOM elements (`on:click` → `onclick`)
+- migrate slot creations to render tags (`<slot />` → `{@render children()}`)
+- migrate slot usages to snippets (`<div slot="x">...</div>` → `{#snippet x()}<div>...</div>{/snippet}`)
+- migrate obvious component creations (`new Component(...)` → `mount(Component, ...)`)
 
 You can also migrate a single component in VS Code through the `Migrate Component to Svelte 5 Syntax` command, or in our Playground through the `Migrate` button.
 

.changeset/cuddly-chefs-refuse.md

@@ -1,5 +1,23 @@
 # svelte
 
+## 5.23.1
+
+### Patch Changes
+
+- fix: invalidate parent effects when child effects update parent dependencies ([#15506](https://github.com/sveltejs/svelte/pull/15506))
+
+- fix: correctly match `:has()` selector during css pruning ([#15277](https://github.com/sveltejs/svelte/pull/15277))
+
+- fix: replace `undefined` with `void 0` to avoid edge case ([#15511](https://github.com/sveltejs/svelte/pull/15511))
+
+- fix: allow global-like pseudo-selectors refinement ([#15313](https://github.com/sveltejs/svelte/pull/15313))
+
+- chore: don't distribute unused types definitions ([#15473](https://github.com/sveltejs/svelte/pull/15473))
+
+- fix: add `files` and `group` to HTMLInputAttributes in elements.d.ts ([#15492](https://github.com/sveltejs/svelte/pull/15492))
+
+- fix: throw rune_invalid_arguments_length when $state.raw() is used with more than 1 arg ([#15516](https://github.com/sveltejs/svelte/pull/15516))
+
 ## 5.23.0
 
 ### Minor Changes

.changeset/curvy-countries-flow.md

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.23.0",
+  "version": "5.23.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

.changeset/gold-hairs-jog.md

@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.23.0';
+export const VERSION = '5.23.1';
 export const PUBLIC_VERSION = '5';