log_effect_tree() — svelte Function Reference

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

Function javascript ClientRuntime Hydration calls 2 called by 1

Entity Profile

ClientRuntime→ Hydration→ log_effect_tree() — svelte Function Reference

Dependency Diagram

graph TD
  3055ea5a_a5cc_f2b6_42ad_2747f4e1cead["log_effect_tree()"]
  fc525dc9_b57a_8bf5_77df_6fcfa5373180["debug.js"]
  3055ea5a_a5cc_f2b6_42ad_2747f4e1cead -->|defined in| fc525dc9_b57a_8bf5_77df_6fcfa5373180
  4857fe6e_fff2_4d8e_66be_eddbb6b5961a["log_inconsistent_branches()"]
  4857fe6e_fff2_4d8e_66be_eddbb6b5961a -->|calls| 3055ea5a_a5cc_f2b6_42ad_2747f4e1cead
  16cd018d_c084_c5ad_7239_ee199fdd3ffe["effect_label()"]
  3055ea5a_a5cc_f2b6_42ad_2747f4e1cead -->|calls| 16cd018d_c084_c5ad_7239_ee199fdd3ffe
  5f2148e6_2541_df61_7418_abc7753d7da6["log_dep()"]
  3055ea5a_a5cc_f2b6_42ad_2747f4e1cead -->|calls| 5f2148e6_2541_df61_7418_abc7753d7da6
  style 3055ea5a_a5cc_f2b6_42ad_2747f4e1cead fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dev/debug.js lines 75–131

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';

	// eslint-disable-next-line no-console
	console.group(`%c${label} (${status})`, `font-weight: ${status === 'clean' ? 'normal' : 'bold'}`);

	if (depth === 0) {
		const callsite = new Error().stack
			?.split('\n')[2]
			.replace(/\s+at (?: \w+\(?)?(.+)\)?/, (m, $1) => $1.replace(/\?[^:]+/, ''));

		// eslint-disable-next-line no-console
		console.log(callsite);
	} else {
		// eslint-disable-next-line no-console
		console.groupCollapsed(`%cfn`, `font-weight: normal`);
		// eslint-disable-next-line no-console
		console.log(effect.fn);
		// eslint-disable-next-line no-console
		console.groupEnd();
	}

	if (effect.deps !== null) {
		// eslint-disable-next-line no-console
		console.groupCollapsed('%cdeps', 'font-weight: normal');

		for (const dep of effect.deps) {
			log_dep(dep);
		}

		// eslint-disable-next-line no-console
		console.groupEnd();
	}

	if (effect.nodes) {
		// eslint-disable-next-line no-console
		console.log(effect.nodes.start);

		if (effect.nodes.start !== effect.nodes.end) {
			// eslint-disable-next-line no-console
			console.log(effect.nodes.end);
		}
	}

	let child = effect.first;
	while (child !== null) {
		log_effect_tree(child, depth + 1);
		child = child.next;
	}

	// eslint-disable-next-line no-console
	console.groupEnd();
}