mirror of https://github.com/sveltejs/svelte
Simon Holthausen
7 days ago
commit
26dc5e62ec
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
chore: drop dead code that make TSGO fail
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: don't (re)connect deriveds when read inside branch/root effects
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: skip unnecessary derived effect in earlier batch
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: avoid declaration tag warning in event handlers
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: correctly transform declaration tags during SSR
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: transform computed keys in keyed `{#each}` destructuring patterns
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: chain preprocessor sourcemaps with an empty `sources[0]` instead of dropping them
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: don't treat declaration tags as parts inside each blocks
|
||||
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { getAbortSignal } from "svelte";
|
||||
|
||||
let { count, aborted = $bindable() } = $props()
|
||||
|
||||
let der = $derived.by(()=>{
|
||||
const signal = getAbortSignal();
|
||||
|
||||
signal.addEventListener("abort", () => {
|
||||
try {
|
||||
aborted++;
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
return count;
|
||||
})
|
||||
</script>
|
||||
|
||||
{der}
|
||||
@ -0,0 +1,14 @@
|
||||
import { ok, test } from '../../test';
|
||||
import { flushSync } from 'svelte';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, errors }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, '1 <button>increment</button>');
|
||||
assert.deepEqual(errors, []);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import Child from './Child.svelte'
|
||||
|
||||
let count = $state(0);
|
||||
let aborted = $state(0)
|
||||
</script>
|
||||
|
||||
{aborted}
|
||||
|
||||
<button onclick={() => count++}>increment</button>
|
||||
|
||||
{#if count % 2 === 0}
|
||||
<Child {count} bind:aborted={aborted} />
|
||||
{/if}
|
||||
@ -0,0 +1,32 @@
|
||||
import { test } from '../../test';
|
||||
import { tick } from 'svelte';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [increment, toggle, resolve] = target.querySelectorAll('button');
|
||||
const [div] = target.querySelectorAll('div');
|
||||
|
||||
assert.htmlEqual(div.innerHTML, 'loading');
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(div.innerHTML, '0');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.htmlEqual(div.innerHTML, 'loading');
|
||||
|
||||
toggle.click();
|
||||
await tick();
|
||||
assert.htmlEqual(div.innerHTML, '');
|
||||
|
||||
toggle.click();
|
||||
await tick();
|
||||
assert.htmlEqual(div.innerHTML, 'loading');
|
||||
|
||||
resolve.click(); // this one's for clearing the obsolete/aborted one from the queue
|
||||
await tick();
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(div.innerHTML, '2');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,32 @@
|
||||
<script>
|
||||
import { getAbortSignal } from 'svelte'
|
||||
|
||||
let show = $state(true)
|
||||
let count = $state(0);
|
||||
let queued = [];
|
||||
|
||||
export function sleep(value, signal) {
|
||||
return new Promise((resolve, reject) => {
|
||||
signal.addEventListener('abort', reject, { once: true });
|
||||
queued.push(() => resolve(value));
|
||||
});
|
||||
}
|
||||
|
||||
const double = $derived(sleep(count * 2, getAbortSignal()));
|
||||
</script>
|
||||
|
||||
<button onclick={() => count += 1}>clicks: {count}</button>
|
||||
<button onclick={() => show = !show}>toggle</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
|
||||
<div>
|
||||
{#if show}
|
||||
{#await double}
|
||||
loading
|
||||
{:then value}
|
||||
{value}
|
||||
{:catch}
|
||||
error
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
@ -0,0 +1,42 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO fix
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
|
||||
const [a, b, log, resolve] = target.querySelectorAll('button');
|
||||
const [p] = target.querySelectorAll('p');
|
||||
|
||||
a.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, '0 0 0');
|
||||
|
||||
b.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, '0 0 0');
|
||||
|
||||
log.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [0, 2]);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, '1 0 1');
|
||||
assert.deepEqual(logs, [0, 2, 1]);
|
||||
|
||||
log.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [0, 2, 1, 2]);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, '1 1 2');
|
||||
assert.deepEqual(logs, [0, 2, 1, 2, 2]);
|
||||
|
||||
log.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [0, 2, 1, 2, 2, 2]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
|
||||
let d = $derived(a + b);
|
||||
|
||||
let queued = [];
|
||||
function push(v) {
|
||||
if (!v) return v;
|
||||
return new Promise((resolve) => {
|
||||
queued.push(() => resolve(v));
|
||||
});
|
||||
}
|
||||
|
||||
$effect(() => console.log(d));
|
||||
</script>
|
||||
|
||||
<button onclick={() => a++}>a++</button>
|
||||
<button onclick={() => b++}>b++</button>
|
||||
<button onclick={() => console.log(d)}>log d</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
|
||||
<p>{await push(a)} {await push(b)} {d}</p>
|
||||
@ -0,0 +1,35 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO fix
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
|
||||
const [a, b, log, resolve] = target.querySelectorAll('button');
|
||||
const [div] = target.querySelectorAll('div');
|
||||
|
||||
assert.deepEqual(logs, ['e1 0', 'e2 0']);
|
||||
logs.length = 0;
|
||||
|
||||
a.click();
|
||||
await tick();
|
||||
assert.htmlEqual(div.innerHTML, '<p>0</p> <p>0</p> <p>0</p>');
|
||||
|
||||
b.click();
|
||||
await tick();
|
||||
assert.htmlEqual(div.innerHTML, '<p>0</p> <p>1</p> <p>1</p>');
|
||||
|
||||
log.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, ['e1 1', 'e2 1', 'runs 2']); // ideally it's only 2 runs, one or two more would also be acceptable but not the 8 that it's today
|
||||
logs.length = 0;
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
log.click();
|
||||
await tick();
|
||||
assert.htmlEqual(div.innerHTML, '<p>1</p> <p>2</p> <p>2</p>');
|
||||
assert.deepEqual(logs, ['e1 2', 'e2 2', 'runs 3']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
let runs = 0;
|
||||
|
||||
let d = $derived((runs++, a + b));
|
||||
|
||||
const queued = [];
|
||||
function push(v) {
|
||||
if (!v) return v;
|
||||
return new Promise((resolve) => {
|
||||
queued.push(() => resolve(v));
|
||||
});
|
||||
}
|
||||
|
||||
$effect(() => console.log('e1 ' + d));
|
||||
$effect(() => console.log('e2 ' + d));
|
||||
</script>
|
||||
|
||||
<button onclick={() => a++}>a++</button>
|
||||
<button onclick={() => b++}>b++</button>
|
||||
<button onclick={() => console.log('runs ' + runs)}>log runs</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
|
||||
<div>
|
||||
<p>{await push(a)}</p>
|
||||
<p>{d}</p>
|
||||
<p>{d}</p>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO fix
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
|
||||
const [a, b, resolve] = target.querySelectorAll('button');
|
||||
const [p] = target.querySelectorAll('p');
|
||||
|
||||
assert.deepEqual(logs, ['b: 0, d: 0']);
|
||||
logs.length = 0;
|
||||
|
||||
a.click();
|
||||
await tick();
|
||||
b.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, '0 1');
|
||||
assert.deepEqual(logs, ['b: 1, d: 0']);
|
||||
logs.length = 0;
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, '2 1');
|
||||
assert.deepEqual(logs, ['b: 1, d: 2']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
|
||||
let d = $derived(a * 2);
|
||||
|
||||
const queued = [];
|
||||
function push(v) {
|
||||
if (!v) return v;
|
||||
return new Promise((resolve) => {
|
||||
queued.push(() => resolve(v));
|
||||
});
|
||||
}
|
||||
|
||||
$effect(() => console.log(`b: ${b}, d: ${d}`));
|
||||
</script>
|
||||
|
||||
<button onclick={() => a++}>a++</button>
|
||||
<button onclick={() => b++}>b++</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
|
||||
<p>{await push(d)} {b}</p>
|
||||
@ -0,0 +1,2 @@
|
||||
<div>value=0</div>
|
||||
<div>eager=0</div>
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let props = $props();
|
||||
const value = $derived(props.number ?? 0);
|
||||
</script>
|
||||
|
||||
<div>value={value}</div>
|
||||
<div>eager={$state.eager(value)}</div>
|
||||
Loading…
Reference in new issue