merge main

Author: Rich-Harris

.changeset/short-fireants-flow.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add `getAbortSignal()`

documentation/docs/98-reference/.generated/client-errors.md

@@ -84,6 +84,12 @@ The `flushSync()` function can be used to flush any pending effects synchronousl
 
 This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
 
+### get_abort_signal_outside_reaction
+
+```
+`getAbortSignal()` can only be called inside an effect or derived
+```
+
 ### hydration_failed
 
 ```

packages/svelte/messages/client-errors/errors.md

@@ -56,6 +56,10 @@ The `flushSync()` function can be used to flush any pending effects synchronousl
 
 This restriction only applies when using the `experimental.async` option, which will be active by default in Svelte 6.
 
+## get_abort_signal_outside_reaction
+
+> `getAbortSignal()` can only be called inside an effect or derived
+
 ## hydration_failed
 
 > Failed to hydrate the application

packages/svelte/src/index-client.js

@@ -69,7 +69,7 @@ if (DEV) {
  */
 export function getAbortSignal() {
 	if (active_reaction === null) {
-		throw new Error('TODO getAbortSignal can only be called inside a reaction');
+		e.get_abort_signal_outside_reaction();
 	}
 
 	return (active_reaction.ac ??= new AbortController()).signal;

packages/svelte/src/index-server.js

@@ -37,20 +37,7 @@ export async function tick() {}
 
 export async function settled() {}
 
-/** @type {AbortController | null} */
-let controller = null;
-
-export function getAbortSignal() {
-	if (controller === null) {
-		const c = (controller = new AbortController());
-		queueMicrotask(() => {
-			c.abort();
-			controller = null;
-		});
-	}
-
-	return controller.signal;
-}
+export { getAbortSignal } from './internal/server/abort-signal.js';
 
 export { getAllContexts, getContext, hasContext, setContext } from './internal/server/context.js';
 

packages/svelte/src/internal/client/constants.js

@@ -34,7 +34,11 @@ export const PROXY_PATH_SYMBOL = Symbol('proxy path');
 export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
 
-export const STALE_REACTION = Symbol('stale reaction');
+// allow users to ignore aborted signal errors if `reason.name === 'StaleReactionError`
+export const STALE_REACTION = new (class StaleReactionError extends Error {
+	name = 'StaleReactionError';
+	message = 'The reaction that called `getAbortSignal()` was re-run or destroyed';
+})();
 
 export const ELEMENT_NODE = 1;
 export const TEXT_NODE = 3;

packages/svelte/src/internal/client/errors.js

@@ -204,12 +204,29 @@ export function flush_sync_in_effect() {
 		const error = new Error(`flush_sync_in_effect\nCannot use \`flushSync\` inside an effect\nhttps://svelte.dev/e/flush_sync_in_effect`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/flush_sync_in_effect`);
 	}
 }
 
+/**
+ * `getAbortSignal()` can only be called inside an effect or derived
+ * @returns {never}
+ */
+export function get_abort_signal_outside_reaction() {
+	if (DEV) {
+		const error = new Error(`get_abort_signal_outside_reaction\n\`getAbortSignal()\` can only be called inside an effect or derived\nhttps://svelte.dev/e/get_abort_signal_outside_reaction`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/get_abort_signal_outside_reaction`);
+	}
+}
+
 /**
  * Failed to hydrate the application
  * @returns {never}
@@ -319,6 +336,7 @@ export function set_context_after_init() {
 		const error = new Error(`set_context_after_init\n\`setContext\` must be called when a component first initializes, not in a subsequent effect or after an \`await\` expression\nhttps://svelte.dev/e/set_context_after_init`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/set_context_after_init`);

packages/svelte/src/internal/client/runtime.js

@@ -306,6 +306,11 @@ export function update_reaction(reaction) {
 		reaction.ac = null;
 	}
 
+	if (reaction.ac !== null) {
+		reaction.ac.abort(STALE_REACTION);
+		reaction.ac = null;
+	}
+
 	try {
 		reaction.f |= REACTION_IS_UPDATING;
 		var result = /** @type {Function} */ (0, reaction.fn)();

packages/svelte/src/internal/server/abort-signal.js

@@ -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;
+}

packages/svelte/src/internal/server/index.js

@@ -18,6 +18,7 @@ import { validate_store } from '../shared/validate.js';
 import { is_boolean_attribute, is_raw_text_element, is_void } from '../../utils.js';
 import { reset_elements } from './dev.js';
 import { Payload } from './payload.js';
+import { abort } from './abort-signal.js';
 
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
 // https://infra.spec.whatwg.org/#noncharacter
@@ -66,50 +67,54 @@ export let on_destroy = [];
  * @returns {RenderOutput}
  */
 export function render(component, options = {}) {
-	const payload = new Payload(options.idPrefix ? options.idPrefix + '-' : '');
+	try {
+		const payload = new Payload(options.idPrefix ? options.idPrefix + '-' : '');
 
-	const prev_on_destroy = on_destroy;
-	on_destroy = [];
-	payload.out += BLOCK_OPEN;
+		const prev_on_destroy = on_destroy;
+		on_destroy = [];
+		payload.out += BLOCK_OPEN;
 
-	let reset_reset_element;
+		let reset_reset_element;
 
-	if (DEV) {
-		// prevent parent/child element state being corrupted by a bad render
-		reset_reset_element = reset_elements();
-	}
+		if (DEV) {
+			// prevent parent/child element state being corrupted by a bad render
+			reset_reset_element = reset_elements();
+		}
 
-	if (options.context) {
-		push();
-		/** @type {Component} */ (current_component).c = options.context;
-	}
+		if (options.context) {
+			push();
+			/** @type {Component} */ (current_component).c = options.context;
+		}
 
-	// @ts-expect-error
-	component(payload, options.props ?? {}, {}, {});
+		// @ts-expect-error
+		component(payload, options.props ?? {}, {}, {});
 
-	if (options.context) {
-		pop();
-	}
+		if (options.context) {
+			pop();
+		}
 
-	if (reset_reset_element) {
-		reset_reset_element();
-	}
+		if (reset_reset_element) {
+			reset_reset_element();
+		}
 
-	payload.out += BLOCK_CLOSE;
-	for (const cleanup of on_destroy) cleanup();
-	on_destroy = prev_on_destroy;
+		payload.out += BLOCK_CLOSE;
+		for (const cleanup of on_destroy) cleanup();
+		on_destroy = prev_on_destroy;
 
-	let head = payload.head.out + payload.head.title;
+		let head = payload.head.out + payload.head.title;
 
-	for (const { hash, code } of payload.css) {
-		head += `<style id="${hash}">${code}</style>`;
-	}
+		for (const { hash, code } of payload.css) {
+			head += `<style id="${hash}">${code}</style>`;
+		}
 
-	return {
-		head,
-		html: payload.out,
-		body: payload.out
-	};
+		return {
+			head,
+			html: payload.out,
+			body: payload.out
+		};
+	} finally {
+		abort();
+	}
 }
 
 /**