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>
|
||||
const a = $state(0);
|
||||
const b = $derived({ a });
|
||||
b.a += 1;
|
||||
let b = $derived(a);
|
||||
b = 1;
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
const a = $state(0);
|
||||
const b = $derived({ a });
|
||||
b.a++;
|
||||
let b = $derived(a);
|
||||
b++;
|
||||
</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