diff --git a/.changeset/thick-islands-pull.md b/.changeset/thick-islands-pull.md new file mode 100644 index 0000000000..f987d72260 --- /dev/null +++ b/.changeset/thick-islands-pull.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: don't revert source to UNINITIALIZED state when time travelling diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js index 2a732d71d2..61262a6576 100644 --- a/packages/svelte/src/internal/client/dom/blocks/boundary.js +++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js @@ -161,6 +161,10 @@ export class Boundary { this.#hydrate_pending_content(); } else { this.#hydrate_resolved_content(); + + if (this.#pending_count === 0) { + this.is_pending = false; + } } } else { var anchor = this.#get_anchor(); @@ -194,10 +198,6 @@ export class Boundary { } catch (error) { this.error(error); } - - // Since server rendered resolved content, we never show pending state - // Even if client-side async operations are still running, the content is already displayed - this.is_pending = false; } #hydrate_pending_content() { diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js index 09901b5947..24686bae66 100644 --- a/packages/svelte/src/internal/client/reactivity/batch.js +++ b/packages/svelte/src/internal/client/reactivity/batch.js @@ -38,6 +38,7 @@ import { invoke_error_boundary } from '../error-handling.js'; import { flush_eager_effects, old_values, set_eager_effects, source, update } from './sources.js'; import { eager_effect, unlink_effect } from './effects.js'; import { defer_effect } from './utils.js'; +import { UNINITIALIZED } from '../../../constants.js'; /** @type {Set} */ const batches = new Set(); @@ -281,7 +282,7 @@ export class Batch { * @param {any} value */ capture(source, value) { - if (!this.previous.has(source)) { + if (value !== UNINITIALIZED && !this.previous.has(source)) { this.previous.set(source, value); } diff --git a/packages/svelte/tests/hydration/test.ts b/packages/svelte/tests/hydration/test.ts index ba13d2c611..d7257c71d3 100644 --- a/packages/svelte/tests/hydration/test.ts +++ b/packages/svelte/tests/hydration/test.ts @@ -131,19 +131,12 @@ const { test, run } = suite(async (config, cwd) => { flushSync(); - const normalize = (string: string) => - string - .trim() - .replaceAll('\r\n', '\n') - .replaceAll('/>', '>') - .replace(//g, ''); - const expected = read(`${cwd}/_expected.html`) ?? rendered.html; - assert.equal(normalize(target.innerHTML), normalize(expected)); + assert_html_equal(target.innerHTML, expected); if (rendered.head) { const expected = read(`${cwd}/_expected_head.html`) ?? rendered.head; - assert.equal(normalize(head.innerHTML), normalize(expected)); + assert_html_equal(head.innerHTML, expected); } if (config.snapshot) { diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/_config.js new file mode 100644 index 0000000000..49428f90ad --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/_config.js @@ -0,0 +1,18 @@ +import { tick } from 'svelte'; +import { test } from '../../test'; + +export default test({ + skip_no_async: true, + + async test({ assert, target }) { + await tick(); + + assert.htmlEqual( + target.innerHTML, + ` +

baz: 69

+

+ ` + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/main.svelte new file mode 100644 index 0000000000..0e05d0c414 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/main.svelte @@ -0,0 +1,25 @@ + + +

baz: {baz}

+ + + {#snippet pending()} +

Loading...

+ {/snippet} + + {#if qux} +

+ {/if} +