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

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

This reverts commit 20b879717a.

* Update packages/svelte/src/internal/client/render.js
pull/12597/head
Rich Harris 5 months ago committed by GitHub
parent c548932390
commit 8d139210b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -1,5 +0,0 @@
---
'svelte': patch
---
breaking: avoid flushing queued updates on mount/hydrate

@ -81,7 +81,8 @@ export function set_text(text, value) {
*/ */
export function mount(component, options) { export function mount(component, options) {
const anchor = options.anchor ?? options.target.appendChild(empty()); 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);
} }
/** /**
@ -114,6 +115,8 @@ export function hydrate(component, options) {
const previous_hydrate_node = hydrate_node; const previous_hydrate_node = hydrate_node;
try { try {
// Don't flush previous effects to ensure order of outer effects stays consistent
return flush_sync(() => {
var anchor = /** @type {TemplateNode} */ (target.firstChild); var anchor = /** @type {TemplateNode} */ (target.firstChild);
while ( while (
anchor && anchor &&
@ -142,7 +145,8 @@ export function hydrate(component, options) {
set_hydrating(false); set_hydrating(false);
return /** @type {Exports} */ (instance); return instance;
}, false);
} catch (error) { } catch (error) {
if (error === HYDRATION_ERROR) { if (error === HYDRATION_ERROR) {
// TODO it's possible for event listeners to have been added and // TODO it's possible for event listeners to have been added and

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

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

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

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

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

Loading…
Cancel
Save