mirror of https://github.com/sveltejs/svelte
fix: wait on dependencies of async bindings (#17120)
* fix: wait on dependencies of async bindings Correctly takes into account blockers for bindings. Also ensures it works for functional bindings. During that I also noticed a bug in our `nodes_end` assignment logic, which the added test also regresses against. Fixes #17092 Fixes #17090 * ensure async static props/attributes are awaited * wait on blockers in binding validation * await dependencies of style directives * tidypull/17127/head
Simon H
2 weeks ago
committed by
GitHub
parent
3a4dc7d83d
commit
68d4f9c3b6
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: ensure async static props/attributes are awaited
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: wait on dependencies of async bindings
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: await dependencies of style directives
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
let { value = $bindable() } = $props();
|
||||
</script>
|
||||
|
||||
{value}
|
||||
@ -0,0 +1,14 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['async-server', 'client', 'hydrate'],
|
||||
ssrHtml: 'value value <div>false</div> <input value="value"> <input value="value">',
|
||||
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, 'value value <div>true</div> <input> <input>');
|
||||
assert.deepEqual(logs, [false, 'value', true, 'value']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
|
||||
await Promise.resolve();
|
||||
|
||||
let ref = $state(null);
|
||||
|
||||
$effect(() => console.log(!!ref, value))
|
||||
|
||||
let value = $state('value');
|
||||
</script>
|
||||
|
||||
<Child bind:value />
|
||||
<Child bind:value={() => value, v => value = v} />
|
||||
<div bind:this={ref}>{!!ref}</div>
|
||||
<input bind:value />
|
||||
<input bind:value={() => value, v => value = v} />
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
let { value } = $props();
|
||||
</script>
|
||||
|
||||
{value}
|
||||
@ -0,0 +1,11 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['async-server', 'client', 'hydrate'],
|
||||
ssrHtml: 'value <div class="value"></div>',
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, 'value <div class="value"></div>');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
|
||||
await Promise.resolve();
|
||||
|
||||
let value = 'value';
|
||||
</script>
|
||||
|
||||
<Child {value} />
|
||||
<div class={value}></div>
|
||||
@ -0,0 +1,30 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['async-server', 'client', 'hydrate'],
|
||||
ssrHtml: `
|
||||
<div style="color: red;"></div>
|
||||
<div style="width: 100px;"></div>
|
||||
<button>width</button>
|
||||
<div style="color: red;"></div>
|
||||
<div style="width: 100px;"></div>
|
||||
<button>width</button>
|
||||
`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div style="color: red;"></div>
|
||||
<div style="width: 100px;"></div>
|
||||
<button>width</button>
|
||||
<div style="color: red;"></div>
|
||||
<div style="width: 100px;"></div>
|
||||
<button>width</button>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
await Promise.resolve();
|
||||
|
||||
// static
|
||||
let color = $state('red');
|
||||
|
||||
// dynamic
|
||||
let width = $state('100px');
|
||||
</script>
|
||||
|
||||
<!-- force them into their own template effects -->
|
||||
|
||||
<!-- normal -->
|
||||
{#if color}
|
||||
<div style:color={color}></div>
|
||||
<div style:width={width}></div>
|
||||
<button onclick={() => width = '1px'}>width</button>
|
||||
{/if}
|
||||
|
||||
<!-- shorthand -->
|
||||
{#if color}
|
||||
<div style:color></div>
|
||||
<div style:width></div>
|
||||
<button onclick={() => width = '1px'}>width</button>
|
||||
{/if}
|
||||
Loading…
Reference in new issue