Merge branch 'main' into teardown-props

Author: trueadm

.changeset/shy-falcons-occur.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: run effect roots in tree order

documentation/docs/02-runes/01-what-are-runes.md

@@ -2,7 +2,7 @@
 title: What are runes?
 ---
 
-> [!NOTE] **rune** /ro͞on/ _noun_
+> [!NOTE] **rune** /ruːn/ _noun_
 >
 > A letter or mark used as a mystical or magic symbol.
 

documentation/docs/03-template-syntax/01-basic-markup.md

@@ -185,7 +185,7 @@ You can use HTML comments inside components.
 Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
 
 ```svelte
-<!-- svelte-ignore a11y-autofocus -->
+<!-- svelte-ignore a11y_autofocus -->
 <input bind:value={name} autofocus />
 ```
 

package.json

@@ -42,7 +42,7 @@
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "workspace:^",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.2.0",
+    "typescript-eslint": "^8.24.0",
     "v8-natives": "^1.2.5",
     "vitest": "^2.1.9"
   }

packages/svelte/CHANGELOG.md

@@ -1,5 +1,11 @@
 # svelte
 
+## 5.22.2
+
+### Patch Changes
+
+- fix: correctly set `is_updating` before flushing root effects ([#15442](https://github.com/sveltejs/svelte/pull/15442))
+
 ## 5.22.1
 
 ### Patch Changes

packages/svelte/package.json

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

packages/svelte/src/internal/client/reactivity/effects.js

@@ -82,13 +82,12 @@ function push_effect(effect, parent_effect) {
  * @returns {Effect}
  */
 function create_effect(type, fn, sync, push = true) {
-	var is_root = (type & ROOT_EFFECT) !== 0;
-	var parent_effect = active_effect;
+	var parent = active_effect;
 
 	if (DEV) {
 		// Ensure the parent is never an inspect effect
-		while (parent_effect !== null && (parent_effect.f & INSPECT_EFFECT) !== 0) {
-			parent_effect = parent_effect.parent;
+		while (parent !== null && (parent.f & INSPECT_EFFECT) !== 0) {
+			parent = parent.parent;
 		}
 	}
 
@@ -103,7 +102,7 @@ function create_effect(type, fn, sync, push = true) {
 		fn,
 		last: null,
 		next: null,
-		parent: is_root ? null : parent_effect,
+		parent,
 		prev: null,
 		teardown: null,
 		transitions: null,
@@ -136,9 +135,9 @@ function create_effect(type, fn, sync, push = true) {
 		effect.teardown === null &&
 		(effect.f & (EFFECT_HAS_DERIVED | BOUNDARY_EFFECT)) === 0;
 
-	if (!inert && !is_root && push) {
-		if (parent_effect !== null) {
-			push_effect(effect, parent_effect);
+	if (!inert && push) {
+		if (parent !== null) {
+			push_effect(effect, parent);
 		}
 
 		// if we're in a derived, add the effect there too
@@ -391,7 +390,14 @@ export function destroy_effect_children(signal, remove_dom = false) {
 
 	while (effect !== null) {
 		var next = effect.next;
-		destroy_effect(effect, remove_dom);
+
+		if ((effect.f & ROOT_EFFECT) !== 0) {
+			// this is now an independent root
+			effect.parent = null;
+		} else {
+			destroy_effect(effect, remove_dom);
+		}
+
 		effect = next;
 	}
 }

packages/svelte/src/internal/client/runtime.js

@@ -655,8 +655,11 @@ function infinite_loop_guard() {
 }
 
 function flush_queued_root_effects() {
+	var was_updating_effect = is_updating_effect;
+
 	try {
 		var flush_count = 0;
+		is_updating_effect = true;
 
 		while (queued_root_effects.length > 0) {
 			if (flush_count++ > 1000) {
@@ -669,18 +672,13 @@ function flush_queued_root_effects() {
 			queued_root_effects = [];
 
 			for (var i = 0; i < length; i++) {
-				var root = root_effects[i];
-
-				if ((root.f & CLEAN) === 0) {
-					root.f ^= CLEAN;
-				}
-
-				var collected_effects = process_effects(root);
+				var collected_effects = process_effects(root_effects[i]);
 				flush_queued_effects(collected_effects);
 			}
 		}
 	} finally {
 		is_flushing = false;
+		is_updating_effect = was_updating_effect;
 
 		last_scheduled_effect = null;
 		if (DEV) {
@@ -766,11 +764,12 @@ function process_effects(root) {
 	/** @type {Effect[]} */
 	var effects = [];
 
-	var effect = root.first;
+	/** @type {Effect | null} */
+	var effect = root;
 
 	while (effect !== null) {
 		var flags = effect.f;
-		var is_branch = (flags & BRANCH_EFFECT) !== 0;
+		var is_branch = (flags & (BRANCH_EFFECT | ROOT_EFFECT)) !== 0;
 		var is_skippable_branch = is_branch && (flags & CLEAN) !== 0;
 
 		if (!is_skippable_branch && (flags & INERT) === 0) {
@@ -795,6 +794,7 @@ function process_effects(root) {
 				}
 			}
 
+			/** @type {Effect | null} */
 			var child = effect.first;
 
 			if (child !== null) {

packages/svelte/src/version.js

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

packages/svelte/tests/runtime-runes/samples/effect-root-5/_config.js

@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [b1, b2] = target.querySelectorAll('button');
+
+		flushSync(() => b1.click());
+		assert.deepEqual(logs, [0, 1]);
+
+		flushSync(() => b1.click());
+		assert.deepEqual(logs, [0, 1, 2]);
+
+		flushSync(() => b2.click());
+		assert.deepEqual(logs, [0, 1, 2]);
+	}
+});