chore: apply each block controlled teardown optimization

Author: trueadm

packages/svelte/src/internal/client/dom/blocks/each.js

@@ -15,14 +15,17 @@ import { untrack } from '../../runtime.js';
 import {
 	block,
 	branch,
+	destroy_effect,
 	effect,
+	out,
+	pause_children,
 	pause_effect,
-	pause_effects,
 	resume_effect
 } from '../../reactivity/effects.js';
 import { source, mutable_source, set } from '../../reactivity/sources.js';
 import { is_array, is_frozen, map_get, map_set } from '../../utils.js';
 import { STATE_SYMBOL } from '../../constants.js';
+import { noop } from '../../../shared/utils.js';
 
 var NEW_ITEM = -1;
 var LIS_ITEM = -2;
@@ -39,6 +42,38 @@ export function set_current_each_item(item) {
 	current_each_item = item;
 }
 
+/**
+ * Pause multiple effects simultaneously, and coordinate their
+ * subsequent destruction. Used in each blocks
+ * @param {import('#client').Effect[]} effects
+ * @param {null | Node} controlled_anchor
+ * @param {() => void} callback
+ */
+function pause_effects(effects, controlled_anchor, callback = noop) {
+	/** @type {import('#client').TransitionManager[]} */
+	var transitions = [];
+	var length = effects.length;
+
+	for (var i = 0; i < length; i++) {
+		pause_children(effects[i], transitions, true);
+	}
+
+	// If we have a controlled anchor, it means that the each block is inside a single
+	// DOM element, so we can apply a fast-path for clearing the contents of the element.
+	if (effects.length > 0 && transitions.length === 0 && controlled_anchor !== null) {
+		const each_element = /** @type {Element} */ (controlled_anchor.parentNode);
+		each_element.textContent = '';
+		each_element.append(controlled_anchor);
+	}
+
+	out(transitions, () => {
+		for (var i = 0; i < length; i++) {
+			destroy_effect(effects[i]);
+		}
+		callback();
+	});
+}
+
 /**
  * @template V
  * @param {Element | Comment} anchor The next sibling node, or the parent node if this is a 'controlled' block
@@ -145,7 +180,6 @@ function each(anchor, flags, get_collection, get_key, render_fn, fallback_fn, re
 		}
 
 		if (!hydrating) {
-			// TODO add 'empty controlled block' optimisation here
 			reconcile_fn(array, state, anchor, render_fn, flags, keys);
 		}
 
@@ -244,7 +278,9 @@ function reconcile_indexed_array(array, state, anchor, render_fn, flags) {
 			effects.push(a_items[i].e);
 		}
 
-		pause_effects(effects, () => {
+		var controlled_anchor = (flags & EACH_IS_CONTROLLED) !== 0 && b === 0 ? anchor : null;
+
+		pause_effects(effects, controlled_anchor, () => {
 			state.items.length = b;
 		});
 	}
@@ -274,6 +310,7 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
 
 	var is_animated = (flags & EACH_IS_ANIMATED) !== 0;
 	var should_update = (flags & (EACH_ITEM_REACTIVE | EACH_INDEX_REACTIVE)) !== 0;
+	var is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
 	var start = 0;
 	var item;
 
@@ -381,6 +418,12 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
 		// I fully understand this part)
 		if (moved) {
 			mark_lis(sources);
+		} else if (is_controlled && to_destroy.length === a_items.length) {
+			// We can optimize the case where we change all items of the each block to an entirely new set of items.
+			// In this case we can first clear the DOM fast, along with all their effect, then we can continue
+			// with the normal logic that appends them.
+			pause_effects(to_destroy, anchor);
+			to_destroy = [];
 		}
 
 		// working from the back, insert new or moved items
@@ -421,9 +464,9 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
 		});
 	}
 
-	// TODO: would be good to avoid this closure in the case where we have no
-	// transitions at all. It would make it far more JIT friendly in the hot cases.
-	pause_effects(to_destroy, () => {
+	var controlled_anchor = is_controlled && b === 0 ? anchor : null;
+
+	pause_effects(to_destroy, controlled_anchor, () => {
 		state.items = b_items;
 	});
 }

packages/svelte/src/internal/client/reactivity/effects.js

@@ -309,36 +309,11 @@ export function pause_effect(effect, callback = noop) {
 	});
 }
 
-/**
- * Pause multiple effects simultaneously, and coordinate their
- * subsequent destruction. Used in each blocks
- * @param {import('#client').Effect[]} effects
- * @param {() => void} callback
- */
-export function pause_effects(effects, callback = noop) {
-	/** @type {import('#client').TransitionManager[]} */
-	var transitions = [];
-	var length = effects.length;
-
-	for (var i = 0; i < length; i++) {
-		pause_children(effects[i], transitions, true);
-	}
-
-	// TODO: would be good to avoid this closure in the case where we have no
-	// transitions at all. It would make it far more JIT friendly in the hot cases.
-	out(transitions, () => {
-		for (var i = 0; i < length; i++) {
-			destroy_effect(effects[i]);
-		}
-		callback();
-	});
-}
-
 /**
  * @param {import('#client').TransitionManager[]} transitions
  * @param {() => void} fn
  */
-function out(transitions, fn) {
+export function out(transitions, fn) {
 	var remaining = transitions.length;
 	if (remaining > 0) {
 		var check = () => --remaining || fn();
@@ -355,7 +330,7 @@ function out(transitions, fn) {
  * @param {import('#client').TransitionManager[]} transitions
  * @param {boolean} local
  */
-function pause_children(effect, transitions, local) {
+export function pause_children(effect, transitions, local) {
 	if ((effect.f & INERT) !== 0) return;
 	effect.f ^= INERT;