mirror of https://github.com/sveltejs/svelte
S. Elliott Johnson
2 years ago
commit
33e58868b0
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: infer `svg` namespace correctly
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: keep intermediate number value representations
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: allow modifiying derived props
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: support async/await in destructuring assignments
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: take into account member expressions when determining legacy reactive dependencies
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: make `ComponentType` generic optional
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: silence false positive state warning
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: ensure nested blocks are inert during outro transitions
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: improve ssr template literal generation
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
const a = $state(0);
|
const a = $state(0);
|
||||||
const b = $derived({ a });
|
let b = $derived(a);
|
||||||
b.a += 1;
|
b = 1;
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
const a = $state(0);
|
const a = $state(0);
|
||||||
const b = $derived({ a });
|
let b = $derived(a);
|
||||||
b.a++;
|
b++;
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -0,0 +1,37 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>false</button><button>false</button><button>false</button><button>false</button>`,
|
||||||
|
test({ assert, target }) {
|
||||||
|
const [button1, button2, button3, button4] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
button1.click();
|
||||||
|
flushSync();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>true</button><button>false</button><button>false</button><button>false</button>`
|
||||||
|
);
|
||||||
|
|
||||||
|
button2.click();
|
||||||
|
flushSync();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>true</button><button>true</button><button>false</button><button>false</button>`
|
||||||
|
);
|
||||||
|
|
||||||
|
button3.click();
|
||||||
|
flushSync();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>true</button><button>true</button><button>true</button><button>false</button>`
|
||||||
|
);
|
||||||
|
|
||||||
|
button4.click();
|
||||||
|
flushSync();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>true</button><button>true</button><button>true</button><button>true</button>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
let array;
|
||||||
|
$: {
|
||||||
|
// test that this doesn't rerun on array change
|
||||||
|
array = []
|
||||||
|
array[0] = [false, false];
|
||||||
|
array[1] = [false, false];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each array as row, i}
|
||||||
|
{#each row as item, j}
|
||||||
|
<button on:click={() => array[i][j] = !array[i][j]}>{item}</button>
|
||||||
|
{/each}
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<div class="123"></div><img src="12 hello, world 13">`
|
||||||
|
});
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
let a = 1;
|
||||||
|
let b = 2;
|
||||||
|
let c = 3;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="{a}{b}{c}" />
|
||||||
|
|
||||||
|
<img src="{a}{b} hello, world {a}{c}" />
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>0 / 0</button><button>0 / 0</button>`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [btn1, btn2] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
await btn1?.click();
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>1 / 2</button><button>1 / 2</button>`);
|
||||||
|
|
||||||
|
await btn2?.click();
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>2 / 4</button><button>2 / 4</button>`);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let count = $state(0);
|
||||||
|
let double = $derived({ get value() { return count * 2}, set value(c) { count = c / 2 } });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={() => count++}>{count} / {double.value}</button>
|
||||||
|
<button on:click={() => double.value += 2}>{count} / {double.value}</button>
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `
|
||||||
|
<button>Update me!</button>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
<p>0</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const btn = target.querySelector('button');
|
||||||
|
const clickEvent = new window.Event('click', { bubbles: true });
|
||||||
|
await btn?.dispatchEvent(clickEvent);
|
||||||
|
for (let i = 1; i <= 42; i += 1) {
|
||||||
|
await Promise.resolve();
|
||||||
|
}
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>Update me!</button>
|
||||||
|
<p>1</p>
|
||||||
|
<p>2</p>
|
||||||
|
<p>3</p>
|
||||||
|
<p>4</p>
|
||||||
|
<p>5</p>
|
||||||
|
<p>6</p>
|
||||||
|
<p>7</p>
|
||||||
|
<p>8</p>
|
||||||
|
<p>9</p>
|
||||||
|
<p>10</p>
|
||||||
|
<p>11</p>
|
||||||
|
<p>12</p>
|
||||||
|
<p>13</p>
|
||||||
|
<p>14</p>
|
||||||
|
<p>15</p>
|
||||||
|
<p>16</p>
|
||||||
|
<p>17</p>
|
||||||
|
<p>18</p>
|
||||||
|
<p>19</p>
|
||||||
|
<p>20</p>
|
||||||
|
<p>21</p>
|
||||||
|
<p>22</p>
|
||||||
|
<p>23</p>
|
||||||
|
<p>24</p>
|
||||||
|
<p>25</p>
|
||||||
|
<p>26</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
<script>
|
||||||
|
let a = $state(0);
|
||||||
|
let b = $state(0);
|
||||||
|
let c = $state(0);
|
||||||
|
let d = $state(0);
|
||||||
|
let e = $state(0);
|
||||||
|
let f = $state(0);
|
||||||
|
let g = $state(0);
|
||||||
|
let h = $state(0);
|
||||||
|
let i = $state(0);
|
||||||
|
let j = $state(0);
|
||||||
|
let k = $state(0);
|
||||||
|
let l = $state(0);
|
||||||
|
let m = $state(0);
|
||||||
|
let n = $state(0);
|
||||||
|
let o = $state(0);
|
||||||
|
let p = $state(0);
|
||||||
|
let q = $state(0);
|
||||||
|
let r = $state(0);
|
||||||
|
let s = $state(0);
|
||||||
|
let t = $state(0);
|
||||||
|
let u = $state(0);
|
||||||
|
let v = $state(0);
|
||||||
|
let w = $state(0);
|
||||||
|
let x = $state(0);
|
||||||
|
let y = $state(0);
|
||||||
|
let z = $state(0);
|
||||||
|
|
||||||
|
const get_vwx = () => {
|
||||||
|
return Promise.resolve({ v: 22, rest: [23, 24] });
|
||||||
|
}
|
||||||
|
|
||||||
|
const get_y = () => {
|
||||||
|
return Promise.resolve([24, 25]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const some = {
|
||||||
|
fn: () => {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const update = async () => {
|
||||||
|
[a, b] = [1, await Promise.resolve(2)];
|
||||||
|
({ c = await Promise.resolve(3), d } = { d: 4 });
|
||||||
|
[e] = [await Promise.resolve(2) + await Promise.resolve(3)];
|
||||||
|
({ f = false || await Promise.resolve(6) } = {});
|
||||||
|
let func = Promise.resolve(() => 7);
|
||||||
|
[g = (await func)()] = [];
|
||||||
|
let mult = (a, b) => (a * b);
|
||||||
|
({ h } = { h: mult(2, await Promise.resolve(4))});
|
||||||
|
[i] = [new Date(await Promise.resolve(9)).getTime()];
|
||||||
|
[j = "19" ? 10 : await Promise.resolve(11)] = [];
|
||||||
|
let obj = ({ [await Promise.resolve("prop")]: k } = { prop: 11 });
|
||||||
|
[l = obj[await Promise.resolve("prop")] + 1] = [];
|
||||||
|
[m] = [`${1}${await Promise.resolve("3")}`];
|
||||||
|
[n] = [-(await Promise.resolve(-14))];
|
||||||
|
[o] = [(some.fn(), await Promise.resolve(15))];
|
||||||
|
({ anotherprop: p = await Promise.resolve(16) } = obj);
|
||||||
|
let val1, val2;
|
||||||
|
({ val1 = (async function (x) { return await x; })(Promise.resolve(18)), r = await val1 }
|
||||||
|
= ({ val2 = (async (x) => await x)(Promise.resolve(17)), q = await val2 } = []));
|
||||||
|
({ u = 21 } = ({ t = await Promise.resolve(20) } = ([s] = [await Promise.resolve(19)])));
|
||||||
|
({ v, rest: [w] } = await get_vwx());
|
||||||
|
[x, y, ...{ z = 26 }] = await get_y();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={update}>Update me!</button>
|
||||||
|
<p>{a}</p>
|
||||||
|
<p>{b}</p>
|
||||||
|
<p>{c}</p>
|
||||||
|
<p>{d}</p>
|
||||||
|
<p>{e}</p>
|
||||||
|
<p>{f}</p>
|
||||||
|
<p>{g}</p>
|
||||||
|
<p>{h}</p>
|
||||||
|
<p>{i}</p>
|
||||||
|
<p>{j}</p>
|
||||||
|
<p>{k}</p>
|
||||||
|
<p>{l}</p>
|
||||||
|
<p>{m}</p>
|
||||||
|
<p>{n}</p>
|
||||||
|
<p>{o}</p>
|
||||||
|
<p>{p}</p>
|
||||||
|
<p>{q}</p>
|
||||||
|
<p>{r}</p>
|
||||||
|
<p>{s}</p>
|
||||||
|
<p>{t}</p>
|
||||||
|
<p>{u}</p>
|
||||||
|
<p>{v}</p>
|
||||||
|
<p>{w}</p>
|
||||||
|
<p>{x}</p>
|
||||||
|
<p>{y}</p>
|
||||||
|
<p>{z}</p>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>hide</button><div>hello</div>`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [btn1, btn2] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>hide</button><div style="opacity: 0;">hello</div>`);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
import { fade } from "svelte/transition";
|
||||||
|
|
||||||
|
let state = $state("hello");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => state = ''}>hide</button>
|
||||||
|
|
||||||
|
{#if state}
|
||||||
|
<div in:fade={{ duration: 2000 }} out:fade={{ duration: 2000 }}>
|
||||||
|
{#if true}
|
||||||
|
{state}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<text x="0" y=14>outside</text>
|
||||||
|
|
||||||
|
{#if true}
|
||||||
|
<text x="0" y="26">true</text>
|
||||||
|
{:else}
|
||||||
|
<text x="0" y="26">false</text>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#each Array(3).fill(0) as item, idx}
|
||||||
|
<text x={idx * 10} y={42}>{idx}</text>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<!-- comment should not set infer html namespace -->
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { test, ok } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `
|
||||||
|
<svg>
|
||||||
|
<text x="0" y="14">outside</text>
|
||||||
|
<text x="0" y="26">true</text>
|
||||||
|
<text x="0" y="42">0</text>
|
||||||
|
<text x="10" y="42">1</text>
|
||||||
|
<text x="20" y="42">2</text>
|
||||||
|
</svg>
|
||||||
|
`,
|
||||||
|
test({ assert, target }) {
|
||||||
|
const svg = target.querySelector('svg');
|
||||||
|
ok(svg);
|
||||||
|
|
||||||
|
assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
|
||||||
|
|
||||||
|
const text_elements = target.querySelectorAll('text');
|
||||||
|
|
||||||
|
assert.equal(text_elements.length, 5);
|
||||||
|
|
||||||
|
for (const { namespaceURI } of text_elements)
|
||||||
|
assert.equal(namespaceURI, 'http://www.w3.org/2000/svg');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import Wrapper from "./Wrapper.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg>
|
||||||
|
<Wrapper />
|
||||||
|
</svg>
|
||||||
Loading…
Reference in new issue