mirror of https://github.com/sveltejs/svelte
paoloricciuti
4 months ago
commit
d8f94880fb
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: unlink errored and otherwise finished batch
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
perf: walk composedPath() directly in delegated event propagation
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: transfer effects when merging batches
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: allow `$derived(await ...)` in disconnected effect roots
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: remove temporary raw-text hydration markers
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: declare `let:` directives before `{@const}` declarations on slotted elements
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: correctly coordinate component-level effects inside async blocks
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: make unnecessary commit work less likely
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
chore: add tag name to `a11y_click_events_have_key_events` warning
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: catch rejected promises while merging/committing
|
||||
@ -1 +1 @@
|
||||
<!--[--><!----><script>{}<!----></script><!----><!--]-->
|
||||
<!--[--><!----><script>{}</script><!----><!--]-->
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
props: {
|
||||
css: 'body { color: red; }'
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
let { css } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<svelte:element this="style" type="text/css">{css}</svelte:element>
|
||||
</svelte:head>
|
||||
|
||||
<p>content</p>
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let things;
|
||||
</script>
|
||||
|
||||
{#each things as thing}
|
||||
<slot name="foo" {thing} />
|
||||
{/each}
|
||||
@ -0,0 +1,15 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
// `let:` directives on a slotted element must be declared before sibling `{@const}`
|
||||
// declarations that capture them. In dev mode the `{@const}` derived is read eagerly,
|
||||
// so a wrong declaration order throws "Cannot access '...' before initialization".
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
html: `
|
||||
<div slot="foo"><span>1</span></div>
|
||||
<div slot="foo"><span>2</span></div>
|
||||
`
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
</script>
|
||||
|
||||
<Nested things={[1, 2]}>
|
||||
<div slot="foo" let:thing>
|
||||
{@const props = { thing }}
|
||||
<span>{props.thing}</span>
|
||||
</div>
|
||||
</Nested>
|
||||
@ -0,0 +1,9 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
// Test that an async derived inside an $effect.root not connected to the component tree still works
|
||||
async test({ assert, logs }) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 10));
|
||||
assert.deepEqual(logs, [1]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
$effect.root(() => {
|
||||
async function fn() {
|
||||
const value = $derived(await 1);
|
||||
return { get value() { return value } };
|
||||
}
|
||||
fn().then(r => console.log(r.value));
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,25 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [x, x_y, pop] = target.querySelectorAll('button');
|
||||
|
||||
x.click();
|
||||
await tick();
|
||||
x_y.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<button>x</button> <button>x/y</button> <button>pop</button> 2 1 1'
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
let x = $state(0);
|
||||
let y = $state(0);
|
||||
|
||||
const queued = [];
|
||||
|
||||
function push(v) {
|
||||
if (v === 0) return v;
|
||||
|
||||
return new Promise((fulfil) => {
|
||||
queued.push(() => fulfil(v));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => x++}>x</button>
|
||||
<button onclick={() => {x++;y++}}>x/y</button>
|
||||
<button onclick={() => (queued.pop()?.())}>pop</button>
|
||||
|
||||
{await push(x)} {await push(y)}
|
||||
|
||||
{#if true}
|
||||
{y}
|
||||
{/if}
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [increment] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
increment.click();
|
||||
await tick();
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '<button>increment</button> done');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
let count = $state(0);
|
||||
|
||||
const queued = [];
|
||||
|
||||
function push(v) {
|
||||
if (v === 0) return v;
|
||||
|
||||
return new Promise((fulfil) => {
|
||||
queued.push(() => fulfil(v));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count++}>increment</button>
|
||||
|
||||
{#if count < 3}
|
||||
{await push(count)}
|
||||
{:else}
|
||||
done
|
||||
{/if}
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
let x;
|
||||
$effect(() => console.log(!!x))
|
||||
</script>
|
||||
|
||||
<div bind:this={x}></div>
|
||||
@ -0,0 +1,10 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
// Test that $effect/onMount etc at the top level of components are correctly deferred/coordinated if inside an async block
|
||||
async test({ assert, logs }) {
|
||||
await tick();
|
||||
assert.deepEqual(logs, [true]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
</script>
|
||||
|
||||
<Child foo={await 1} />
|
||||
@ -0,0 +1,25 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [increment, pop] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
increment.click();
|
||||
await tick();
|
||||
increment.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '<button>increment</button><button>pop</button> failed');
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '<button>increment</button><button>pop</button> failed');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
let count = $state(0);
|
||||
|
||||
const queued = [];
|
||||
|
||||
function push(v) {
|
||||
if (v === 0) return v;
|
||||
|
||||
return new Promise((fulfil,reject) => {
|
||||
queued.push(() => v === 3 ? reject('boom') : fulfil(v));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count++}>increment</button>
|
||||
<button onclick={() => queued.pop()?.()}>pop</button>
|
||||
|
||||
<svelte:boundary>
|
||||
{await push(count)}
|
||||
|
||||
{#snippet failed()}failed{/snippet}
|
||||
</svelte:boundary>
|
||||
Loading…
Reference in new issue