mirror of https://github.com/sveltejs/svelte
Mathias Picker
4 months ago
committed by
GitHub
commit
da7b7a3198
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: don't rebase just-created batches
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: flush eager effects in production
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: account for proxified instance when updating `bind:this`
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: ensure scheduled batch is flushed if not obsolete
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: resolve stale deriveds with latest value
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: inline primitive constants in attribute values during SSR
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: allow `@debug` tags to reference awaited variables
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: re-run fallback props if dependencies update
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: ignore comments when reading CSS values
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: ignore false-positive errors of `$inspect` dependencies
|
||||
@ -0,0 +1,33 @@
|
||||
import { afterAll, beforeAll, expect, test } from 'vitest';
|
||||
import { Renderer } from './renderer.js';
|
||||
import type { Component } from 'svelte';
|
||||
import { disable_async_mode_flag, enable_async_mode_flag } from '../flags/index.js';
|
||||
import { hydratable } from './hydratable.js';
|
||||
|
||||
beforeAll(() => {
|
||||
enable_async_mode_flag();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
disable_async_mode_flag();
|
||||
});
|
||||
|
||||
test('treats replacement tokens in hydratable promise values as literals', async () => {
|
||||
const component = (renderer: Renderer) => {
|
||||
hydratable('key', () => Promise.resolve(`$'`));
|
||||
renderer.child(async () => {
|
||||
await Promise.resolve();
|
||||
});
|
||||
renderer.push('ok');
|
||||
};
|
||||
|
||||
const { head } = await Renderer.render(component as unknown as Component);
|
||||
const script_match = head.match(/<script(?:\s[^>]*)?>([\s\S]*)<\/script>/);
|
||||
|
||||
expect(script_match, 'expected hydratable script in head output').toBeTruthy();
|
||||
|
||||
const script_content = script_match![1];
|
||||
expect(script_content).toContain('const h = (window.__svelte ??= {}).h ??= new Map();');
|
||||
expect(script_content).toContain('r("$\'")');
|
||||
expect(script_content).toMatch(/\[\s*"key"\s*,\s*r\("\$'"\)\s*\]/);
|
||||
});
|
||||
@ -0,0 +1,50 @@
|
||||
import { expect, test } from 'vitest';
|
||||
import { REGEX_VALID_TAG_NAME } from './utils';
|
||||
|
||||
test('REGEX_VALID_TAG_NAME accepts common HTML tag names', () => {
|
||||
const common_html_tag_names = ['div', 'span', 'button', 'input', 'svg', 'math', 'a'];
|
||||
|
||||
for (const tag_name of common_html_tag_names) {
|
||||
expect(REGEX_VALID_TAG_NAME.test(tag_name)).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
test('REGEX_VALID_TAG_NAME accepts basic custom element names', () => {
|
||||
const valid_custom_tag_names = ['my-element', 'x-foo', 'todo-item', 'my-element2'];
|
||||
|
||||
for (const tag_name of valid_custom_tag_names) {
|
||||
expect(REGEX_VALID_TAG_NAME.test(tag_name)).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
test('REGEX_VALID_TAG_NAME accepts spec-allowed custom element characters', () => {
|
||||
const valid_custom_tag_names = [
|
||||
'x-foo.bar',
|
||||
'x-foo_bar',
|
||||
'x-foo\u00B7bar',
|
||||
'x-foo\u00FCbar',
|
||||
'x-foo\u{1F600}bar',
|
||||
'x-'
|
||||
];
|
||||
|
||||
for (const tag_name of valid_custom_tag_names) {
|
||||
expect(REGEX_VALID_TAG_NAME.test(tag_name)).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
test('REGEX_VALID_TAG_NAME rejects invalid tag names', () => {
|
||||
const invalid_tag_names = ['', '1', 'x\u00FC', '-x-foo', '1foo', 'x-foo bar', 'x-foo/', 'x-foo>'];
|
||||
|
||||
for (const tag_name of invalid_tag_names) {
|
||||
expect(REGEX_VALID_TAG_NAME.test(tag_name)).toBe(false);
|
||||
}
|
||||
});
|
||||
|
||||
test('REGEX_VALID_TAG_NAME no ReDoS', () => {
|
||||
const before = performance.now();
|
||||
REGEX_VALID_TAG_NAME.test('a-----------------------------------!');
|
||||
const after = performance.now();
|
||||
if (after - before > 10) {
|
||||
throw new Error(`REGEX_VALID_TAG_NAME is vulnerable to ReDoS`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
<style>
|
||||
@keyframes foo {
|
||||
0% { left: 0px; }
|
||||
50% { left: 50px; }
|
||||
100% { left: 100px; }
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<style>
|
||||
@keyframes foo {
|
||||
0% {
|
||||
left: 0px;
|
||||
}
|
||||
50% {
|
||||
left: 50px;
|
||||
}
|
||||
100% {
|
||||
left: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1 @@
|
||||
<svelte:body onmousemove={handleMousemove} />
|
||||
@ -0,0 +1 @@
|
||||
<svelte:body onmousemove={handleMousemove}></svelte:body>
|
||||
@ -0,0 +1,23 @@
|
||||
import { assert_ok, test } from '../../assert';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, waitUntil, window }) {
|
||||
const form = target.querySelector('form');
|
||||
const button = target.querySelector('button');
|
||||
const [i1, i2, i3] = target.querySelectorAll('input');
|
||||
assert_ok(form);
|
||||
assert_ok(button);
|
||||
|
||||
assert.equal(form.id, 'initial-form');
|
||||
assert.equal(form.className, 'first');
|
||||
assert.equal(window.getComputedStyle(form).backgroundColor, 'rgb(255, 0, 0)');
|
||||
|
||||
button.click();
|
||||
await waitUntil(() => form.id === 'updated-form');
|
||||
|
||||
assert.equal(form.id, 'updated-form');
|
||||
assert.equal(form.className, 'second');
|
||||
assert.equal(i3.id, '', 'input clobbered form');
|
||||
assert.equal(window.getComputedStyle(form).backgroundColor, 'rgb(0, 0, 255)');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
let form_attributes = $state({ id: 'initial-form' });
|
||||
let class_name = $state('first');
|
||||
let background_color = $state('rgb(255, 0, 0)');
|
||||
|
||||
function update() {
|
||||
form_attributes = { id: 'updated-form' };
|
||||
class_name = 'second';
|
||||
background_color = 'rgb(0, 0, 255)';
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={update}>update</button>
|
||||
|
||||
<form {...form_attributes} class={class_name} style:background-color={background_color}>
|
||||
<!-- the once non-symbol-ified hidden properties we used -->
|
||||
<input {...{ name: '__className' }} value="x" />
|
||||
<input {...{ name: '__style' }} value="y" />
|
||||
<input {...{ name: '__attributes' }} value="z" />
|
||||
</form>
|
||||
@ -0,0 +1,30 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [increment, shift, middle] = target.querySelectorAll('button');
|
||||
const [div] = target.querySelectorAll('div');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
increment.click();
|
||||
await tick();
|
||||
increment.click();
|
||||
await tick();
|
||||
middle.click(); // resolve the second increment which will make the if block go away and the first batch discarded
|
||||
await tick();
|
||||
assert.htmlEqual(div.innerHTML, '2 2');
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
shift.click();
|
||||
await tick();
|
||||
shift.click();
|
||||
await tick();
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(div.innerHTML, '3 3');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
|
||||
const deferred = [];
|
||||
|
||||
function delay(value) {
|
||||
if (!value) return value;
|
||||
return new Promise((resolve) => deferred.push(() => resolve(value)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{a} {await delay(a)}
|
||||
{#if a < 2}
|
||||
{await delay(a)}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<button onclick={() => {a++;}}>a++</button>
|
||||
<button onclick={() => deferred.shift()?.()}>shift</button>
|
||||
<button onclick={() => deferred[2]()}>middle</button>
|
||||
@ -0,0 +1,19 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// Tests that batch.#commit() does not null out a potentially new current_batch
|
||||
export default test({
|
||||
skip_initial_flushSync: true, // test that the initial batch is flushed without an explicit flushSync() call
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
|
||||
const [button] = target.querySelectorAll('button');
|
||||
const [updates] = target.querySelectorAll('p');
|
||||
|
||||
assert.htmlEqual(updates.innerHTML, 'false');
|
||||
|
||||
button.click();
|
||||
await tick();
|
||||
assert.htmlEqual(updates.innerHTML, 'true');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,30 @@
|
||||
<script>
|
||||
let count = $state(-1);
|
||||
let payload = $state(false);
|
||||
let updated = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (payload) {
|
||||
updated = true;
|
||||
}
|
||||
});
|
||||
|
||||
function update() {
|
||||
count = 0;
|
||||
queueMicrotask(() => {
|
||||
payload = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={update}>update</button>
|
||||
|
||||
<p>{updated}</p>
|
||||
|
||||
<svelte:boundary>
|
||||
{await new Promise(() => {})}
|
||||
|
||||
{#snippet pending()}
|
||||
<p>pending</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,23 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [increment, resolve] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<button>increment</button> <button>resolve</button> 0 <p>loading...</p>'
|
||||
);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<button>increment</button> <button>resolve</button> 1 <p>1</p>'
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
let count = $state(0);
|
||||
|
||||
const queued = [];
|
||||
|
||||
async function delay(v) {
|
||||
if (!v) return v;
|
||||
return new Promise(r => queued.push(() => r(v)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count++}>increment</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
|
||||
{await delay(count)}
|
||||
{#if $state.eager(count) !== count}
|
||||
<p>loading...</p>
|
||||
{:else}
|
||||
<p>{count}</p>
|
||||
{/if}
|
||||
@ -0,0 +1,32 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
const [increment, resolve] = target.querySelectorAll('button');
|
||||
logs.length = 0;
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>increment</button> <button>resolve</button>
|
||||
<ul><li>0 / 0</li><li>0 / loading...</li><li>0 / 0</li></ul>`
|
||||
);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>increment</button> <button>resolve</button>
|
||||
<ul><li>0 / 0</li><li>1 / 1</li><li>0 / 0</li></ul>`
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
logs.some((l) => l.toString().includes('0 ') || l.toString().includes('2')),
|
||||
false,
|
||||
'only the second $state.eager should have been evaluated'
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,24 @@
|
||||
<script>
|
||||
let counts = $state([0, 0, 0]);
|
||||
const queued = [];
|
||||
async function delay(v) {
|
||||
if (!v) return v;
|
||||
return new Promise(r => queued.push(() => r(v)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => counts[1]++}>increment</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
|
||||
<ul>
|
||||
{#each counts as count, i}
|
||||
<li>
|
||||
{await delay(count)} /
|
||||
{#if console.log(i) || $state.eager(count) !== count}
|
||||
loading...
|
||||
{:else}
|
||||
{count}
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
@ -0,0 +1,25 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
|
||||
const [increment, shift] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, '<button>clicks: 0</button><button>shift</button> 0');
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, '<button>clicks: 1</button><button>shift</button> 1');
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, '<button>clicks: 2</button><button>shift</button> 2');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { flushSync } from 'svelte';
|
||||
|
||||
let count = $state(0);
|
||||
|
||||
const queue: Array<() => void> = [];
|
||||
|
||||
$effect(() => {
|
||||
if (count === 1) {
|
||||
count = 2;
|
||||
flushSync();
|
||||
}
|
||||
})
|
||||
|
||||
function push(v: number) {
|
||||
if (v === 0) return v;
|
||||
return new Promise(r => queue.push(() => r(v)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count += 1}>
|
||||
clicks: {count}
|
||||
</button>
|
||||
<button onclick={() => queue.shift()?.()}>shift</button>
|
||||
{await push(count)}
|
||||
@ -0,0 +1,20 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [increment, pop] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
increment.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>increment</button> <button>pop</button> 2 2 1`);
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>increment</button> <button>pop</button> 2 2 1`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,26 @@
|
||||
<script>
|
||||
let count = $state(0);
|
||||
let other = $state(0);
|
||||
|
||||
const queue = [];
|
||||
function push(v) {
|
||||
return new Promise((r,e) => queue.push(() => v === 1 ? e(v) : r(v)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => {
|
||||
if (count === 0) {
|
||||
other++;
|
||||
count++;
|
||||
} else {
|
||||
count++
|
||||
}
|
||||
}}>increment</button>
|
||||
<button onclick={() => queue.pop()?.()}>pop</button>
|
||||
|
||||
{#if count > 0}
|
||||
<svelte:boundary>
|
||||
{await push(count)} {count} {other}
|
||||
{#snippet failed()}boom{/snippet}
|
||||
</svelte:boundary>
|
||||
{/if}
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
let { count } = $props();
|
||||
let double = $derived(count * 2);
|
||||
|
||||
$effect.pre(() => console.log(count, double));
|
||||
</script>
|
||||
@ -0,0 +1,27 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs, warnings }) {
|
||||
const [increment, resolve] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [1, 2]);
|
||||
|
||||
// no await waterfall / inert derived warnings
|
||||
assert.deepEqual(warnings, []);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,31 @@
|
||||
<script>
|
||||
import Child from "./Child.svelte";
|
||||
let count = $state(0);
|
||||
|
||||
let deferreds = [];
|
||||
|
||||
function push(v) {
|
||||
return new Promise((resolve, reject) => {
|
||||
deferreds.push({ resolve: () => resolve(v), reject });
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count += 1}>increment</button>
|
||||
<button onclick={() => deferreds.shift()?.resolve()}>resolve</button>
|
||||
|
||||
<svelte:boundary>
|
||||
{#if count % 2 === 0}
|
||||
{@const double = count * 2}
|
||||
<p>true</p>
|
||||
{await push(count)} {double}
|
||||
<Child count={await push(count)} />
|
||||
{:else}
|
||||
<p>false</p>
|
||||
<Child count={await push(count)} />
|
||||
{/if}
|
||||
|
||||
{#snippet pending()}
|
||||
<p>loading...</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,24 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
import { normalise_trace_logs } from '../../../helpers.js';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
html: '<p>pending</p>',
|
||||
async test({ assert, target, warnings }) {
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<h1>number -> number -> number -> return -> body failed -> ended</h1>'
|
||||
);
|
||||
|
||||
assert.deepEqual(normalise_trace_logs(warnings), [
|
||||
{
|
||||
log: 'Detected reactivity loss when reading `values[1]`. This happens when state is read in an async function after an earlier `await`'
|
||||
}
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,45 @@
|
||||
<script>
|
||||
let values = $state([0, 1, 2]);
|
||||
|
||||
async function get_result() {
|
||||
const logs = [];
|
||||
|
||||
const iterator = {
|
||||
index: 0,
|
||||
async next() {
|
||||
if (this.index > 2) { done: true }
|
||||
return { done: false, value: values[this.index++] };
|
||||
},
|
||||
async return() {
|
||||
logs.push('return');
|
||||
},
|
||||
[Symbol.asyncIterator]() {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
for await (const value of iterator) {
|
||||
logs.push('number');
|
||||
// Read reactive state after async iterator await.
|
||||
if (values.length === 3 && value === 2) {
|
||||
throw new Error('body failed');
|
||||
}
|
||||
}
|
||||
logs.push('done');
|
||||
} catch (error) {
|
||||
logs.push(error.message);
|
||||
}
|
||||
|
||||
logs.push('ended');
|
||||
return logs.join(' -> ');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:boundary>
|
||||
<h1>{await get_result()}</h1>
|
||||
|
||||
{#snippet pending()}
|
||||
<p>pending</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,21 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
import { normalise_trace_logs } from '../../../helpers.js';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
html: '<p>pending</p>',
|
||||
async test({ assert, target, warnings }) {
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, '<h1>number -> number -> next failed -> ended</h1>');
|
||||
|
||||
assert.deepEqual(normalise_trace_logs(warnings), [
|
||||
{
|
||||
log: 'Detected reactivity loss when reading `values[1]`. This happens when state is read in an async function after an earlier `await`'
|
||||
}
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,43 @@
|
||||
<script>
|
||||
let values = $state([0, 1, 2]);
|
||||
|
||||
async function get_result() {
|
||||
const logs = [];
|
||||
|
||||
const iterator = {
|
||||
index: 0,
|
||||
async next() {
|
||||
if (this.index > 1) throw new Error('next failed');
|
||||
return { done: false, value: values[this.index++] };
|
||||
},
|
||||
async return() {
|
||||
logs.push('return');
|
||||
},
|
||||
[Symbol.asyncIterator]() {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
for await (const value of iterator) {
|
||||
logs.push('number');
|
||||
// Read reactive state after async iterator await.
|
||||
values.length === value;
|
||||
}
|
||||
logs.push('done');
|
||||
} catch (error) {
|
||||
logs.push(error.message);
|
||||
}
|
||||
|
||||
logs.push('ended');
|
||||
return logs.join(' -> ');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:boundary>
|
||||
<h1>{await get_result()}</h1>
|
||||
|
||||
{#snippet pending()}
|
||||
<p>pending</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import { push } from "./main.svelte";
|
||||
const x = await push(1);
|
||||
const y = await push(2);
|
||||
</script>
|
||||
|
||||
{x} {y}
|
||||
@ -0,0 +1,26 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [show, resolve, count] = target.querySelectorAll('button');
|
||||
|
||||
show.click();
|
||||
await tick();
|
||||
resolve.click();
|
||||
await tick();
|
||||
count.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<button>show</button> <button>resolve</button> <button>1</button>'
|
||||
);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'1 2 <button>show</button> <button>resolve</button> <button>1</button>'
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,23 @@
|
||||
<script module>
|
||||
const queued = [];
|
||||
export function push(v) {
|
||||
return new Promise((fulfil) => {
|
||||
queued.push(() => fulfil(v));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Child from "./Child.svelte";
|
||||
|
||||
let show = $state(false);
|
||||
let count = $state(0);
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<Child />
|
||||
{/if}
|
||||
|
||||
<button onclick={() => show = true}>show</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
<button onclick={() => count++}>{count}</button>
|
||||
@ -0,0 +1,28 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
|
||||
const [increment, hide, pop] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
hide.click(); // hides the if block, which cancels the pending async inside, which means the batch can complete
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>increment</button> <button>hide</button> <button>pop</button> 1`
|
||||
);
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>increment</button> <button>hide</button> <button>pop</button> 1`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
let show = $state(true);
|
||||
let count = $state(0);
|
||||
|
||||
const queue = [];
|
||||
|
||||
function push(value) {
|
||||
if (!value) return value;
|
||||
return new Promise(r => queue.push(() => r(value)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count += 1}>increment</button>
|
||||
<button onclick={() => show = false}>hide</button>
|
||||
<!-- pop() so that the outer one resolves first, not the one inside the if block -->
|
||||
<button onclick={() => queue.pop()?.()}>pop</button>
|
||||
|
||||
{await push(count)}
|
||||
{#if show}
|
||||
{await push(count)}
|
||||
{/if}
|
||||
@ -0,0 +1,33 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
|
||||
const [increment, shift] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>3</button><button>shift</button><p>1 = 1</p><p>fizz: true</p><p>buzz: true</p>`
|
||||
);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>3</button><button>shift</button><p>1 = 1</p><p>fizz: true</p><p>buzz: true</p>`
|
||||
);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>3</button><button>shift</button><p>3 = 3</p><p>fizz: true</p><p>buzz: false</p>`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,44 @@
|
||||
<script>
|
||||
import { getAbortSignal } from 'svelte';
|
||||
|
||||
const queue = [];
|
||||
|
||||
let n = $state(1);
|
||||
let fizz = $state(true);
|
||||
let buzz = $state(true);
|
||||
|
||||
function increment() {
|
||||
n++;
|
||||
|
||||
fizz = n % 3 === 0;
|
||||
buzz = n % 5 === 0;
|
||||
}
|
||||
|
||||
function push(value) {
|
||||
if (value === 1) return 1;
|
||||
const d = Promise.withResolvers();
|
||||
|
||||
queue.push(() => d.resolve(value));
|
||||
|
||||
const signal = getAbortSignal();
|
||||
signal.onabort = () => d.reject(signal.reason);
|
||||
|
||||
return d.promise;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={increment}>
|
||||
{$state.eager(n)}
|
||||
</button>
|
||||
|
||||
<button onclick={() => queue.shift()?.()}>shift</button>
|
||||
|
||||
<p>{n} = {await push(n)}</p>
|
||||
|
||||
{#if true}
|
||||
<p>fizz: {fizz}</p>
|
||||
{/if}
|
||||
|
||||
{#if true}
|
||||
<p>buzz: {buzz}</p>
|
||||
{/if}
|
||||
@ -0,0 +1,34 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [button1, button2, pop, shift] = target.querySelectorAll('button');
|
||||
const [p] = target.querySelectorAll('p');
|
||||
|
||||
button1.click();
|
||||
await tick();
|
||||
button2.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, `1 + 0 = 1 | 1 0`);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, `1 + 2 = 3 | 1 1`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
const queue1 = [];
|
||||
const queue2 = [];
|
||||
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
let c = $state(0);
|
||||
let d = $state(0)
|
||||
|
||||
function push(value, where = 1) {
|
||||
if (!value) return value;
|
||||
return new Promise(r => (where === 1 ? queue1 : queue2).push(() => r(value)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => {a++;c++}}>a / c</button>
|
||||
<button onclick={() => {b+=2;d++}}>b / d</button>
|
||||
<button onclick={() => queue1.pop()?.()}>pop 1</button>
|
||||
<button onclick={() => queue2.shift()?.()}>shift 2</button>
|
||||
|
||||
<p>{a} + {b} = {await push(a + b)} | {await push(c, 2)} {await push(d, 2)}</p>
|
||||
@ -0,0 +1,34 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [button1, button2, shift_1, pop_1, shift_2] = target.querySelectorAll('button');
|
||||
const [p] = target.querySelectorAll('p');
|
||||
|
||||
button1.click();
|
||||
await tick();
|
||||
button2.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
|
||||
|
||||
pop_1.click();
|
||||
await tick();
|
||||
shift_2.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
|
||||
|
||||
// Check that the first batch can still resolve before the second even if one of its async values
|
||||
// is already superseeded (but the subsequent batch as a whole is still pending).
|
||||
shift_1.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, `1 + 0 = 1 | 1 0`);
|
||||
|
||||
shift_1.click();
|
||||
await tick();
|
||||
shift_2.click();
|
||||
await tick();
|
||||
assert.htmlEqual(p.innerHTML, `1 + 2 = 3 | 1 1`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
const queue1 = [];
|
||||
const queue2 = [];
|
||||
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
let c = $state(0);
|
||||
let d = $state(0)
|
||||
|
||||
function push(value, where = 1) {
|
||||
if (!value) return value;
|
||||
return new Promise(r => (where === 1 ? queue1 : queue2).push(() => r(value)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => {a++;c++}}>a / c</button>
|
||||
<button onclick={() => {b+=2;d++}}>b / d</button>
|
||||
<button onclick={() => queue1.shift()?.()}>shift 1</button>
|
||||
<button onclick={() => queue1.pop()?.()}>pop 1</button>
|
||||
<button onclick={() => queue2.shift()?.()}>shift 2</button>
|
||||
|
||||
<p>{a} + {b} = {await push(a + b)} | {await push(c, 2)} {await push(d, 2)}</p>
|
||||
@ -0,0 +1,20 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [increment, pop] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
increment.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '<button>increment</button><button>pop</button> 2 2 1'); // showing nothing here yet would also be ok
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '<button>increment</button><button>pop</button> 2 2 1');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,23 @@
|
||||
|
||||
<script>
|
||||
let count = $state(0);
|
||||
let other = $state(0);
|
||||
|
||||
const queue = [];
|
||||
|
||||
function push(v) {
|
||||
if (v === 0) return v;
|
||||
|
||||
return new Promise((resolve) => queue.push(() => resolve(v)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => {
|
||||
if (count === 0) other++;
|
||||
count++;
|
||||
}}>increment</button>
|
||||
<button onclick={() => queue.pop()?.()}>pop</button>
|
||||
|
||||
{#if count > 0}
|
||||
{await push(count)} {count} {other}
|
||||
{/if}
|
||||
@ -0,0 +1,21 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: { dev: true }, // for testing that teardown effect in eager $.get(loaded) doesn't lead to a crash (because it means REACTION_RAN is set, which means unfreeze_derived runs)
|
||||
async test({ assert, target }) {
|
||||
const [count, shift] = target.querySelectorAll('button');
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>0</button><button>shift</button><p>0</p>`);
|
||||
|
||||
count.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>1</button><button>shift</button><p>0 (...)</p>`);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>1</button><button>shift</button><p>1</p>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
let count = $state(0);
|
||||
|
||||
let resolvers = [];
|
||||
|
||||
function push(value) {
|
||||
const { promise, resolve } = Promise.withResolvers();
|
||||
resolvers.push(() => resolve(value));
|
||||
return promise;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count += 1}>{$state.eager(count)}</button>
|
||||
<button onclick={() => resolvers.shift()?.()}>shift</button>
|
||||
|
||||
<svelte:boundary>
|
||||
{@const loaded = $state.eager(count) === count}
|
||||
<p>{await push(count)} {loaded ? '' : '(...)'}</p>
|
||||
|
||||
{#snippet pending()}{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1 @@
|
||||
<span>x</span>
|
||||
@ -0,0 +1,8 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client', 'server'],
|
||||
|
||||
html: `<span>x</span>`,
|
||||
ssrHtml: `<span>x</span>`
|
||||
});
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Icon from './Icon.svelte';
|
||||
|
||||
let icons = $state({ currency: { Icon } });
|
||||
const platformIcons = $derived(icons);
|
||||
</script>
|
||||
|
||||
<platformIcons.currency.Icon />
|
||||
@ -0,0 +1,54 @@
|
||||
import { tick } from 'svelte';
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
// Test that the store is unsubscribed from, even if it's not referenced once the store itself is set to null
|
||||
export default test({
|
||||
skip_no_async: true,
|
||||
|
||||
async test({ target, assert }) {
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<input type="number"> <p>0</p> <button>add watcher</button>`
|
||||
);
|
||||
|
||||
target.querySelector('button')?.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<input type="number"> <p>1</p> hello 1 <button>remove watcher</button>`
|
||||
);
|
||||
|
||||
const input = target.querySelector('input');
|
||||
ok(input);
|
||||
|
||||
input.stepUp();
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<input type="number"> <p>2</p> hello 2 <button>remove watcher</button>`
|
||||
);
|
||||
|
||||
target.querySelector('button')?.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<input type="number"> <p>2</p> <button>add watcher</button>`
|
||||
);
|
||||
|
||||
input.stepUp();
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<input type="number"> <p>2</p> <button>add watcher</button>`
|
||||
);
|
||||
|
||||
target.querySelector('button')?.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<input type="number"> <p>3</p> hello 3 <button>remove watcher</button>`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { writable, derived } from "svelte/store";
|
||||
|
||||
const obj = writable({ a: 1 });
|
||||
let count = $state(0);
|
||||
let watcherA = $state();
|
||||
|
||||
function watch (prop) {
|
||||
return derived(obj, (o) => {
|
||||
count++;
|
||||
return o[prop];
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<input type="number" bind:value={$obj.a}>
|
||||
<p>{count}</p>
|
||||
|
||||
{#if watcherA}
|
||||
<!-- make sure the presence of async work doesn't break the `legacy_updates` mechanism -->
|
||||
{#if true}
|
||||
{await 'hello'}
|
||||
{/if}
|
||||
|
||||
{$watcherA}
|
||||
<button on:click={() => watcherA = null}>remove watcher</button>
|
||||
{:else}
|
||||
<button on:click={() => watcherA = watch("a")}>add watcher</button>
|
||||
{/if}
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
// Not read before the outro, by which time the derived is destroyed
|
||||
let duration = $derived(10);
|
||||
</script>
|
||||
|
||||
<div in:fly={{ duration: 10 }} out:fly={{ duration }}>
|
||||
hello
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { raf } from '../../../animation-helpers';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [fly_in, fly_out] = target.querySelectorAll('button');
|
||||
|
||||
fly_in.click();
|
||||
flushSync();
|
||||
raf.tick(25);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>fly in</button>
|
||||
<button>fly out</button>
|
||||
<div style="">hello</div>
|
||||
`
|
||||
);
|
||||
|
||||
fly_out.click();
|
||||
flushSync();
|
||||
raf.tick(50);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>fly in</button>
|
||||
<button>fly out</button>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
let show = $state(false);
|
||||
</script>
|
||||
|
||||
<button onclick={() => (show = true)}>fly in</button>
|
||||
<button onclick={() => (show = false)}>fly out</button>
|
||||
|
||||
{#if show}
|
||||
<Child />
|
||||
{/if}
|
||||
@ -0,0 +1,8 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['async'],
|
||||
compileOptions: {
|
||||
dev: true
|
||||
}
|
||||
});
|
||||
@ -0,0 +1 @@
|
||||
<!--[--><img alt="test" src=""/><!--]-->
|
||||
@ -0,0 +1 @@
|
||||
<!--1410iyz--><!----><title>Async multiple attributes</title>
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
const user = $derived(Promise.resolve({
|
||||
name: 'test',
|
||||
image: '',
|
||||
}))
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Async multiple attributes</title>
|
||||
</svelte:head>
|
||||
|
||||
<img
|
||||
alt={(await user).name}
|
||||
src={(await user).image}
|
||||
/>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue