diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js index d32f17b97a..acf3bd6f44 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js +++ b/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); diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js index 5834f5bffd..f5dce1cb29 100644 --- a/packages/svelte/src/internal/client/dev/tracing.js +++ b/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 diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js index c659804054..c202dd10d1 100644 --- a/packages/svelte/src/internal/client/reactivity/deriveds.js +++ b/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} p */ function next(p) {