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.
pull/12164/head
Dominic Gannaway 1 year ago committed by GitHub
parent e3d8ee6c6d
commit 59f7bd6f9f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

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

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

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

@ -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>`
);
}
});

@ -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}

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

Loading…
Cancel
Save