fix: improve await block behaviour in non-runes mode (#12179)

Fixes #12166. Turns out that the recent refactors here negated the fact that non-runes mode uses a slightly different source signal that has different equality rules.

I also updated the docs in this PR too to reflect that only plain objects and arrays are proxied.

Author: trueadm

.changeset/tender-lemons-judge.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve await block behaviour in non-runes mode

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;
 
 	/**

packages/svelte/tests/runtime-legacy/samples/await-mutate-array/Card.svelte

@@ -0,0 +1,8 @@
+<script>
+	export let card;
+	export let onfav;
+</script>
+
+<button on:click={onfav}>
+	{card.x}
+</button>

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,
+			`<button>1</button><button>2</button><button>3</button><button>4</button>\n-------`
+		);
+
+		const [b1] = target.querySelectorAll('button');
+
+		b1.click();
+		await Promise.resolve();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>2</button><button>3</button><button>4</button>\n-------\n<button>1</button>`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/await-mutate-array/main.svelte

@@ -0,0 +1,30 @@
+<script>
+	import Card from './Card.svelte'
+
+	const x = [{
+		fav: false,
+		x: 1
+	}, {
+		fav: false,
+		x: 2
+	}, {
+		fav: false,
+		x: 3
+	}, {
+		fav: false,
+		x: 4
+	}];
+
+	let p_cards = Promise.resolve(JSON.parse(JSON.stringify(x)));
+</script>
+
+{#await p_cards then cards}
+	{#each cards.filter((card) => !card.fav) as card}
+		<Card {card} onfav={() => {card.fav = !card.fav}}></Card>
+	{/each}
+	-------
+	{#each  cards.filter((card) => card.fav) as card}
+		<Card {card} onfav={() => {card.fav = !card.fav}}></Card>
+	{/each}
+{/await}
+

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
 <script>