mirror of https://github.com/sveltejs/svelte
Ben McCann
1 year ago
commit
8cc7422a61
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: allow transition undefined payload
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: improve text node output
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: improve style parser whitespace handling
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: allow input elements within button elements
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: apply key animations on proxied arrays
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: provide `unstate` in server environment
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: improve key block reactivity detection
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: improve internal signal dependency checking logic
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: always treat spread attributes as reactive and separate them if needed
|
||||
@ -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
|
||||
@ -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,62 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<button class="red">red</button>
|
||||
<button class="red">red</button>
|
||||
<button class="red">red</button>
|
||||
<button class="red">red</button>
|
||||
`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [b1, b2, b3, b4] = target.querySelectorAll('button');
|
||||
|
||||
b1?.click();
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button class="blue">blue</button>
|
||||
<button class="red">red</button>
|
||||
<button class="red">red</button>
|
||||
<button class="red">red</button>
|
||||
`
|
||||
);
|
||||
|
||||
b2?.click();
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button class="blue">blue</button>
|
||||
<button class="blue">blue</button>
|
||||
<button class="red">red</button>
|
||||
<button class="red">red</button>
|
||||
`
|
||||
);
|
||||
|
||||
b3?.click();
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button class="blue">blue</button>
|
||||
<button class="blue">blue</button>
|
||||
<button class="blue">blue</button>
|
||||
<button class="red">red</button>
|
||||
`
|
||||
);
|
||||
|
||||
b4?.click();
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button class="blue">blue</button>
|
||||
<button class="blue">blue</button>
|
||||
<button class="blue">blue</button>
|
||||
<button class="blue">blue</button>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,24 @@
|
||||
<script>
|
||||
let tag = $state('button');
|
||||
let values = $state({ a: 'red', b: 'red', c: 'red', d: 'red' });
|
||||
|
||||
let count = 0;
|
||||
const factory = (name) => {
|
||||
count++;
|
||||
// check that spread effects are isolated from each other
|
||||
if (count > 8) throw new Error('too many calls');
|
||||
|
||||
return {
|
||||
class: values[name],
|
||||
onclick: () => {
|
||||
values[name] = 'blue';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<button {...factory('a')}>{values.a}</button>
|
||||
<button {...factory('b')}>{values.b}</button>
|
||||
|
||||
<svelte:element this={tag} {...factory('c')}>{values.c}</svelte:element>
|
||||
<svelte:element this={tag} {...factory('d')}>{values.d}</svelte:element>
|
||||
@ -0,0 +1,24 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<div style="color: red;"></div><div class="red"></div><div class="red"></div>
|
||||
<div style="color: red;"></div><div class="red"></div><div class="red"></div>
|
||||
<button>toggle</button
|
||||
`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [b1] = target.querySelectorAll('button');
|
||||
|
||||
b1?.click();
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div class="blue" style="color: blue;"></div><div class="blue"></div><div class="blue"></div>
|
||||
<div class="blue" style="color: blue;"></div><div class="blue"></div><div class="blue"></div>
|
||||
<button>toggle</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,5 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<p>A<br>B<br>C<br></p>`
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
let array = $state(['A', 'B', 'C']);
|
||||
</script>
|
||||
|
||||
<p>
|
||||
{#each array as a}
|
||||
{a}<br/>
|
||||
{/each}
|
||||
</p>
|
||||
@ -0,0 +1,39 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<p>test costs $1</p><p>test 2 costs $2</p><p>test costs $1</p><p>test 2 costs $2</p><button>add</button><button>change</button><button>reload</button>`,
|
||||
skip_if_ssr: 'permanent',
|
||||
skip_if_hydrate: 'permanent',
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [btn1, btn2, btn3] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn2.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<p>test costs $1</p><p>test 2 costs $2000</p><p>test costs $1</p><p>test 2 costs $2000</p><button>add</button><button>change</button><button>reload</button>`
|
||||
);
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<p>test costs $1</p><p>test 2 costs $2000</p><p>test 3 costs $3</p><p>test costs $1</p><p>test 2 costs $2000</p><p>test 3 costs $3</p><button>add</button><button>change</button><button>reload</button>`
|
||||
);
|
||||
|
||||
flushSync(() => {
|
||||
btn3.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<p>test costs $1</p><p>test 2 costs $2</p><p>test costs $1</p><p>test 2 costs $2</p><button>add</button><button>change</button><button>reload</button>`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,54 @@
|
||||
<script>
|
||||
let data = $state({ items: [] });
|
||||
|
||||
function fetchData() {
|
||||
data = {
|
||||
items: [{
|
||||
id: 1,
|
||||
price: 1,
|
||||
name: 'test'
|
||||
}, {
|
||||
id: 2,
|
||||
price: 2,
|
||||
name: 'test 2'
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
fetchData();
|
||||
|
||||
function copyItems(original) {
|
||||
return [...original.map((item) => ({ ...item }))];
|
||||
}
|
||||
|
||||
let items = $state();
|
||||
|
||||
$effect(() => {
|
||||
items = copyItems(data.items);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#each items as item}
|
||||
<p>{item.name} costs ${item.price}</p>
|
||||
{/each}
|
||||
|
||||
{#each items as item (item.id)}
|
||||
<p>{item.name} costs ${item.price}</p>
|
||||
{/each}
|
||||
|
||||
|
||||
<button onclick={() => {
|
||||
items.push({
|
||||
id: 3,
|
||||
price: 3,
|
||||
name: 'test 3'
|
||||
})
|
||||
}}>add</button>
|
||||
|
||||
<button onclick={() => {
|
||||
data.items[1].price = 2000
|
||||
}}>change</button>
|
||||
|
||||
<button onclick={() => {
|
||||
fetchData();
|
||||
}}>reload</button>
|
||||
@ -1,16 +0,0 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<div style="color: red;"></div><div class="red"></div><button>toggle</button`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [b1] = target.querySelectorAll('button');
|
||||
|
||||
b1?.click();
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<div class="blue" style="color: blue;"></div><div class="blue"></div><button>toggle</button>'
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -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,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