svelte 5.45.2 → 5.45.4

package/src/internal/client/dev/debug.js

@@ -5,12 +5,18 @@ import {
 	BOUNDARY_EFFECT,
 	BRANCH_EFFECT,
 	CLEAN,
+	CONNECTED,
 	DERIVED,
+	DIRTY,
 	EFFECT,
 	ASYNC,
+	DESTROYED,
+	INERT,
 	MAYBE_DIRTY,
 	RENDER_EFFECT,
-	ROOT_EFFECT
+	ROOT_EFFECT,
+	WAS_MARKED,
+	MANAGED_EFFECT
 } from '#client/constants';
 import { snapshot } from '../../shared/clone.js';
 import { untrack } from '../runtime.js';
@@ -30,11 +36,13 @@ export function root(effect) {
 /**
  *
  * @param {Effect} effect
+ * @param {boolean} append_effect
+ * @returns {string}
  */
-export function log_effect_tree(effect, depth = 0) {
+function effect_label(effect, append_effect = false) {
 	const flags = effect.f;
 
-	let label = '(unknown)';
+	let label = `(unknown ${append_effect ? 'effect' : ''})`;
 
 	if ((flags & ROOT_EFFECT) !== 0) {
 		label = 'root';
@@ -42,6 +50,8 @@ export function log_effect_tree(effect, depth = 0) {
 		label = 'boundary';
 	} else if ((flags & BLOCK_EFFECT) !== 0) {
 		label = 'block';
+	} else if ((flags & MANAGED_EFFECT) !== 0) {
+		label = 'managed';
 	} else if ((flags & ASYNC) !== 0) {
 		label = 'async';
 	} else if ((flags & BRANCH_EFFECT) !== 0) {
@@ -52,6 +62,20 @@ export function log_effect_tree(effect, depth = 0) {
 		label = 'effect';
 	}
 
+	if (append_effect && !label.endsWith('effect')) {
+		label += ' effect';
+	}
+
+	return label;
+}
+/**
+ *
+ * @param {Effect} effect
+ */
+export function log_effect_tree(effect, depth = 0) {
+	const flags = effect.f;
+	const label = effect_label(effect);
+
 	let status =
 		(flags & CLEAN) !== 0 ? 'clean' : (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
 
@@ -86,13 +110,13 @@ export function log_effect_tree(effect, depth = 0) {
 		console.groupEnd();
 	}
 
-	if (effect.nodes_start && effect.nodes_end) {
+	if (effect.nodes) {
 		// eslint-disable-next-line no-console
-		console.log(effect.nodes_start);
+		console.log(effect.nodes.start);
 
-		if (effect.nodes_start !== effect.nodes_end) {
+		if (effect.nodes.start !== effect.nodes.end) {
 			// eslint-disable-next-line no-console
-			console.log(effect.nodes_end);
+			console.log(effect.nodes.end);
 		}
 	}
 
@@ -140,3 +164,337 @@ function log_dep(dep) {
 		);
 	}
 }
+
+/**
+ * Logs all reactions of a source or derived transitively
+ * @param {Derived | Value} signal
+ */
+export function log_reactions(signal) {
+	/** @type {Set<Derived | Value>} */
+	const visited = new Set();
+
+	/**
+	 * Returns an array of flag names that are set on the given flags bitmask
+	 * @param {number} flags
+	 * @returns {string[]}
+	 */
+	function get_derived_flag_names(flags) {
+		/** @type {string[]} */
+		const names = [];
+
+		if ((flags & CLEAN) !== 0) names.push('CLEAN');
+		if ((flags & DIRTY) !== 0) names.push('DIRTY');
+		if ((flags & MAYBE_DIRTY) !== 0) names.push('MAYBE_DIRTY');
+		if ((flags & CONNECTED) !== 0) names.push('CONNECTED');
+		if ((flags & WAS_MARKED) !== 0) names.push('WAS_MARKED');
+		if ((flags & INERT) !== 0) names.push('INERT');
+		if ((flags & DESTROYED) !== 0) names.push('DESTROYED');
+
+		return names;
+	}
+
+	/**
+	 * @param {Derived | Value} d
+	 * @param {number} depth
+	 */
+	function log_derived(d, depth) {
+		const flags = d.f;
+		const flag_names = get_derived_flag_names(flags);
+		const flags_str = flag_names.length > 0 ? `(${flag_names.join(', ')})` : '(no flags)';
+
+		// eslint-disable-next-line no-console
+		console.group(
+			`%c${flags & DERIVED ? '$derived' : '$state'} %c${d.label ?? '<unknown>'} %c${flags_str}`,
+			'font-weight: bold; color: CornflowerBlue',
+			'font-weight: normal; color: inherit',
+			'font-weight: normal; color: gray'
+		);
+
+		// eslint-disable-next-line no-console
+		console.log(untrack(() => snapshot(d.v)));
+
+		if ('fn' in d) {
+			// eslint-disable-next-line no-console
+			console.log('%cfn:', 'font-weight: bold', d.fn);
+		}
+
+		if (d.reactions !== null && d.reactions.length > 0) {
+			// eslint-disable-next-line no-console
+			console.group('%creactions', 'font-weight: bold');
+
+			for (const reaction of d.reactions) {
+				if ((reaction.f & DERIVED) !== 0) {
+					const derived_reaction = /** @type {Derived} */ (reaction);
+
+					if (visited.has(derived_reaction)) {
+						// eslint-disable-next-line no-console
+						console.log(
+							`%c$derived %c${derived_reaction.label ?? '<unknown>'} %c(already seen)`,
+							'font-weight: bold; color: CornflowerBlue',
+							'font-weight: normal; color: inherit',
+							'font-weight: bold; color: orange'
+						);
+					} else {
+						visited.add(derived_reaction);
+						log_derived(derived_reaction, depth + 1);
+					}
+				} else {
+					// It's an effect
+					const label = effect_label(/** @type {Effect} */ (reaction), true);
+					const status = (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
+
+					// Collect parent statuses
+					/** @type {string[]} */
+					const parent_statuses = [];
+					let show = false;
+					let current = /** @type {Effect} */ (reaction).parent;
+					while (current !== null) {
+						const parent_flags = current.f;
+						if ((parent_flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
+							const parent_status = (parent_flags & CLEAN) !== 0 ? 'clean' : 'not clean';
+							if (parent_status === 'clean' && parent_statuses.includes('not clean')) show = true;
+							parent_statuses.push(parent_status);
+						}
+						if (!current.parent) break;
+						current = current.parent;
+					}
+
+					// Check if reaction is reachable from root
+					const seen_effects = new Set();
+					let reachable = false;
+					/**
+					 * @param {Effect | null} effect
+					 */
+					function check_reachable(effect) {
+						if (effect === null || reachable) return;
+						if (effect === reaction) {
+							reachable = true;
+							return;
+						}
+						if (effect.f & DESTROYED) return;
+						if (seen_effects.has(effect)) {
+							throw new Error('');
+						}
+						seen_effects.add(effect);
+						let child = effect.first;
+						while (child !== null) {
+							check_reachable(child);
+							child = child.next;
+						}
+					}
+					try {
+						if (current) check_reachable(current);
+					} catch (e) {
+						// eslint-disable-next-line no-console
+						console.log(
+							`%c⚠️ Circular reference detected in effect tree`,
+							'font-weight: bold; color: red',
+							seen_effects
+						);
+					}
+
+					if (!reachable) {
+						// eslint-disable-next-line no-console
+						console.log(
+							`%c⚠️ Effect is NOT reachable from its parent chain`,
+							'font-weight: bold; color: red'
+						);
+					}
+
+					const parent_status_str = show ? ` (${parent_statuses.join(', ')})` : '';
+
+					// eslint-disable-next-line no-console
+					console.log(
+						`%c${label} (${status})${parent_status_str}`,
+						`font-weight: bold; color: ${parent_status_str ? 'red' : 'green'}`,
+						reaction
+					);
+				}
+			}
+
+			// eslint-disable-next-line no-console
+			console.groupEnd();
+		} else {
+			// eslint-disable-next-line no-console
+			console.log('%cno reactions', 'font-style: italic; color: gray');
+		}
+
+		// eslint-disable-next-line no-console
+		console.groupEnd();
+	}
+
+	// eslint-disable-next-line no-console
+	console.group(`%cDerived Reactions Graph`, 'font-weight: bold; color: purple');
+
+	visited.add(signal);
+	log_derived(signal, 0);
+
+	// eslint-disable-next-line no-console
+	console.groupEnd();
+}
+
+/**
+ * Traverses an effect tree and logs branches where a non-clean branch exists below a clean branch
+ * @param {Effect} effect
+ */
+export function log_inconsistent_branches(effect) {
+	const root_effect = root(effect);
+
+	/**
+	 * @typedef {{
+	 *   effect: Effect,
+	 *   status: 'clean' | 'maybe dirty' | 'dirty',
+	 *   parent_clean: boolean,
+	 *   children: BranchInfo[]
+	 * }} BranchInfo
+	 */
+
+	/**
+	 * Collects branch effects from the tree
+	 * @param {Effect} eff
+	 * @param {boolean} parent_clean - whether any ancestor branch is clean
+	 * @returns {BranchInfo[]}
+	 */
+	function collect_branches(eff, parent_clean) {
+		/** @type {BranchInfo[]} */
+		const branches = [];
+		const flags = eff.f;
+		const is_branch = (flags & BRANCH_EFFECT) !== 0;
+
+		if (is_branch) {
+			const status =
+				(flags & CLEAN) !== 0 ? 'clean' : (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
+
+			/** @type {BranchInfo[]} */
+			const child_branches = [];
+
+			let child = eff.first;
+			while (child !== null) {
+				child_branches.push(...collect_branches(child, status === 'clean'));
+				child = child.next;
+			}
+
+			branches.push({
+				effect: eff,
+				status,
+				parent_clean,
+				children: child_branches
+			});
+		} else {
+			// Not a branch, continue traversing
+			let child = eff.first;
+			while (child !== null) {
+				branches.push(...collect_branches(child, parent_clean));
+				child = child.next;
+			}
+		}
+
+		return branches;
+	}
+
+	/**
+	 * Checks if a branch tree contains any inconsistencies (non-clean below clean)
+	 * @param {BranchInfo} branch
+	 * @param {boolean} ancestor_clean
+	 * @returns {boolean}
+	 */
+	function has_inconsistency(branch, ancestor_clean) {
+		const is_inconsistent = ancestor_clean && branch.status !== 'clean';
+		if (is_inconsistent) return true;
+
+		const new_ancestor_clean = ancestor_clean || branch.status === 'clean';
+		for (const child of branch.children) {
+			if (has_inconsistency(child, new_ancestor_clean)) return true;
+		}
+		return false;
+	}
+
+	/**
+	 * Logs a branch and its children, but only if there are inconsistencies
+	 * @param {BranchInfo} branch
+	 * @param {boolean} ancestor_clean
+	 * @param {number} depth
+	 */
+	function log_branch(branch, ancestor_clean, depth) {
+		const is_inconsistent = ancestor_clean && branch.status !== 'clean';
+		const new_ancestor_clean = ancestor_clean || branch.status === 'clean';
+
+		// Only log if this branch or any descendant has an inconsistency
+		if (!has_inconsistency(branch, ancestor_clean) && !is_inconsistent) {
+			return;
+		}
+
+		const style = is_inconsistent
+			? 'font-weight: bold; color: red'
+			: branch.status === 'clean'
+				? 'font-weight: normal; color: green'
+				: 'font-weight: bold; color: orange';
+
+		const warning = is_inconsistent ? ' ⚠️ INCONSISTENT' : '';
+
+		// eslint-disable-next-line no-console
+		console.group(`%cbranch (${branch.status})${warning}`, style);
+
+		// eslint-disable-next-line no-console
+		console.log('%ceffect:', 'font-weight: bold', branch.effect);
+
+		if (branch.effect.fn) {
+			// eslint-disable-next-line no-console
+			console.log('%cfn:', 'font-weight: bold', branch.effect.fn);
+		}
+
+		if (branch.effect.deps !== null) {
+			// eslint-disable-next-line no-console
+			console.groupCollapsed('%cdeps', 'font-weight: normal');
+			for (const dep of branch.effect.deps) {
+				log_dep(dep);
+			}
+			// eslint-disable-next-line no-console
+			console.groupEnd();
+		}
+
+		if (is_inconsistent) {
+			log_effect_tree(branch.effect);
+		} else if (branch.children.length > 0) {
+			// eslint-disable-next-line no-console
+			console.group('%cchild branches', 'font-weight: bold');
+			for (const child of branch.children) {
+				log_branch(child, new_ancestor_clean, depth + 1);
+			}
+			// eslint-disable-next-line no-console
+			console.groupEnd();
+		}
+
+		// eslint-disable-next-line no-console
+		console.groupEnd();
+	}
+
+	const branches = collect_branches(root_effect, false);
+
+	// Check if there are any inconsistencies at all
+	let has_any_inconsistency = false;
+	for (const branch of branches) {
+		if (has_inconsistency(branch, false)) {
+			has_any_inconsistency = true;
+			break;
+		}
+	}
+
+	if (!has_any_inconsistency) {
+		// eslint-disable-next-line no-console
+		console.log('%cNo inconsistent branches found', 'font-weight: bold; color: green');
+		return;
+	}
+
+	// eslint-disable-next-line no-console
+	console.group(`%cInconsistent Branches (non-clean below clean)`, 'font-weight: bold; color: red');
+
+	for (const branch of branches) {
+		log_branch(branch, false, 0);
+	}
+
+	// eslint-disable-next-line no-console
+	console.groupEnd();
+
+	return true;
+}

package/src/internal/client/dom/blocks/each.js

@@ -1,4 +1,4 @@
-/** @import { EachItem, EachState, Effect, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
+/** @import { EachItem, EachState, Effect, EffectNodes, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
 /** @import { Batch } from '../../reactivity/batch.js'; */
 import {
 	EACH_INDEX_REACTIVE,
@@ -43,18 +43,6 @@ import { DEV } from 'esm-env';
 import { derived_safe_equal } from '../../reactivity/deriveds.js';
 import { current_batch } from '../../reactivity/batch.js';
 
-/**
- * The row of a keyed each block that is currently updating. We track this
- * so that `animate:` directives have something to attach themselves to
- * @type {EachItem | null}
- */
-export let current_each_item = null;
-
-/** @param {EachItem | null} item */
-export function set_current_each_item(item) {
-	current_each_item = item;
-}
-
 /**
  * @param {any} _
  * @param {number} i
@@ -243,8 +231,6 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 
 				if (is_reactive_index) {
 					internal_set(/** @type {Value<number>} */ (item.i), i);
-				} else {
-					item.i = i;
 				}
 
 				if (defer) {
@@ -397,7 +383,7 @@ function reconcile(state, array, anchor, flags, get_key) {
 			// offscreen == coming in now, no animation in that case,
 			// else this would happen https://github.com/sveltejs/svelte/issues/17181
 			if (item.o) {
-				item.a?.measure();
+				item.e.nodes?.a?.measure();
 				(to_animate ??= new Set()).add(item);
 			}
 		}
@@ -432,7 +418,7 @@ function reconcile(state, array, anchor, flags, get_key) {
 		if ((item.e.f & INERT) !== 0) {
 			resume_effect(item.e);
 			if (is_animated) {
-				item.a?.unfix();
+				item.e.nodes?.a?.unfix();
 				(to_animate ??= new Set()).delete(item);
 			}
 		}
@@ -485,7 +471,7 @@ function reconcile(state, array, anchor, flags, get_key) {
 			matched = [];
 			stashed = [];
 
-			while (current !== null && current.k !== key) {
+			while (current !== null && current !== item) {
 				// If the each block isn't inert and an item has an effect that is already inert,
 				// skip over adding it to our seen Set as the item is already being handled
 				if ((current.e.f & INERT) === 0) {
@@ -529,11 +515,11 @@ function reconcile(state, array, anchor, flags, get_key) {
 
 			if (is_animated) {
 				for (i = 0; i < destroy_length; i += 1) {
-					to_destroy[i].a?.measure();
+					to_destroy[i].e.nodes?.a?.measure();
 				}
 
 				for (i = 0; i < destroy_length; i += 1) {
-					to_destroy[i].a?.fix();
+					to_destroy[i].e.nodes?.a?.fix();
 				}
 			}
 
@@ -557,7 +543,7 @@ function reconcile(state, array, anchor, flags, get_key) {
 		queue_micro_task(() => {
 			if (to_animate === undefined) return;
 			for (item of to_animate) {
-				item.a?.apply();
+				item.e.nodes?.a?.apply();
 			}
 		});
 	}
@@ -576,7 +562,6 @@ function reconcile(state, array, anchor, flags, get_key) {
  * @returns {EachItem}
  */
 function create_item(anchor, prev, value, key, index, render_fn, flags, get_collection) {
-	var previous_each_item = current_each_item;
 	var reactive = (flags & EACH_ITEM_REACTIVE) !== 0;
 	var mutable = (flags & EACH_ITEM_IMMUTABLE) === 0;
 
@@ -598,7 +583,6 @@ function create_item(anchor, prev, value, key, index, render_fn, flags, get_coll
 		i,
 		v,
 		k: key,
-		a: null,
 		// @ts-expect-error
 		e: null,
 		o: false,
@@ -606,27 +590,21 @@ function create_item(anchor, prev, value, key, index, render_fn, flags, get_coll
 		next: null
 	};
 
-	current_each_item = item;
-
-	try {
-		if (anchor === null) {
-			var fragment = document.createDocumentFragment();
-			fragment.append((anchor = create_text()));
-		}
-
-		item.e = branch(() => render_fn(/** @type {Node} */ (anchor), v, i, get_collection));
+	if (anchor === null) {
+		var fragment = document.createDocumentFragment();
+		fragment.append((anchor = create_text()));
+	}
 
-		if (prev !== null) {
-			// we only need to set `prev.next = item`, because
-			// `item.prev = prev` was set on initialization.
-			// the effects themselves are already linked
-			prev.next = item;
-		}
+	item.e = branch(() => render_fn(/** @type {Node} */ (anchor), v, i, get_collection));
 
-		return item;
-	} finally {
-		current_each_item = previous_each_item;
+	if (prev !== null) {
+		// we only need to set `prev.next = item`, because
+		// `item.prev = prev` was set on initialization.
+		// the effects themselves are already linked
+		prev.next = item;
 	}
+
+	return item;
 }
 
 /**
@@ -635,10 +613,12 @@ function create_item(anchor, prev, value, key, index, render_fn, flags, get_coll
  * @param {Text | Element | Comment} anchor
  */
 function move(item, next, anchor) {
-	var end = item.next ? /** @type {TemplateNode} */ (item.next.e.nodes_start) : anchor;
+	if (!item.e.nodes) return;
+
+	var end = item.next ? /** @type {EffectNodes} */ (item.next.e.nodes).start : anchor;
 
-	var dest = next ? /** @type {TemplateNode} */ (next.e.nodes_start) : anchor;
-	var node = /** @type {TemplateNode} */ (item.e.nodes_start);
+	var dest = next ? /** @type {EffectNodes} */ (next.e.nodes).start : anchor;
+	var node = /** @type {TemplateNode} */ (item.e.nodes.start);
 
 	while (node !== null && node !== end) {
 		var next_node = /** @type {TemplateNode} */ (get_next_sibling(node));

package/src/internal/client/dom/blocks/html.js

@@ -54,9 +54,9 @@ export function html(node, get_value, svg = false, mathml = false, skip_warning
 			return;
 		}
 
-		if (effect.nodes_start !== null) {
-			remove_effect_dom(effect.nodes_start, /** @type {TemplateNode} */ (effect.nodes_end));
-			effect.nodes_start = effect.nodes_end = null;
+		if (effect.nodes !== null) {
+			remove_effect_dom(effect.nodes.start, /** @type {TemplateNode} */ (effect.nodes.end));
+			effect.nodes = null;
 		}
 
 		if (value === '') return;

package/src/internal/client/dom/blocks/svelte-element.js

@@ -1,4 +1,4 @@
-/** @import { Effect, TemplateNode } from '#client' */
+/** @import { Effect, EffectNodes, TemplateNode } from '#client' */
 import { FILENAME, NAMESPACE_SVG } from '../../../../constants.js';
 import {
 	hydrate_next,
@@ -10,7 +10,6 @@ import {
 import { create_text, get_first_child } from '../operations.js';
 import { block, teardown } from '../../reactivity/effects.js';
 import { set_should_intro } from '../../render.js';
-import { current_each_item, set_current_each_item } from './each.js';
 import { active_effect } from '../../runtime.js';
 import { component_context, dev_stack } from '../../context.js';
 import { DEV } from 'esm-env';
@@ -18,6 +17,7 @@ import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
 import { assign_nodes } from '../template.js';
 import { is_raw_text_element } from '../../../../utils.js';
 import { BranchManager } from './branches.js';
+import { set_animation_effect_override } from '../elements/transitions.js';
 
 /**
  * @param {Comment | Element} node
@@ -48,11 +48,10 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 	var anchor = /** @type {TemplateNode} */ (hydrating ? hydrate_node : node);
 
 	/**
-	 * The keyed `{#each ...}` item block, if any, that this element is inside.
 	 * We track this so we can set it when changing the element, allowing any
 	 * `animate:` directive to bind itself to the correct block
 	 */
-	var each_item_block = current_each_item;
+	var parent_effect = /** @type {Effect} */ (active_effect);
 
 	var branches = new BranchManager(anchor, false);
 
@@ -67,10 +66,6 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 		}
 
 		branches.ensure(next_tag, (anchor) => {
-			// See explanation of `each_item_block` above
-			var previous_each_item = current_each_item;
-			set_current_each_item(each_item_block);
-
 			if (next_tag) {
 				element = hydrating
 					? /** @type {Element} */ (element)
@@ -112,21 +107,23 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 						}
 					}
 
+					set_animation_effect_override(parent_effect);
+
 					// `child_anchor` is undefined if this is a void element, but we still
 					// need to call `render_fn` in order to run actions etc. If the element
 					// contains children, it's a user error (which is warned on elsewhere)
 					// and the DOM will be silently discarded
 					render_fn(element, child_anchor);
+
+					set_animation_effect_override(null);
 				}
 
 				// we do this after calling `render_fn` so that child effects don't override `nodes.end`
-				/** @type {Effect} */ (active_effect).nodes_end = element;
+				/** @type {Effect & { nodes: EffectNodes }} */ (active_effect).nodes.end = element;
 
 				anchor.before(element);
 			}
 
-			set_current_each_item(previous_each_item);
-
 			if (hydrating) {
 				set_hydrate_node(anchor);
 			}