wip

Author: trueadm

packages/svelte/src/ambient.d.ts

@@ -218,6 +218,12 @@ declare namespace $derived {
 	export const toString: never;
 }
 
+declare function $async<T>(expression: T): T;
+
+declare namespace $async {
+	export function defer<T>(expression: T): T;
+}
+
 /**
  * Runs code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. `$state` or `$derived` values.
  * The timing of the execution is after the DOM has been updated.

packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js

@@ -95,7 +95,8 @@ export function CallExpression(node, context) {
 
 			break;
 
-		case '$async': {
+		case '$async':
+		case '$async.defer': {
 			if (
 				parent.type !== 'VariableDeclarator' ||
 				get_parent(context.path, -3).type === 'ConstTag'
@@ -220,7 +221,7 @@ export function CallExpression(node, context) {
 			function_depth: context.state.function_depth + 1,
 			expression
 		});
-	} else if (rune === '$inspect' || rune === '$async') {
+	} else if (rune === '$inspect' || rune === '$async' || rune === '$async.defer') {
 		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
 	} else {
 		context.next();

packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js

@@ -30,6 +30,7 @@ export function VariableDeclarator(node, context) {
 			rune === '$derived' ||
 			rune === '$derived.by' ||
 			rune === '$async' ||
+			rune === '$async.defer' ||
 			rune === '$props'
 		) {
 			for (const path of paths) {
@@ -40,7 +41,10 @@ export function VariableDeclarator(node, context) {
 						? 'state'
 						: rune === '$state.raw'
 							? 'raw_state'
-							: rune === '$derived' || rune === '$derived.by' || rune === '$async'
+							: rune === '$derived' ||
+								  rune === '$derived.by' ||
+								  rune === '$async' ||
+								  rune === '$async.defer'
 								? 'derived'
 								: path.is_rest
 									? 'rest_prop'

packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js

@@ -157,12 +157,23 @@ export function VariableDeclaration(node, context) {
 				continue;
 			}
 
-			if (rune === '$async') {
+			if (rune === '$async' || rune === '$async.defer') {
 				if (declarator.id.type === 'Identifier') {
 					declarations.push(
 						b.declarator(
 							declarator.id,
-							b.call(b.await(b.call('$.save', b.call('$.async_derived', b.thunk(value, true)))))
+							b.call(
+								b.await(
+									b.call(
+										'$.save',
+										b.call(
+											'$.async_derived',
+											b.thunk(value, true),
+											rune === '$async.defer' && b.literal(true)
+										)
+									)
+								)
+							)
 						)
 					);
 				} else {

packages/svelte/src/index-client.js

@@ -217,5 +217,5 @@ export function flushSync(fn) {
 
 export { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';
 export { hydrate, mount, unmount } from './internal/client/render.js';
-export { tick, untrack } from './internal/client/runtime.js';
+export { tick, untrack, isDeferred } from './internal/client/runtime.js';
 export { createRawSnippet } from './internal/client/dom/blocks/snippet.js';

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

@@ -24,7 +24,8 @@ export const EFFECT_HAS_DERIVED = 1 << 21;
 
 // Flags used for async
 export const IS_ASYNC = 1 << 22;
-export const REACTION_IS_UPDATING = 1 << 23;
+export const IS_DEFERRED = 1 << 23;
+export const REACTION_IS_UPDATING = 1 << 24;
 
 export const STATE_SYMBOL = Symbol('$state');
 export const STATE_SYMBOL_METADATA = Symbol('$state metadata');

packages/svelte/src/internal/client/reactivity/deriveds.js

@@ -7,6 +7,7 @@ import {
 	DIRTY,
 	EFFECT_HAS_DERIVED,
 	IS_ASYNC,
+	IS_DEFERRED,
 	MAYBE_DIRTY,
 	UNOWNED
 } from '../constants.js';
@@ -24,7 +25,7 @@ import {
 import { equals, safe_equals } from './equality.js';
 import * as e from '../errors.js';
 import { block, destroy_effect } from './effects.js';
-import { inspect_effects, internal_set, set_inspect_effects, source } from './sources.js';
+import { inspect_effects, internal_set, mark_reactions, set_inspect_effects, source } from './sources.js';
 import { get_stack } from '../dev/tracing.js';
 import { tracing_mode_flag } from '../../flags/index.js';
 import { capture, suspend } from '../dom/blocks/boundary.js';
@@ -76,10 +77,11 @@ export function derived(fn) {
 /**
  * @template V
  * @param {() => Promise<V>} fn
+ * @param {boolean} [deferred]
  * @returns {Promise<Source<V>>}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function async_derived(fn) {
+export function async_derived(fn, deferred = false) {
 	let parent = /** @type {Effect | null} */ (active_effect);
 
 	if (parent === null) {
@@ -93,7 +95,12 @@ export function async_derived(fn) {
 		var current = (promise = fn());
 
 		var restore = capture();
-		var unsuspend = suspend();
+		var unsuspend = !deferred ? suspend() : undefined;
+
+		if (deferred && (value.f & IS_DEFERRED) === 0) {
+			value.f ^= IS_DEFERRED;
+			mark_reactions(value, DIRTY);
+		}
 
 		try {
 			var v = await promise;
@@ -109,12 +116,15 @@ export function async_derived(fn) {
 		} catch (e) {
 			handle_error(e, parent, null, parent.ctx);
 		} finally {
-			unsuspend();
+			if (deferred && (value.f & IS_DEFERRED) !== 0) {
+				value.f ^= IS_DEFERRED;
+			}
+			unsuspend?.();
 
 			// TODO we should probably null out active effect here,
 			// rather than inside `restore()`
 		}
-	}, IS_ASYNC);
+	}, IS_ASYNC | (deferred ? IS_DEFERRED : 0));
 
 	return Promise.resolve(promise).then(() => value);
 }

packages/svelte/src/internal/client/reactivity/sources.js

@@ -259,7 +259,7 @@ export function update_pre(source, d = 1) {
  * @param {number} status should be DIRTY or MAYBE_DIRTY
  * @returns {void}
  */
-function mark_reactions(signal, status) {
+export function mark_reactions(signal, status) {
 	var reactions = signal.reactions;
 	if (reactions === null) return;
 

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

@@ -26,7 +26,8 @@ import {
 	BOUNDARY_EFFECT,
 	REACTION_IS_UPDATING,
 	IS_ASYNC,
-	TEMPLATE_EFFECT
+	TEMPLATE_EFFECT,
+	IS_DEFERRED
 } from './constants.js';
 import {
 	flush_idle_tasks,
@@ -841,7 +842,7 @@ function process_effects(effect, collected_effects) {
 						active_reaction = current_effect;
 						if (check_dirtiness(current_effect)) {
 							update_effect(current_effect);
-							if ((flags & IS_ASYNC) !== 0 && !suspended) {
+							if ((flags & IS_ASYNC) !== 0 && (flags & IS_DEFERRED) === 0 && !suspended) {
 								suspended = true;
 							}
 						}
@@ -1248,3 +1249,17 @@ export function deep_read(value, visited = new Set()) {
 		}
 	}
 }
+
+/**
+ * @param {() => any} fn
+ */
+export function isDeferred(fn) {
+  var signals = capture_signals(fn);
+	fn();
+	for (var signal of signals) {
+		if ((signal.f & IS_DEFERRED) !== 0) {
+			return true;
+		}
+	}
+	return false;
+}

packages/svelte/src/utils.js

@@ -444,7 +444,8 @@ const RUNES = /** @type {const} */ ([
 	'$inspect().with',
 	'$inspect.trace',
 	'$host',
-	'$async'
+	'$async',
+	'$async.defer'
 ]);
 
 /**