reconcile() — svelte Function Reference

Architecture documentation for the reconcile() function in each.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 9 called by 1

Entity Profile

ClientRuntime→ Hydration→ reconcile() — svelte Function Reference

Dependency Diagram

graph TD
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9["reconcile()"]
  ca0d28d0_c4b0_db5c_32c9_bdad64d5deaa["each.js"]
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 -->|defined in| ca0d28d0_c4b0_db5c_32c9_bdad64d5deaa
  7f76e82e_4ed8_1525_9136_2ae67868d44e["each()"]
  7f76e82e_4ed8_1525_9136_2ae67868d44e -->|calls| 3ceb9b1c_7062_d75e_744a_fd12a80dfdc9
  8f0970ee_850e_50da_7bfc_7f833204a7af["skip_to_branch()"]
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 -->|calls| 8f0970ee_850e_50da_7bfc_7f833204a7af
  a08b6cc5_af73_1be4_d02f_3113cf8a8305["get()"]
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 -->|calls| a08b6cc5_af73_1be4_d02f_3113cf8a8305
  1061f0bd_2bf2_7402_fa62_318d8455bb96["move()"]
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 -->|calls| 1061f0bd_2bf2_7402_fa62_318d8455bb96
  ad2bb548_da00_bb08_9b90_f768e5d99e9b["link()"]
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 -->|calls| ad2bb548_da00_bb08_9b90_f768e5d99e9b
  9c654195_2948_bf49_8faa_cded59a1e3b9["resume_effect()"]
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 -->|calls| 9c654195_2948_bf49_8faa_cded59a1e3b9
  24ab94ca_01c9_1947_75b2_801fb5cac289["destroy_effects()"]
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 -->|calls| 24ab94ca_01c9_1947_75b2_801fb5cac289
  d31878b6_f94f_35ad_3c78_f4ad9319ffba["pause_effects()"]
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 -->|calls| d31878b6_f94f_35ad_3c78_f4ad9319ffba
  2cab0f64_6d19_d981_66e2_d2555c252702["queue_micro_task()"]
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 -->|calls| 2cab0f64_6d19_d981_66e2_d2555c252702
  58e25076_0e70_68a7_dbf9_e13ef9845ff2["apply()"]
  3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 -->|calls| 58e25076_0e70_68a7_dbf9_e13ef9845ff2
  style 3ceb9b1c_7062_d75e_744a_fd12a80dfdc9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/blocks/each.js lines 371–597

function reconcile(state, array, anchor, flags, get_key) {
	var is_animated = (flags & EACH_IS_ANIMATED) !== 0;

	var length = array.length;
	var items = state.items;
	var current = skip_to_branch(state.effect.first);

	/** @type {undefined | Set<Effect>} */
	var seen;

	/** @type {Effect | null} */
	var prev = null;

	/** @type {undefined | Set<Effect>} */
	var to_animate;

	/** @type {Effect[]} */
	var matched = [];

	/** @type {Effect[]} */
	var stashed = [];

	/** @type {V} */
	var value;

	/** @type {any} */
	var key;

	/** @type {Effect | undefined} */
	var effect;

	/** @type {number} */
	var i;

	if (is_animated) {
		for (i = 0; i < length; i += 1) {
			value = array[i];
			key = get_key(value, i);
			effect = /** @type {EachItem} */ (items.get(key)).e;

			// offscreen == coming in now, no animation in that case,
			// else this would happen https://github.com/sveltejs/svelte/issues/17181
			if ((effect.f & EFFECT_OFFSCREEN) === 0) {
				effect.nodes?.a?.measure();
				(to_animate ??= new Set()).add(effect);
			}
		}
	}

	for (i = 0; i < length; i += 1) {
		value = array[i];
		key = get_key(value, i);

		effect = /** @type {EachItem} */ (items.get(key)).e;

		if (state.outrogroups !== null) {
			for (const group of state.outrogroups) {
				group.pending.delete(effect);
				group.done.delete(effect);
			}
		}

		if ((effect.f & EFFECT_OFFSCREEN) !== 0) {
			effect.f ^= EFFECT_OFFSCREEN;

			if (effect === current) {
				move(effect, null, anchor);
			} else {
				var next = prev ? prev.next : current;

				if (effect === state.effect.last) {
					state.effect.last = effect.prev;
				}

				if (effect.prev) effect.prev.next = effect.next;
				if (effect.next) effect.next.prev = effect.prev;
				link(state, prev, effect);
				link(state, effect, next);

				move(effect, next, anchor);
				prev = effect;