Revert "breaking: avoid flushing queued updates on mount/hydrate (#12587)"

This reverts commit 20b8797.

Author: Rich-Harris

.changeset/slow-gorillas-yawn.md

@@ -79,7 +79,8 @@ export function set_text(text, value) {
  */
 export function mount(component, options) {
 	const anchor = options.anchor ?? options.target.appendChild(empty());
-	return _mount(component, { ...options, anchor });
+	// Don't flush previous effects to ensure order of outer effects stays consistent
+	return flush_sync(() => _mount(component, { ...options, anchor }), false);
 }
 
 /**
@@ -112,35 +113,40 @@ export function hydrate(component, options) {
 	const previous_hydrate_node = hydrate_node;
 
 	try {
-		var anchor = /** @type {import('#client').TemplateNode} */ (target.firstChild);
-		while (
-			anchor &&
-			(anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
-		) {
-			anchor = /** @type {import('#client').TemplateNode} */ (anchor.nextSibling);
-		}
+		// Don't flush previous effects to ensure order of outer effects stays consistent
+		return flush_sync(() => {
+			var anchor = /** @type {import('#client').TemplateNode} */ (target.firstChild);
+			while (
+				anchor &&
+				(anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
+			) {
+				anchor = /** @type {import('#client').TemplateNode} */ (anchor.nextSibling);
+			}
 
-		if (!anchor) {
-			throw HYDRATION_ERROR;
-		}
+			if (!anchor) {
+				throw HYDRATION_ERROR;
+			}
 
-		set_hydrating(true);
-		set_hydrate_node(/** @type {Comment} */ (anchor));
-		hydrate_next();
+			set_hydrating(true);
+			set_hydrate_node(/** @type {Comment} */ (anchor));
+			hydrate_next();
 
-		const instance = _mount(component, { ...options, anchor });
+			const instance = _mount(component, { ...options, anchor });
 
-		if (
-			hydrate_node.nodeType !== 8 ||
-			/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
-		) {
-			w.hydration_mismatch();
-			throw HYDRATION_ERROR;
-		}
+			if (
+				hydrate_node.nodeType !== 8 ||
+				/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
+			) {
+				w.hydration_mismatch();
+				throw HYDRATION_ERROR;
+			}
 
-		set_hydrating(false);
+			// flush_sync will run this callback and then synchronously run any pending effects,
+			// which don't belong to the hydration phase anymore - therefore reset it here
+			set_hydrating(false);
 
-		return /**  @type {Exports} */ (instance);
+			return instance;
+		}, false);
 	} catch (error) {
 		if (error === HYDRATION_ERROR) {
 			// TODO it's possible for event listeners to have been added and

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

@@ -670,9 +670,10 @@ function process_effects(effect, collected_effects) {
  * Internal version of `flushSync` with the option to not flush previous effects.
  * Returns the result of the passed function, if given.
  * @param {() => any} [fn]
+ * @param {boolean} [flush_previous]
  * @returns {any}
  */
-export function flush_sync(fn) {
+export function flush_sync(fn, flush_previous = true) {
 	var previous_scheduler_mode = current_scheduler_mode;
 	var previous_queued_root_effects = current_queued_root_effects;
 
@@ -686,7 +687,9 @@ export function flush_sync(fn) {
 		current_queued_root_effects = root_effects;
 		is_micro_task_queued = false;
 
-		flush_queued_root_effects(previous_queued_root_effects);
+		if (flush_previous) {
+			flush_queued_root_effects(previous_queued_root_effects);
+		}
 
 		var result = fn?.();
 

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

@@ -8,7 +8,6 @@ import { suite, assert_ok, type BaseTest } from '../suite.js';
 import { createClassComponent } from 'svelte/legacy';
 import { render } from 'svelte/server';
 import type { CompileOptions } from '#compiler';
-import { flushSync } from 'svelte';
 
 interface HydrationTest extends BaseTest {
 	load_compiled?: boolean;
@@ -115,7 +114,6 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 
 		if (!override) {
 			const expected = read(`${cwd}/_expected.html`) ?? rendered.html;
-			flushSync();
 			assert.equal(target.innerHTML.trim(), expected.trim());
 		}
 

packages/svelte/tests/hydration/test.ts

@@ -5,7 +5,6 @@ import config from '__CONFIG__';
 // @ts-expect-error
 import * as assert from 'assert.js';
 import { createClassComponent } from 'svelte/legacy';
-import { flushSync } from 'svelte';
 
 /** @param {HTMLElement} target */
 export default async function (target) {
@@ -46,8 +45,6 @@ export default async function (target) {
 			} while (new Date().getTime() <= start + ms);
 		};
 
-		flushSync();
-
 		if (config.html) {
 			assert.htmlEqual(target.innerHTML, config.html);
 		}

packages/svelte/tests/runtime-browser/driver.js

@@ -1,4 +1,3 @@
-import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -10,7 +9,6 @@ export default test({
 		inputs[1].dispatchEvent(new window.Event('change'));
 		// Hydration shouldn't reset the value to 1
 		hydrate();
-		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,

packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-group/_config.js

@@ -1,4 +1,3 @@
-import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -10,7 +9,6 @@ export default test({
 		input.dispatchEvent(new window.Event('input'));
 		// Hydration shouldn't reset the value to empty
 		hydrate();
-		flushSync();
 
 		assert.htmlEqual(target.innerHTML, '<input type="text">\nfoo');
 	}