All files / src/internal/client/dom/blocks key.js

100% Statements 51/51
100% Branches 6/6
100% Functions 1/1
100% Lines 45/45

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 462x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 30x 13x 13x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 30x 52x 52x 22x 22x 52x 52x 52x 30x 30x 30x 13x 13x 30x  
/** @import { Effect, TemplateNode } from '#client' */
import { UNINITIALIZED } from '../../../../constants.js';
import { derived } from '../../reactivity/deriveds.js';
import { block, branch, pause_effect } from '../../reactivity/effects.js';
import { safe_not_equal } from '../../reactivity/equality.js';
import { get } from '../../runtime.js';
import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
 
/**
 * @template V
 * @param {TemplateNode} node
 * @param {() => V} get_key
 * @param {(anchor: Node) => TemplateNode | void} render_fn
 * @returns {void}
 */
export function key_block(node, get_key, render_fn) {
	if (hydrating) {
		hydrate_next();
	}
 
	var anchor = node;
 
	/** @type {V | typeof UNINITIALIZED} */
	var key = UNINITIALIZED;
 
	/** @type {Effect} */
	var effect;
 
	/** We use a derived here to ensure stability of any depedencies due to the use of `pause_effect` */
	var derived_key = derived(get_key);
 
	block(() => {
		if (safe_not_equal(key, (key = get(derived_key)))) {
			if (effect) {
				pause_effect(effect);
			}
 
			effect = branch(() => render_fn(anchor));
		}
	});
 
	if (hydrating) {
		anchor = hydrate_node;
	}
}