wip

Author: trueadm

packages/svelte/src/ambient.d.ts

@@ -196,6 +196,8 @@ declare namespace $derived {
 	 */
 	export function by<T>(fn: () => T): T;
 
+	export function async<T>(expression: T, options?: { defer?: boolean }): T;
+
 	// prevent intellisense from being unhelpful
 	/** @deprecated */
 	export const apply: never;
@@ -218,12 +220,6 @@ 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,17 +95,16 @@ export function CallExpression(node, context) {
 
 			break;
 
-		case '$async':
-		case '$async.defer': {
+		case '$derived.async': {
 			if (
 				parent.type !== 'VariableDeclarator' ||
 				get_parent(context.path, -3).type === 'ConstTag'
 			) {
 				e.state_invalid_placement(node, rune);
 			}
 
-			if (node.arguments.length !== 1) {
-				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
+			if (node.arguments.length !== 1 && node.arguments.length !== 2) {
+				e.rune_invalid_arguments_length(node, rune, 'one or two arguments');
 			}
 
 			break;
@@ -221,7 +220,7 @@ export function CallExpression(node, context) {
 			function_depth: context.state.function_depth + 1,
 			expression
 		});
-	} else if (rune === '$inspect' || rune === '$async' || rune === '$async.defer') {
+	} else if (rune === '$inspect' || rune === '$derived.async') {
 		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
 	} else {
 		context.next();

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

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

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

@@ -157,22 +157,15 @@ export function VariableDeclaration(node, context) {
 				continue;
 			}
 
-			if (rune === '$async' || rune === '$async.defer') {
+			if (rune === '$derived.async') {
 				if (declarator.id.type === 'Identifier') {
+					const options =
+						args.length > 1 ? /** @type {Expression} */ (context.visit(args[1])) : undefined;
 					declarations.push(
 						b.declarator(
 							declarator.id,
 							b.call(
-								b.await(
-									b.call(
-										'$.save',
-										b.call(
-											'$.async_derived',
-											b.thunk(value, true),
-											rune === '$async.defer' && b.literal(true)
-										)
-									)
-								)
+								b.await(b.call('$.save', b.call('$.async_derived', b.thunk(value, true), options)))
 							)
 						)
 					);

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

@@ -77,11 +77,11 @@ export function derived(fn) {
 /**
  * @template V
  * @param {() => Promise<V>} fn
- * @param {boolean} [deferred]
+ * @param {{ defer?: boolean }} [options]
  * @returns {Promise<Source<V>>}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function async_derived(fn, deferred = false) {
+export function async_derived(fn, options = {}) {
 	let parent = /** @type {Effect | null} */ (active_effect);
 
 	if (parent === null) {
@@ -90,6 +90,7 @@ export function async_derived(fn, deferred = false) {
 
 	var promise = /** @type {Promise<V>} */ (/** @type {unknown} */ (undefined));
 	var value = source(/** @type {V} */ (undefined));
+	var deferred = options.defer === true;
 
 	block(async () => {
 		var current = (promise = fn());

packages/svelte/src/utils.js

@@ -436,16 +436,15 @@ const RUNES = /** @type {const} */ ([
 	'$bindable',
 	'$derived',
 	'$derived.by',
+	'$derived.async',
 	'$effect',
 	'$effect.pre',
 	'$effect.tracking',
 	'$effect.root',
 	'$inspect',
 	'$inspect().with',
 	'$inspect.trace',
-	'$host',
-	'$async',
-	'$async.defer'
+	'$host'
 ]);
 
 /**

packages/svelte/types/index.d.ts

@@ -512,6 +512,8 @@ declare module 'svelte' {
 	 * ```
 	 * */
 	export function untrack<T>(fn: () => T): T;
+
+	export function isDeferred(fn: () => any): boolean;
 	type Getters<T> = {
 		[K in keyof T]: () => T[K];
 	};
@@ -2862,6 +2864,8 @@ declare namespace $derived {
 	 */
 	export function by<T>(fn: () => T): T;
 
+	export function async<T>(expression: T, options?: { defer?: boolean }): T;
+
 	// prevent intellisense from being unhelpful
 	/** @deprecated */
 	export const apply: never;
@@ -2884,12 +2888,6 @@ 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.