mirror of https://github.com/sveltejs/svelte
Ben McCann
2 years 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';
|
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,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