mirror of https://github.com/sveltejs/svelte
Razin Shafayet
5 months ago
committed by
GitHub
commit
4e76efacb4
@ -0,0 +1,70 @@
|
|||||||
|
---
|
||||||
|
name: performance-investigation
|
||||||
|
description: Investigate performance regressions and find opportunities for optimization
|
||||||
|
---
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
1. Start from a branch you want to measure (for example `foo`).
|
||||||
|
2. Run:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm bench:compare main foo
|
||||||
|
```
|
||||||
|
|
||||||
|
If you pass one branch, `bench:compare` automatically compares it to `main`.
|
||||||
|
|
||||||
|
## Where outputs go
|
||||||
|
|
||||||
|
- Summary report: `benchmarking/compare/.results/report.txt`
|
||||||
|
- Raw benchmark numbers:
|
||||||
|
- `benchmarking/compare/.results/main.json`
|
||||||
|
- `benchmarking/compare/.results/<your-branch>.json`
|
||||||
|
- CPU profiles (per benchmark, per branch):
|
||||||
|
- `benchmarking/compare/.profiles/main/*.cpuprofile`
|
||||||
|
- `benchmarking/compare/.profiles/main/*.md`
|
||||||
|
- `benchmarking/compare/.profiles/<your-branch>/*.cpuprofile`
|
||||||
|
- `benchmarking/compare/.profiles/<your-branch>/*.md`
|
||||||
|
|
||||||
|
The `.md` files are generated summaries of the CPU profile and are usually the fastest way to inspect hotspots.
|
||||||
|
|
||||||
|
## Suggested investigation flow
|
||||||
|
|
||||||
|
1. Open `benchmarking/compare/.results/report.txt` and identify largest regressions first.
|
||||||
|
2. For each high-delta benchmark, compare:
|
||||||
|
- `benchmarking/compare/.profiles/main/<benchmark>.md`
|
||||||
|
- `benchmarking/compare/.profiles/<branch>/<benchmark>.md`
|
||||||
|
3. Look for changes in self/inclusive hotspot share in runtime internals (`runtime.js`, `reactivity/batch.js`, `reactivity/deriveds.js`, `reactivity/sources.js`).
|
||||||
|
4. Make one optimization change at a time, then re-run targeted benches before re-running full compare.
|
||||||
|
|
||||||
|
## Fast benchmark loops
|
||||||
|
|
||||||
|
Run only selected reactivity benchmarks by substring:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm bench kairo_mux kairo_deep kairo_broad kairo_triangle
|
||||||
|
pnpm bench repeated_deps sbench_create_signals mol_owned
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tests to run after perf changes
|
||||||
|
|
||||||
|
Runtime reactivity regressions are most likely in runes runtime tests:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm test runtime-runes
|
||||||
|
```
|
||||||
|
|
||||||
|
## Helpful script
|
||||||
|
|
||||||
|
For quick cpuprofile hotspot deltas between two branches:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
node benchmarking/compare/profile-diff.mjs kairo_mux_owned main foo
|
||||||
|
```
|
||||||
|
|
||||||
|
This prints top function sample-share deltas for the selected benchmark.
|
||||||
|
|
||||||
|
## Practical gotchas
|
||||||
|
|
||||||
|
- `bench:compare` checks out branches while running. Avoid uncommitted changes (or stash them) so branch switching is safe.
|
||||||
|
- Each `bench:compare` run rewrites `benchmarking/compare/.results` and `benchmarking/compare/.profiles`.
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'svelte': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
fix: prevent hydration error on async `{@html ...}`
|
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
# Svelte Coding Agent Guide
|
||||||
|
|
||||||
|
This guide is for AI coding agents working in the Svelte monorepo.
|
||||||
|
|
||||||
|
**Important:** Read and follow [`CONTRIBUTING.md`](./CONTRIBUTING.md) as well - it contains essential information about testing, code structure, and contribution guidelines that applies here.
|
||||||
|
|
||||||
|
## Quick Reference
|
||||||
|
|
||||||
|
If asked to do a performance investigation, use the `performance-investigation` skill.
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import assert from 'node:assert';
|
||||||
|
import * as $ from 'svelte/internal/client';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const a = $.state(1);
|
||||||
|
const b = $.state(2);
|
||||||
|
|
||||||
|
let total = 0;
|
||||||
|
|
||||||
|
const destroy = $.effect_root(() => {
|
||||||
|
for (let i = 0; i < 1000; i += 1) {
|
||||||
|
$.render_effect(() => {
|
||||||
|
total += $.get(a);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$.render_effect(() => {
|
||||||
|
total += $.get(b);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy,
|
||||||
|
run() {
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
total = 0;
|
||||||
|
$.flush(() => $.set(b, i));
|
||||||
|
assert.equal(total, i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
import fs from 'node:fs';
|
||||||
|
import path from 'node:path';
|
||||||
|
import { pathToFileURL } from 'node:url';
|
||||||
|
|
||||||
|
export function generate_report(outdir) {
|
||||||
|
const result_files = fs
|
||||||
|
.readdirSync(outdir)
|
||||||
|
.filter((file) => file.endsWith('.json'))
|
||||||
|
.sort((a, b) => a.localeCompare(b));
|
||||||
|
|
||||||
|
const branches = result_files.map((file) => file.slice(0, -5));
|
||||||
|
const results = result_files.map((file) =>
|
||||||
|
JSON.parse(fs.readFileSync(`${outdir}/${file}`, 'utf-8'))
|
||||||
|
);
|
||||||
|
|
||||||
|
if (results.length === 0) {
|
||||||
|
console.error(`No result files found in ${outdir}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const report_file = path.join(outdir, 'report.txt');
|
||||||
|
|
||||||
|
fs.writeFileSync(report_file, '');
|
||||||
|
|
||||||
|
const write = (str) => {
|
||||||
|
fs.appendFileSync(report_file, str + '\n');
|
||||||
|
console.log(str);
|
||||||
|
};
|
||||||
|
|
||||||
|
for (let i = 0; i < branches.length; i += 1) {
|
||||||
|
write(`${char(i)}: ${branches[i]}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
write('');
|
||||||
|
|
||||||
|
for (let i = 0; i < results[0].length; i += 1) {
|
||||||
|
write(`${results[0][i].benchmark}`);
|
||||||
|
|
||||||
|
for (const metric of ['time', 'gc_time']) {
|
||||||
|
const times = results.map((result) => +result[i][metric]);
|
||||||
|
let min = Infinity;
|
||||||
|
let max = -Infinity;
|
||||||
|
let min_index = -1;
|
||||||
|
|
||||||
|
for (let b = 0; b < times.length; b += 1) {
|
||||||
|
const time = times[b];
|
||||||
|
|
||||||
|
if (time < min) {
|
||||||
|
min = time;
|
||||||
|
min_index = b;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (time > max) {
|
||||||
|
max = time;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (min !== 0) {
|
||||||
|
write(` ${metric}: fastest is ${char(min_index)} (${branches[min_index]})`);
|
||||||
|
times.forEach((time, b) => {
|
||||||
|
const SIZE = 20;
|
||||||
|
const n = Math.round(SIZE * (time / max));
|
||||||
|
|
||||||
|
write(` ${char(b)}: ${'◼'.repeat(n)}${' '.repeat(SIZE - n)} ${time.toFixed(2)}ms`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
write('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function char(i) {
|
||||||
|
return String.fromCharCode(97 + i);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (import.meta.url === pathToFileURL(process.argv[1]).href) {
|
||||||
|
const outdir = path.resolve(process.argv[1], '../.results');
|
||||||
|
|
||||||
|
generate_report(outdir);
|
||||||
|
}
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
import fs from 'node:fs';
|
||||||
|
import path from 'node:path';
|
||||||
|
|
||||||
|
const [benchmark, baseBranch = 'main', candidateBranch] = process.argv.slice(2);
|
||||||
|
|
||||||
|
if (!benchmark || !candidateBranch) {
|
||||||
|
console.error(
|
||||||
|
'Usage: node benchmarking/compare/profile-diff.mjs <benchmark> <base-branch> <candidate-branch>'
|
||||||
|
);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = path.resolve('benchmarking/compare/.profiles');
|
||||||
|
|
||||||
|
function safe(name) {
|
||||||
|
return name.replace(/[^a-z0-9._-]+/gi, '_');
|
||||||
|
}
|
||||||
|
|
||||||
|
function read_profile(branch, bench) {
|
||||||
|
const file = path.join(root, safe(branch), `${bench}.cpuprofile`);
|
||||||
|
const profile = JSON.parse(fs.readFileSync(file, 'utf8'));
|
||||||
|
const nodes = Array.isArray(profile.nodes) ? profile.nodes : [];
|
||||||
|
const samples = Array.isArray(profile.samples) ? profile.samples : [];
|
||||||
|
|
||||||
|
const id_to_node = new Map(nodes.map((node) => [node.id, node]));
|
||||||
|
const self_counts = new Map();
|
||||||
|
|
||||||
|
for (const sample of samples) {
|
||||||
|
if (typeof sample !== 'number') continue;
|
||||||
|
self_counts.set(sample, (self_counts.get(sample) ?? 0) + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const total = samples.length || 1;
|
||||||
|
const by_fn = new Map();
|
||||||
|
|
||||||
|
for (const [id, count] of self_counts) {
|
||||||
|
const node = id_to_node.get(id);
|
||||||
|
if (!node || typeof node !== 'object') continue;
|
||||||
|
|
||||||
|
const frame = node.callFrame ?? {};
|
||||||
|
const function_name = frame.functionName || '(anonymous)';
|
||||||
|
const url = frame.url || '';
|
||||||
|
const line = typeof frame.lineNumber === 'number' ? frame.lineNumber + 1 : 0;
|
||||||
|
|
||||||
|
const label = url
|
||||||
|
? `${function_name} @ ${url.replace(/^.*packages\//, 'packages/')}:${line}`
|
||||||
|
: function_name;
|
||||||
|
|
||||||
|
by_fn.set(label, (by_fn.get(label) ?? 0) + count);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { by_fn, total };
|
||||||
|
}
|
||||||
|
|
||||||
|
const base = read_profile(baseBranch, benchmark);
|
||||||
|
const candidate = read_profile(candidateBranch, benchmark);
|
||||||
|
|
||||||
|
const keys = new Set([...base.by_fn.keys(), ...candidate.by_fn.keys()]);
|
||||||
|
const rows = [...keys]
|
||||||
|
.map((key) => {
|
||||||
|
const base_pct = ((base.by_fn.get(key) ?? 0) * 100) / base.total;
|
||||||
|
const candidate_pct = ((candidate.by_fn.get(key) ?? 0) * 100) / candidate.total;
|
||||||
|
return {
|
||||||
|
key,
|
||||||
|
delta: candidate_pct - base_pct,
|
||||||
|
base_pct,
|
||||||
|
candidate_pct
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.sort((a, b) => Math.abs(b.delta) - Math.abs(a.delta))
|
||||||
|
.slice(0, 20);
|
||||||
|
|
||||||
|
console.log(`Benchmark: ${benchmark}`);
|
||||||
|
console.log(`Base: ${baseBranch}`);
|
||||||
|
console.log(`Candidate: ${candidateBranch}`);
|
||||||
|
console.log('');
|
||||||
|
|
||||||
|
for (const row of rows) {
|
||||||
|
const sign = row.delta >= 0 ? '+' : '';
|
||||||
|
console.log(
|
||||||
|
`${sign}${row.delta.toFixed(2).padStart(6)}pp candidate ${row.candidate_pct.toFixed(2).padStart(6)}% base ${row.base_pct.toFixed(2).padStart(6)}% ${row.key}`
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
{(/**/ 42)}
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
{
|
||||||
|
"css": null,
|
||||||
|
"js": [],
|
||||||
|
"start": 0,
|
||||||
|
"end": 11,
|
||||||
|
"type": "Root",
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "ExpressionTag",
|
||||||
|
"start": 0,
|
||||||
|
"end": 11,
|
||||||
|
"expression": {
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 7,
|
||||||
|
"end": 9,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 7
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 9
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"value": 42,
|
||||||
|
"raw": "42",
|
||||||
|
"leadingComments": [
|
||||||
|
{
|
||||||
|
"type": "Block",
|
||||||
|
"value": "",
|
||||||
|
"start": 2,
|
||||||
|
"end": 6
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"options": null,
|
||||||
|
"comments": [
|
||||||
|
{
|
||||||
|
"type": "Block",
|
||||||
|
"value": "",
|
||||||
|
"start": 2,
|
||||||
|
"end": 6,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 2
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 6
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `
|
||||||
|
<input>
|
||||||
|
<p>hello</p>
|
||||||
|
<p>hello</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
ssrHtml: `
|
||||||
|
<input value="hello">
|
||||||
|
<p>hello</p>
|
||||||
|
<p>hello</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [input] = target.querySelectorAll('input');
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
input.value = 'goodbye';
|
||||||
|
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<input>
|
||||||
|
<p>goodbye</p>
|
||||||
|
<p>goodbye</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<svelte:options runes={false} />
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let message = 'hello';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={message} />
|
||||||
|
|
||||||
|
{#if true}
|
||||||
|
{@const m1 = message}
|
||||||
|
{@const m2 = (() => m1)()}
|
||||||
|
|
||||||
|
<p>{m1}</p>
|
||||||
|
<p>{m2}</p>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<svelte:options customElement={{
|
||||||
|
tag: "my-inner",
|
||||||
|
props: { value: { reflect: true }}
|
||||||
|
}} />
|
||||||
|
<script>
|
||||||
|
export let value;
|
||||||
|
</script>
|
||||||
|
{value}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await tick();
|
||||||
|
const [btn] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
btn.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>inc</button>
|
||||||
|
<my-inner value="2"></my-inner>
|
||||||
|
2
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
import "./Inner.svelte"
|
||||||
|
let count = 1;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={() => count++}>inc</button>
|
||||||
|
<!-- updating value prop will cause a flushSync -->
|
||||||
|
<my-inner value={count}></my-inner>
|
||||||
|
<!-- updating count will cause an internal_set -->
|
||||||
|
{#each [count] as row}
|
||||||
|
{row}
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [, toggle] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
toggle?.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>0</button> <button>toggle</button> 0`);
|
||||||
|
|
||||||
|
toggle?.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>0</button> <button>toggle</button>`);
|
||||||
|
|
||||||
|
toggle?.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>0</button> <button>toggle</button> 0`);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
import { fork } from 'svelte';
|
||||||
|
let show = $state(false);
|
||||||
|
let count = $state(0);
|
||||||
|
let d_count = $derived(count);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => count += 1}>{count}</button> <!-- just here so count is compiled as a source -->
|
||||||
|
<button onclick={() => fork(() => show = !show).commit()}>toggle</button>
|
||||||
|
|
||||||
|
{#if show}
|
||||||
|
{d_count}
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await tick();
|
||||||
|
const [x, y, resolve, commit] = target.querySelectorAll('button');
|
||||||
|
const [p] = target.querySelectorAll('p');
|
||||||
|
|
||||||
|
y.click();
|
||||||
|
await tick();
|
||||||
|
resolve.click();
|
||||||
|
await tick();
|
||||||
|
x.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(p.innerHTML, '1 0');
|
||||||
|
|
||||||
|
await tick();
|
||||||
|
commit.click();
|
||||||
|
assert.htmlEqual(p.innerHTML, '1 1');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
import { fork } from 'svelte';
|
||||||
|
|
||||||
|
let x = $state(0);
|
||||||
|
let y = $state(0);
|
||||||
|
let f;
|
||||||
|
|
||||||
|
const deferred = [];
|
||||||
|
|
||||||
|
function delay(value) {
|
||||||
|
if (!value) return value;
|
||||||
|
return new Promise((resolve) => deferred.push(() => resolve(value)));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>{x} {await delay(y)}</p>
|
||||||
|
|
||||||
|
<button onclick={() => x += 1}>x</button>
|
||||||
|
<button onclick={() => f = fork(() => y += 1)}>y (fork)</button>
|
||||||
|
<button onclick={() => deferred.shift()?.()}>resolve</button>
|
||||||
|
<button onclick={() => f.commit()}>commit</button>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let data = $derived(await Promise.resolve('test'));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div data-resolved={data ? 'true' : 'false'}>
|
||||||
|
{data}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import Bound from './Bound.svelte';
|
||||||
|
|
||||||
|
let open;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Bound bind:open />
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
// Tests that renderer.subsume (which is used when bindings are present) works correctly
|
||||||
|
export default test({
|
||||||
|
mode: ['hydrate'],
|
||||||
|
html: '<div data-resolved="true">test</div>',
|
||||||
|
async test({ assert, warnings }) {
|
||||||
|
assert.deepEqual(warnings, []);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Async from './Async.svelte';
|
||||||
|
import Binding from './Binding.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Async />
|
||||||
|
<Binding />
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await tick();
|
||||||
|
const [load, resolve] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
load.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>load</button>
|
||||||
|
<button>resolve</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
resolve.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
search search search search
|
||||||
|
<button>load</button>
|
||||||
|
<button>resolve</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
<script>
|
||||||
|
let query = $state('');
|
||||||
|
// changing the query results in a new promise with loading initialized to true
|
||||||
|
const promise = $derived(push(query));
|
||||||
|
|
||||||
|
const resolvers = [];
|
||||||
|
function push(value) {
|
||||||
|
if (!value) return Promise.resolve(value);
|
||||||
|
|
||||||
|
const { promise, resolve } = Promise.withResolvers();
|
||||||
|
|
||||||
|
resolvers.push(() => {
|
||||||
|
// before resolving, set loading to false - this makes it run in a different batch
|
||||||
|
loading = false;
|
||||||
|
resolve(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
let loading = $state(true);
|
||||||
|
Object.defineProperty(promise, 'loading', {
|
||||||
|
get() {
|
||||||
|
return loading;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return promise
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{query} {await promise}
|
||||||
|
|
||||||
|
{#if !promise.loading}
|
||||||
|
{query}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !promise.loading}
|
||||||
|
{await query}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<button onclick={() => query = 'search'}>load</button>
|
||||||
|
<button onclick={() => resolvers.shift()?.()}>resolve</button>
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue