tag async deriveds

Author: Rich-Harris

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

@@ -208,13 +208,16 @@ export function VariableDeclaration(node, context) {
 
 					if (is_async) {
 						const location = dev && is_ignored(init, 'await_waterfall') && locate_node(init);
-						const call = b.call(
+						let call = b.call(
 							'$.async_derived',
 							b.thunk(expression, true),
 							location ? b.literal(location) : undefined
 						);
 
-						declarations.push(b.declarator(declarator.id, b.call(b.await(b.call('$.save', call)))));
+						call = b.call(b.await(b.call('$.save', call)));
+						if (dev) call = b.call('$.tag', call, b.literal(declarator.id.name));
+
+						declarations.push(b.declarator(declarator.id, call));
 					} else {
 						if (rune === '$derived') expression = b.thunk(expression);
 

packages/svelte/src/internal/client/dev/tracing.js

@@ -2,7 +2,7 @@
 import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
 import { define_property } from '../../shared/utils.js';
-import { DERIVED, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
+import { DERIVED, EFFECT_ASYNC, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { effect_tracking } from '../reactivity/effects.js';
 import { active_reaction, captured_signals, set_captured_signals, untrack } from '../runtime.js';
 
@@ -26,7 +26,7 @@ function log_entry(signal, entry) {
 		return;
 	}
 
-	const type = (signal.f & DERIVED) !== 0 ? '$derived' : '$state';
+	const type = (signal.f & (DERIVED | EFFECT_ASYNC)) !== 0 ? '$derived' : '$state';
 	const current_reaction = /** @type {Reaction} */ (active_reaction);
 	const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
 	const style = dirty

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

@@ -10,7 +10,8 @@ import {
 	MAYBE_DIRTY,
 	STALE_REACTION,
 	UNOWNED,
-	DESTROYED
+	DESTROYED,
+	EFFECT_ASYNC
 } from '#client/constants';
 import {
 	active_reaction,
@@ -188,6 +189,12 @@ export function async_derived(fn, location) {
 		promise.then(handler, (e) => handler(null, e || 'unknown'));
 	});
 
+	if (DEV) {
+		// add a flag that lets this be printed as a derived
+		// when using `$inspect.trace()`
+		signal.f |= EFFECT_ASYNC;
+	}
+
 	return new Promise((fulfil) => {
 		/** @param {Promise<V>} p */
 		function next(p) {