mirror of https://github.com/sveltejs/svelte
commit
486370e4ee
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: allow transition undefined payload
|
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: apply key animations on proxied arrays
|
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: improve signal consumer tracking behavior
|
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: improve internal signal dependency checking logic
|
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: correctly call exported state
|
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: take into account setters when spreading and binding
|
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: transform `{@render ...}` expression
|
@ -1,13 +1,11 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>0</button>`,
|
||||
html: `<button>0 / 0</button>`,
|
||||
|
||||
async test({ assert, target, window }) {
|
||||
async test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
const clickEvent = new window.Event('click', { bubbles: true });
|
||||
await btn?.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>1</button>`);
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>1 / 1</button>`);
|
||||
}
|
||||
});
|
||||
|
@ -0,0 +1,21 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button class="foo">0</button><button class="foo">0</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [btn1, btn2] = target.querySelectorAll('button');
|
||||
|
||||
await btn1?.click();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button class="foo">1</button><button class="foo">1</button>`
|
||||
);
|
||||
|
||||
await btn2?.click();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button class="foo">2</button><button class="foo">2</button>`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
let { value, ...props } = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<button {...props} onclick={() => value++}>{value}</button>
|
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import Button from './button.svelte';
|
||||
|
||||
let value = $state(0);
|
||||
|
||||
const props = {
|
||||
class: 'foo'
|
||||
};
|
||||
</script>
|
||||
|
||||
<Button {...props} bind:value />
|
||||
<button {...props} onclick={() => value++}>{value}</button>
|
@ -0,0 +1,40 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>Add Item</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [btn1] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Add Item</button><button>Index 0\n|\nItem 0</button><button>Index 1\n|\nItem 1</button>`
|
||||
);
|
||||
|
||||
let [btn2, btn3, btn4] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn4.click();
|
||||
btn3.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>Add Item</button>`);
|
||||
|
||||
let [btn5] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn5.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Add Item</button><button>Index 0\n|\nItem 2</button>`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
let arr = $state([]);
|
||||
let counter = 0
|
||||
|
||||
function addItem() {
|
||||
arr.push(`${counter++}`)
|
||||
}
|
||||
|
||||
function removeItem(i) {
|
||||
arr.splice(i, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={addItem}>Add Item</button>
|
||||
|
||||
{#each arr as item, i}
|
||||
<button onclick={() => removeItem(i)}>Index {i} | Item {item}</button>
|
||||
{/each}
|
@ -0,0 +1,12 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
assert.htmlEqual(target.innerHTML, `0 0 <button>0 / 0</button>`);
|
||||
const [btn] = target.querySelectorAll('button');
|
||||
|
||||
btn?.click();
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(target.innerHTML, '0 1 <button>0 / 1</button>');
|
||||
}
|
||||
});
|
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Sub from './sub.svelte'
|
||||
let sub = $state();
|
||||
</script>
|
||||
|
||||
<Sub bind:this={sub} />
|
||||
<button on:click={() => sub.increment()}>{sub?.count1.value} / {sub?.count2.value}</button>
|
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export const count1 = $state.frozen({value: 0});
|
||||
export const count2 = $state({value: 0});
|
||||
|
||||
export function increment() {
|
||||
count2.value += 1;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{count1.value}
|
||||
{count2.value}
|
||||
|
||||
<!-- so that count1/2 become sources -->
|
||||
<svelte:options accessors />
|
@ -0,0 +1,40 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>show</button><button>animate</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [btn1, btn2] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>show</button><button>animate</button><h1>Hello\n!</h1>`
|
||||
);
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>show</button><button>animate</button>`);
|
||||
|
||||
flushSync(() => {
|
||||
btn2.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>show</button><button>animate</button>`);
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>show</button><button>animate</button><h1 style="opacity: 0;">Hello\n!</h1>`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
let show = $state(false);
|
||||
let animate = $state(false);
|
||||
|
||||
function maybe(node, animate) {
|
||||
if (animate) return fade(node);
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => show = !show}>show</button><button onclick={() => animate = !animate}>animate</button>
|
||||
|
||||
{#if show}
|
||||
<h1 transition:maybe={animate}>Hello {name}!</h1>
|
||||
{/if}
|
@ -0,0 +1,5 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<p>hello world</p>`
|
||||
});
|
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
let snippet = writable(hello);
|
||||
</script>
|
||||
|
||||
{#snippet hello()}
|
||||
<p>hello world</p>
|
||||
{/snippet}
|
||||
|
||||
{@render $snippet()}
|
@ -0,0 +1,22 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<p>0 - 0</p><button>+</button`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [btn1] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<p>1 - 1</p><button>+</button`);
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<p>2 - 2</p><button>+</button`);
|
||||
}
|
||||
});
|
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
let x = $state({a: 0, b:0});
|
||||
let count = 0;
|
||||
</script>
|
||||
|
||||
<p>{x.a} - {x.b}</p>
|
||||
|
||||
<button onclick={() => {
|
||||
const a = ++count;
|
||||
x = {a, b: a};
|
||||
}}>+</button>
|
||||
|
Loading…
Reference in new issue