log_reactions() — svelte Function Reference

Architecture documentation for the log_reactions() function in debug.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 3

Entity Profile

ClientRuntime→ Hydration→ log_reactions() — svelte Function Reference

Dependency Diagram

graph TD
  521e299e_ab59_6272_422b_3ad55c315b6f["log_reactions()"]
  fc525dc9_b57a_8bf5_77df_6fcfa5373180["debug.js"]
  521e299e_ab59_6272_422b_3ad55c315b6f -->|defined in| fc525dc9_b57a_8bf5_77df_6fcfa5373180
  a814b193_e12a_4037_c3c8_dfd45f3bd0bb["untrack()"]
  521e299e_ab59_6272_422b_3ad55c315b6f -->|calls| a814b193_e12a_4037_c3c8_dfd45f3bd0bb
  532a740d_d410_0fd6_983a_933cb13808e7["snapshot()"]
  521e299e_ab59_6272_422b_3ad55c315b6f -->|calls| 532a740d_d410_0fd6_983a_933cb13808e7
  16cd018d_c084_c5ad_7239_ee199fdd3ffe["effect_label()"]
  521e299e_ab59_6272_422b_3ad55c315b6f -->|calls| 16cd018d_c084_c5ad_7239_ee199fdd3ffe
  style 521e299e_ab59_6272_422b_3ad55c315b6f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dev/debug.js lines 172–334

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;