merge main

.changeset/clever-chefs-relate.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow transition undefined payload

.changeset/dry-eggs-play.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve text node output

.changeset/dry-eggs-retire.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve style parser whitespace handling

.changeset/good-cars-visit.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow input elements within button elements

.changeset/itchy-terms-guess.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: apply key animations on proxied arrays

.changeset/old-houses-drum.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: provide `unstate` in server environment

.changeset/old-oranges-compete.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve key block reactivity detection

.changeset/olive-kangaroos-brake.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve internal signal dependency checking logic

.changeset/pre.json

@@ -30,6 +30,8 @@
     "dirty-garlics-design",
     "dirty-tips-add",
     "dry-clocks-grow",
+    "dry-eggs-play",
+    "dry-eggs-retire",
     "dull-mangos-wave",
     "early-ads-tie",
     "eight-steaks-shout",
@@ -49,6 +51,7 @@
     "funny-wombats-argue",
     "gentle-sheep-hug",
     "giant-roses-press",
+    "good-cars-visit",
     "good-pianos-jump",
     "great-icons-retire",
     "green-eggs-approve",
@@ -74,6 +77,7 @@
     "lazy-months-knock",
     "lazy-spiders-think",
     "lemon-geese-drum",
+    "light-humans-hang",
     "light-pens-watch",
     "long-buckets-lay",
     "long-crews-return",
@@ -91,7 +95,9 @@
     "odd-schools-wait",
     "odd-shoes-cheat",
     "old-flies-jog",
+    "old-houses-drum",
     "old-mails-sneeze",
+    "old-oranges-compete",
     "orange-dingos-poke",
     "polite-dolphins-care",
     "polite-pumpkins-guess",
@@ -114,6 +120,7 @@
     "seven-deers-jam",
     "seven-ravens-check",
     "sharp-gorillas-impress",
+    "sharp-kids-happen",
     "sharp-tomatoes-learn",
     "shiny-baboons-play",
     "shiny-shrimps-march",

.changeset/sharp-kids-happen.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: always treat spread attributes as reactive and separate them if needed

.changeset/slimy-walls-draw.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly call exported state

.changeset/stale-books-perform.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: take into account setters when spreading and binding

documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte

@@ -13,7 +13,7 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<button bind:this={btn}>
+<button bind:this={btn} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>

packages/svelte/CHANGELOG.md

@@ -1,5 +1,23 @@
 # svelte
 
+## 5.0.0-next.29
+
+### Patch Changes
+
+- fix: improve text node output ([#10081](https://github.com/sveltejs/svelte/pull/10081))
+
+- fix: improve style parser whitespace handling ([#10077](https://github.com/sveltejs/svelte/pull/10077))
+
+- fix: allow input elements within button elements ([#10083](https://github.com/sveltejs/svelte/pull/10083))
+
+- fix: support TypeScript's `satisfies` operator ([#10068](https://github.com/sveltejs/svelte/pull/10068))
+
+- fix: provide `unstate` in server environment ([`877ff1ee7`](https://github.com/sveltejs/svelte/commit/877ff1ee7d637e2248145d975748e1012a977396))
+
+- fix: improve key block reactivity detection ([#10092](https://github.com/sveltejs/svelte/pull/10092))
+
+- fix: always treat spread attributes as reactive and separate them if needed ([#10071](https://github.com/sveltejs/svelte/pull/10071))
+
 ## 5.0.0-next.28
 
 ### Patch Changes

packages/svelte/package.json

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

packages/svelte/src/compiler/phases/1-parse/read/style.js

@@ -7,7 +7,7 @@ const REGEX_COMBINATOR_WHITESPACE = /^\s*(\+|~|>|\|\|)\s*/;
 const REGEX_COMBINATOR = /^(\+|~|>|\|\|)/;
 const REGEX_PERCENTAGE = /^\d+(\.\d+)?%/;
 const REGEX_NTH_OF =
-	/^\s*(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))(\s*(?=[,)])|\s+of\s+)/;
+	/^(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))((?=\s*[,)])|\s+of\s+)/;
 const REGEX_WHITESPACE_OR_COLON = /[\s:]/;
 const REGEX_BRACE_OR_SEMICOLON = /[{;]/;
 const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/;
@@ -153,6 +153,8 @@ function read_selector_list(parser, inside_pseudo_class = false) {
 	/** @type {import('#compiler').Css.Selector[]} */
 	const children = [];
 
+	allow_comment_or_whitespace(parser);
+
 	const start = parser.index;
 
 	while (parser.index < parser.template.length) {
@@ -286,9 +288,10 @@ function read_selector(parser, inside_pseudo_class = false) {
 			});
 		} else if (inside_pseudo_class && parser.match_regex(REGEX_NTH_OF)) {
 			// nth of matcher must come before combinator matcher to prevent collision else the '+' in '+2n-1' would be parsed as a combinator
+
 			children.push({
 				type: 'Nth',
-				value: /** @type {string} */ (parser.read(REGEX_NTH_OF)),
+				value: /**@type {string} */ (parser.read(REGEX_NTH_OF)),
 				start,
 				end: parser.index
 			});

packages/svelte/src/compiler/phases/1-parse/utils/html.js

@@ -121,15 +121,8 @@ function validate_code(code) {
 
 // based on http://developers.whatwg.org/syntax.html#syntax-tag-omission
 
-const interactive_elements = new Set([
-	'a',
-	'button',
-	'iframe',
-	'embed',
-	'input',
-	'select',
-	'textarea'
-]);
+// while `input` is also an interactive element, it is never moved by the browser, so we don't need to check for it
+const interactive_elements = new Set(['a', 'button', 'iframe', 'embed', 'select', 'textarea']);
 
 /** @type {Record<string, Set<string>>} */
 const disallowed_contents = {

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -7,7 +7,7 @@ import { global_visitors } from './visitors/global.js';
 import { javascript_visitors } from './visitors/javascript.js';
 import { javascript_visitors_runes } from './visitors/javascript-runes.js';
 import { javascript_visitors_legacy } from './visitors/javascript-legacy.js';
-import { serialize_get_binding } from './utils.js';
+import { is_state_source, serialize_get_binding } from './utils.js';
 import { remove_types } from '../typescript.js';
 
 /**
@@ -250,9 +250,7 @@ export function client_component(source, analysis, options) {
 
 	const properties = analysis.exports.map(({ name, alias }) => {
 		const binding = analysis.instance.scope.get(name);
-		const is_source =
-			(binding?.kind === 'state' || binding?.kind === 'frozen_state') &&
-			(!state.analysis.immutable || binding.reassigned);
+		const is_source = binding !== null && is_state_source(binding, state);
 
 		// TODO This is always a getter because the `renamed-instance-exports` test wants it that way.
 		// Should we for code size reasons make it an init in runes mode and/or non-dev mode?

packages/svelte/src/compiler/phases/3-transform/client/utils.js

@@ -46,6 +46,18 @@ export function get_assignment_value(node, { state, visit }) {
 	}
 }
 
+/**
+ * @param {import('#compiler').Binding} binding
+ * @param {import('./types').ClientTransformState} state
+ * @returns {boolean}
+ */
+export function is_state_source(binding, state) {
+	return (
+		(binding.kind === 'state' || binding.kind === 'frozen_state') &&
+		(!state.analysis.immutable || binding.reassigned || state.analysis.accessors)
+	);
+}
+
 /**
  * @param {import('estree').Identifier} node
  * @param {import('./types').ClientTransformState} state
@@ -94,8 +106,7 @@ export function serialize_get_binding(node, state) {
 	}
 
 	if (
-		((binding.kind === 'state' || binding.kind === 'frozen_state') &&
-			(!state.analysis.immutable || state.analysis.accessors || binding.reassigned)) ||
+		is_state_source(binding, state) ||
 		binding.kind === 'derived' ||
 		binding.kind === 'legacy_reactive'
 	) {
@@ -492,33 +503,6 @@ export function get_prop_source(binding, state, name, initial) {
 	return b.call('$.prop', ...args);
 }
 
-/**
- * Creates the output for a state declaration.
- * @param {import('estree').VariableDeclarator} declarator
- * @param {import('../../scope').Scope} scope
- * @param {import('estree').Expression} value
- */
-export function create_state_declarators(declarator, scope, value) {
-	// in the simple `let count = $state(0)` case, we rewrite `$state` as `$.source`
-	if (declarator.id.type === 'Identifier') {
-		return [b.declarator(declarator.id, b.call('$.mutable_source', value))];
-	}
-
-	const tmp = scope.generate('tmp');
-	const paths = extract_paths(declarator.id);
-	return [
-		b.declarator(b.id(tmp), value), // TODO inject declarator for opts, so we can use it below
-		...paths.map((path) => {
-			const value = path.expression?.(b.id(tmp));
-			const binding = scope.get(/** @type {import('estree').Identifier} */ (path.node).name);
-			return b.declarator(
-				path.node,
-				binding?.kind === 'state' ? b.call('$.mutable_source', value) : value
-			);
-		})
-	];
-}
-
 /** @param {import('estree').Expression} node */
 export function should_proxy_or_freeze(node) {
 	if (

packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-legacy.js

@@ -3,11 +3,36 @@ import * as b from '../../../../utils/builders.js';
 import { extract_paths } from '../../../../utils/ast.js';
 import {
 	can_hoist_declaration,
-	create_state_declarators,
 	get_prop_source,
 	serialize_get_binding
 } from '../utils.js';
 
+/**
+ * Creates the output for a state declaration.
+ * @param {import('estree').VariableDeclarator} declarator
+ * @param {import('../../../scope.js').Scope} scope
+ * @param {import('estree').Expression} value
+ */
+function create_state_declarators(declarator, scope, value) {
+	if (declarator.id.type === 'Identifier') {
+		return [b.declarator(declarator.id, b.call('$.mutable_source', value))];
+	}
+
+	const tmp = scope.generate('tmp');
+	const paths = extract_paths(declarator.id);
+	return [
+		b.declarator(b.id(tmp), value),
+		...paths.map((path) => {
+			const value = path.expression?.(b.id(tmp));
+			const binding = scope.get(/** @type {import('estree').Identifier} */ (path.node).name);
+			return b.declarator(
+				path.node,
+				binding?.kind === 'state' ? b.call('$.mutable_source', value) : value
+			);
+		})
+	];
+}
+
 /** @type {import('../types.js').ComponentVisitors} */
 export const javascript_visitors_legacy = {
 	VariableDeclaration(node, { state, visit }) {