diff --git a/.changeset/tender-lemons-judge.md b/.changeset/tender-lemons-judge.md new file mode 100644 index 0000000000..10fa155c8f --- /dev/null +++ b/.changeset/tender-lemons-judge.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: improve await block behaviour in non-runes mode diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js index 692d3e7458..4c57f9b564 100644 --- a/packages/svelte/src/internal/client/dom/blocks/await.js +++ b/packages/svelte/src/internal/client/dom/blocks/await.js @@ -2,6 +2,7 @@ import { is_promise, noop } from '../../../shared/utils.js'; import { current_component_context, flush_sync, + is_runes, set_current_component_context, set_current_effect, set_current_reaction, @@ -11,7 +12,7 @@ import { block, branch, pause_effect, resume_effect } from '../../reactivity/eff import { DEV } from 'esm-env'; import { queue_micro_task } from '../task.js'; import { hydrating } from '../hydration.js'; -import { set, source } from '../../reactivity/sources.js'; +import { mutable_source, set, source } from '../../reactivity/sources.js'; const PENDING = 0; const THEN = 1; @@ -27,6 +28,7 @@ const CATCH = 2; * @returns {void} */ export function await_block(anchor, get_input, pending_fn, then_fn, catch_fn) { + var runes = is_runes(); var component_context = current_component_context; /** @type {any} */ @@ -44,8 +46,10 @@ export function await_block(anchor, get_input, pending_fn, then_fn, catch_fn) { /** @type {import('#client').Effect | null} */ var catch_effect; - var input_source = source(/** @type {V} */ (undefined)); - var error_source = source(undefined); + var input_source = runes + ? source(/** @type {V} */ (undefined)) + : mutable_source(/** @type {V} */ (undefined)); + var error_source = runes ? source(undefined) : mutable_source(undefined); var resolved = false; /** diff --git a/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/Card.svelte b/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/Card.svelte new file mode 100644 index 0000000000..e481297e04 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/Card.svelte @@ -0,0 +1,8 @@ + + + diff --git a/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/_config.js new file mode 100644 index 0000000000..67ea2cb0a3 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/_config.js @@ -0,0 +1,20 @@ +import { test } from '../../test'; + +export default test({ + async test({ assert, target }) { + await Promise.resolve(); + assert.htmlEqual( + target.innerHTML, + `\n-------` + ); + + const [b1] = target.querySelectorAll('button'); + + b1.click(); + await Promise.resolve(); + assert.htmlEqual( + target.innerHTML, + `\n-------\n` + ); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/main.svelte b/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/main.svelte new file mode 100644 index 0000000000..ddc1a3142c --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/main.svelte @@ -0,0 +1,30 @@ + + +{#await p_cards then cards} + {#each cards.filter((card) => !card.fav) as card} + {card.fav = !card.fav}}> + {/each} + ------- + {#each cards.filter((card) => card.fav) as card} + {card.fav = !card.fav}}> + {/each} +{/await} + diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md index 00a506c2c5..4a84e3a0f7 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md +++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md @@ -40,7 +40,7 @@ class Todo { > In this example, the compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields -Objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAE42QwWrDMBBEf2URhUhUNEl7c21DviPOwZY3jVpZEtIqUBz9e-UUt9BTj7M784bdmZ21wciq48xsPyGr2MF7Jhl9-kXEKxrCoqNLQS2TOqqgPbWd7cgggU3TgCFCAw-RekJ-3Et4lvByEq-drbe_dlsPichZcFYZrT6amQto2pXw5FO88FUYtG90gUfYi3zvWrYL75vxL57zfA07_zfr23k1vjtt-aZ0bQTcbrDL5ZifZcAxKeS8lzDc8X0xDhJ2ItdbX1jlOZMb9VnjyCoKCfMpfwG975NFVwEAAA==) by wrapping them with [`Proxies`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy): +Only plain objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAE42QwWrDMBBEf2URhUhUNEl7c21DviPOwZY3jVpZEtIqUBz9e-UUt9BTj7M784bdmZ21wciq48xsPyGr2MF7Jhl9-kXEKxrCoqNLQS2TOqqgPbWd7cgggU3TgCFCAw-RekJ-3Et4lvByEq-drbe_dlsPichZcFYZrT6amQto2pXw5FO88FUYtG90gUfYi3zvWrYL75vxL57zfA07_zfr23k1vjtt-aZ0bQTcbrDL5ZifZcAxKeS8lzDc8X0xDhJ2ItdbX1jlOZMb9VnjyCoKCfMpfwG975NFVwEAAA==) by wrapping them with [`Proxies`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy): ```svelte