mirror of https://github.com/sveltejs/svelte
S. Elliott Johnson
2 years ago
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';
|
import { test } from '../../test';
|
||||||
|
|
||||||
export default 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 btn = target.querySelector('button');
|
||||||
const clickEvent = new window.Event('click', { bubbles: true });
|
await btn?.click();
|
||||||
await btn?.dispatchEvent(clickEvent);
|
assert.htmlEqual(target.innerHTML, `<button>1 / 1</button>`);
|
||||||
|
|
||||||
assert.htmlEqual(target.innerHTML, `<button>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