mirror of https://github.com/sveltejs/svelte
feat: add `getAbortSignal()` (#16266)
* WIP getAbortSignal * add test * regenerate * add error code * changeset * regenerate * try this * { stale: true } * fix test * lint * abort synchronously in SSR * make STALE_REACTION a `StaleReactionError extends Error` * make non-optional * Update packages/svelte/src/internal/server/abort-signal.js Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com> --------- Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>pull/16140/merge
parent
7c8be602be
commit
b673145659
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': minor
|
||||
---
|
||||
|
||||
feat: add `getAbortSignal()`
|
@ -0,0 +1,13 @@
|
||||
import { STALE_REACTION } from '#client/constants';
|
||||
|
||||
/** @type {AbortController | null} */
|
||||
export let controller = null;
|
||||
|
||||
export function abort() {
|
||||
controller?.abort(STALE_REACTION);
|
||||
controller = null;
|
||||
}
|
||||
|
||||
export function getAbortSignal() {
|
||||
return (controller ??= new AbortController()).signal;
|
||||
}
|
@ -0,0 +1,34 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>increment</button><p>loading...</p>`,
|
||||
|
||||
async test({ assert, target, variant, logs }) {
|
||||
await new Promise((f) => setTimeout(f, 50));
|
||||
|
||||
if (variant === 'hydrate') {
|
||||
assert.deepEqual(logs, [
|
||||
'aborted',
|
||||
'StaleReactionError',
|
||||
'The reaction that called `getAbortSignal()` was re-run or destroyed'
|
||||
]);
|
||||
}
|
||||
|
||||
logs.length = 0;
|
||||
|
||||
const [button] = target.querySelectorAll('button');
|
||||
|
||||
await new Promise((f) => setTimeout(f, 50));
|
||||
assert.htmlEqual(target.innerHTML, '<button>increment</button><p>0</p>');
|
||||
|
||||
button.click();
|
||||
await new Promise((f) => setTimeout(f, 50));
|
||||
assert.htmlEqual(target.innerHTML, '<button>increment</button><p>2</p>');
|
||||
|
||||
assert.deepEqual(logs, [
|
||||
'aborted',
|
||||
'StaleReactionError',
|
||||
'The reaction that called `getAbortSignal()` was re-run or destroyed'
|
||||
]);
|
||||
}
|
||||
});
|
@ -0,0 +1,33 @@
|
||||
<script>
|
||||
import { getAbortSignal } from 'svelte';
|
||||
|
||||
let count = $state(0);
|
||||
|
||||
let delayed_count = $derived.by(async () => {
|
||||
let c = count;
|
||||
|
||||
const signal = getAbortSignal();
|
||||
|
||||
await new Promise((f) => setTimeout(f));
|
||||
|
||||
if (signal.aborted) {
|
||||
console.log('aborted', signal.reason.name, signal.reason.message);
|
||||
}
|
||||
|
||||
return c;
|
||||
});
|
||||
</script>
|
||||
|
||||
<button onclick={async () => {
|
||||
count += 1;
|
||||
await Promise.resolve();
|
||||
count += 1;
|
||||
}}>increment</button>
|
||||
|
||||
{#await delayed_count}
|
||||
<p>loading...</p>
|
||||
{:then count}
|
||||
<p>{count}</p>
|
||||
{:catch error}
|
||||
{console.log('this should never be rendered')}
|
||||
{/await}
|
Loading…
Reference in new issue