ripple 0.4.1 → 0.4.3

package/src/runtime/internal/client/for.js

@@ -1,8 +1,9 @@
 /** @import { AppendIntoAnchor, Block, Tracked } from '#client' */
 
-import { IS_CONTROLLED, IS_INDEXED, ROOT_CONTROLLED } from '../../../constants.js';
+import { IS_CONTROLLED, IS_INDEXED, LOCAL_ITEMS, ROOT_CONTROLLED } from '../../../constants.js';
 import {
 	block as create_block,
+	create_block as allocate_block,
 	branch,
 	destroy_block,
 	destroy_block_children,
@@ -11,55 +12,97 @@ import {
 	own_anchor,
 	render,
 } from './blocks.js';
-import { BRANCH_BLOCK, FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
+import {
+	BLOCK_HAS_RUN,
+	BRANCH_BLOCK,
+	DESTROYED,
+	FOR_BLOCK,
+	ITEM_BLOCK,
+	TRACKED_ARRAY,
+} from './constants.js';
 import { hydrate_first_child, hydrate_next, hydrate_node, hydrating } from './hydration.js';
 import { get_last_child, next_sibling, resolve_anchor } from './operations.js';
 import { append } from './template.js';
-import { active_block, set, set_tracking, tracked } from './runtime.js';
+import { active_block, run_block, run_branch, set, set_tracking, tracked } from './runtime.js';
 import { array_from, is_array } from '@tsrx/core/runtime/language-helpers';
+import { HYDRATION } from 'ripple/internal/client/hydration-enabled';
 
 /**
  * @template V
  * @param {Node | AppendIntoAnchor} anchor
  * @param {V} value
  * @param {number} index
- * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
- * @param {boolean} is_indexed
- * @param {boolean} is_keyed
- * @param {((item: V) => any) | undefined} [map_item] a keyed loop's destructuring of the item (see `for_block_keyed`)
+ * @param {any} key the key the item was matched by (keyed lists)
+ * @param {ListState} state the list's state: how items render
  * @returns {Block}
  */
-function create_item(anchor, value, index, render_fn, is_indexed, is_keyed, map_item) {
+function create_item(anchor, value, index, key, state) {
 	var block = /** @type {Block} */ (active_block);
-	var tracked_index = is_indexed ? tracked(index, block) : undefined;
-	var tracked_value = is_keyed
+	var render_fn = state.r;
+	var map_item = state.m;
+	var tracked_index = state.x ? tracked(index, block) : undefined;
+	var tracked_value = state.y
 		? tracked(map_item === undefined ? value : map_item(value), block)
 		: value;
-	var state = {
+	var item_state = {
 		start: null,
 		end: null,
 		i: tracked_index,
 		v: tracked_value,
 		// The item as the collection holds it; a keyed diff compares against it.
 		r: value,
+		// The key the item was matched by: fixed for the block's whole life, so
+		// the body reads it as a plain value (a compiled `@if (outer === item.key)`
+		// depends on the selector alone, not on the item).
+		k: key,
+		// The render state of a body that carries its render block on the item
+		// block itself (see `item`), or null.
+		p: null,
 	};
 
+	// An item without a tracked of its own (a plain list's, or a local one)
+	// renders in place: allocated, linked and run through `run_branch`, with
+	// none of the first-run bookkeeping a block that may re-run needs.
+	if (tracked_value === value && tracked_index === undefined) {
+		var lean = allocate_block(BRANCH_BLOCK, run_item, item_state);
+		run_branch(lean, render_fn, anchor, value, key);
+		lean.f ^= BLOCK_HAS_RUN;
+		return lean;
+	}
+
 	// Passed through module state rather than a per-item closure; run_item
 	// reads them before rendering, so nested loops cannot observe a stale pair.
 	item_anchor = anchor;
 	item_render_fn = render_fn;
-	var b = create_block(BRANCH_BLOCK, run_item, state);
+	var b = create_block(BRANCH_BLOCK, run_item, item_state);
 
 	// The item's tracked value and index are owned by the item block itself.
-	if (is_keyed) {
+	if (tracked_value !== value) {
 		/** @type {Tracked} */ (tracked_value).b = b;
 	}
-	if (is_indexed) {
+	if (tracked_index !== undefined) {
 		/** @type {Tracked} */ (tracked_index).b = b;
 	}
 	return b;
 }
 
+/**
+ * A matched item at its new index: its tracked index and, for a computed key,
+ * its tracked value follow the collection.
+ * @param {ListState} state
+ * @param {Block} block
+ * @param {any} value
+ * @param {number} index
+ */
+function patch_item(state, block, value, index) {
+	if (state.x) {
+		update_index(block, index);
+	}
+	if (state.k !== undefined) {
+		update_value(block, value, state.m, state.l);
+	}
+}
+
 /**
  * The insertion point of a list: a node the items go before, or, for a
  * controlled list (the sole content of its parent), an append-into sentinel so
@@ -72,23 +115,56 @@ function create_item(anchor, value, index, render_fn, is_indexed, is_keyed, map_
  * @returns {AppendIntoAnchor}
  */
 function controlled_anchor(parent) {
-	return { parent, into: true };
+	return { parent, into: true, tail: false };
 }
 
 /** @type {Node | AppendIntoAnchor | null} */
 var item_anchor = null;
-/** @type {((anchor: Node, value: any, index?: any) => Block) | null} */
+/** @type {((anchor: Node, value: any, index?: any, key?: any) => Block) | null} */
 var item_render_fn = null;
 
 /**
- * @param {{ i: Tracked | undefined, v: any }} state
+ * @param {{ i: Tracked | undefined, v: any, k: any, p: any }} state
  */
 function run_item(state) {
-	var render_fn = /** @type {(anchor: Node, value: any, index?: any) => Block} */ (item_render_fn);
+	var p = state.p;
+	if (p !== null) {
+		// A re-run of an item that carries its render block: only the body's
+		// update function, tracked (see `item`).
+		set_tracking(true);
+		/** @type {(prev: any) => void} */ (
+			/** @type {ListState} */ (/** @type {Block} */ (/** @type {Block} */ (active_block).p).s).u
+		)(p);
+		return;
+	}
+	var render_fn = /** @type {(anchor: Node, value: any, index?: any, key?: any) => Block} */ (
+		item_render_fn
+	);
 	var anchor = /** @type {Node} */ (item_anchor);
 	item_render_fn = null;
 	item_anchor = null;
-	render_fn(anchor, state.v, state.i);
+	render_fn(anchor, state.v, state.i, state.k);
+}
+
+/**
+ * The compiled body of a list item whose updates all live in one render block
+ * calls this where it would have created that block: the item block carries
+ * the render block instead. The update function is the list's (passed to
+ * `for`/`for_keyed`, the same for every item) and `prev` its state; it runs
+ * tracked here, so its dependencies are the item block's own, and a change
+ * re-runs it alone through `run_item`. One block, one run, and one state
+ * object less per item.
+ * @param {any} prev
+ */
+export function item(prev) {
+	var block = /** @type {Block} */ (active_block);
+	block.s.p = prev;
+	block.f |= ITEM_BLOCK;
+	set_tracking(true);
+	/** @type {(prev: any) => void} */ (
+		/** @type {ListState} */ (/** @type {Block} */ (block.p).s).u
+	)(prev);
+	set_tracking(false);
 }
 
 /**
@@ -236,7 +312,11 @@ class ListState {
 	 * @param {boolean} is_indexed
 	 * @param {((item: any) => any) | undefined} get_key
 	 * @param {((anchor: Node) => void) | undefined} render_empty
-	 * @param {((item: any) => any) | undefined} [map_item]
+	 * @param {((item: any) => any) | undefined} map_item
+	 * @param {((prev: any) => void) | undefined} update_fn the update function
+	 *   of an item body that carries its render block (see `item`)
+	 * @param {boolean} is_local items are held as they are (`LOCAL_ITEMS`)
+	 * @param {boolean} is_keyed each item holds a tracked of its value
 	 */
 	constructor(
 		anchor,
@@ -247,6 +327,9 @@ class ListState {
 		get_key,
 		render_empty,
 		map_item,
+		update_fn,
+		is_local,
+		is_keyed,
 	) {
 		this.a = anchor;
 		this.g = get_collection;
@@ -256,6 +339,9 @@ class ListState {
 		this.k = get_key;
 		this.e = render_empty;
 		this.m = map_item;
+		this.u = update_fn;
+		this.l = is_local;
+		this.y = is_keyed;
 	}
 }
 
@@ -268,13 +354,13 @@ function run_for(state) {
 
 	// Items render untracked, as in a branch; the list tracks only its collection.
 	set_tracking(false);
-	reconcile_by_ref(state.a, block, array, state.r, state.c, state.x, state.e);
+	reconcile_by_ref(state.a, block, array);
 	set_tracking(true);
 
 	// Re-anchor a hydrated list: the hydrated anchor is the block's start
 	// marker; later inserts and end moves must go before the cursor, which now
 	// sits after the hydrated items.
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		state.a = /** @type {Element | Text} */ (hydrate_node);
 	}
 }
@@ -287,10 +373,10 @@ function run_for_keyed(state) {
 	var array = collection_to_array(state.g());
 
 	set_tracking(false);
-	reconcile_by_key(state.a, block, array, state.r, state.c, state.x, state.k, state.e, state.m);
+	reconcile_by_key(state.a, block, array);
 	set_tracking(true);
 
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		state.a = /** @type {Element | Text} */ (hydrate_node);
 	}
 }
@@ -302,9 +388,11 @@ function run_for_keyed(state) {
  * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {number} flags
  * @param {(anchor: Node) => void} [render_empty]
+ * @param {(prev: any) => void} [update_fn] for an item body that carries its
+ *   render block: its update function (see `item`)
  * @returns {void}
  */
-export function for_block(node, get_collection, render_fn, flags, render_empty) {
+export function for_block(node, get_collection, render_fn, flags, render_empty, update_fn) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
 	var root_controlled = (flags & ROOT_CONTROLLED) !== 0;
@@ -315,7 +403,7 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 	var boundary;
 
 	if (is_controlled) {
-		if (hydrating) {
+		if (HYDRATION && hydrating) {
 			// The cursor sits on the list's element; the items are its children.
 			hydrate_first_child();
 		} else {
@@ -323,7 +411,7 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 		}
 	}
 
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		if (root_controlled) {
 			boundary = /** @type {Node} */ (hydrate_node);
 		}
@@ -340,13 +428,17 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 			is_indexed,
 			undefined,
 			render_empty,
+			undefined,
+			update_fn,
+			false,
+			false,
 		),
 		FOR_BLOCK,
 	);
 
 	if (!is_controlled) own_anchor(node, /** @type {Node} */ (anchor));
 
-	if (hydrating && root_controlled) {
+	if (HYDRATION && hydrating && root_controlled) {
 		// The original `node`: for a sentinel, `hydrate_append` performs the
 		// cursor advance that stands in for the eliminated sibling navigation.
 		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
@@ -365,6 +457,8 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
  * @param {(item: V) => any} [map_item] for a destructuring pattern with a rest
  *   element or a default: destructures the item once, natively, into an object
  *   of the pattern's names, which is what the item's tracked then holds
+ * @param {(prev: any) => void} [update_fn] for an item body that carries its
+ *   render block: its update function (see `item`)
  * @returns {void}
  */
 export function for_block_keyed(
@@ -375,6 +469,7 @@ export function for_block_keyed(
 	get_key,
 	render_empty,
 	map_item,
+	update_fn,
 ) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
@@ -386,7 +481,7 @@ export function for_block_keyed(
 	if (is_controlled) {
 		var parent_node = /** @type {Element} */ (node);
 
-		if (hydrating) {
+		if (HYDRATION && hydrating) {
 			hydrate_first_child();
 			anchor = /** @type {Element | Text} */ (get_last_child(parent_node));
 		} else {
@@ -394,7 +489,7 @@ export function for_block_keyed(
 		}
 	}
 
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		if (root_controlled) {
 			boundary = /** @type {Node} */ (hydrate_node);
 		}
@@ -412,13 +507,16 @@ export function for_block_keyed(
 			get_key,
 			render_empty,
 			map_item,
+			update_fn,
+			(flags & LOCAL_ITEMS) !== 0,
+			(flags & LOCAL_ITEMS) === 0,
 		),
 		FOR_BLOCK,
 	);
 
 	if (!is_controlled) own_anchor(node, /** @type {Node} */ (anchor));
 
-	if (hydrating && root_controlled) {
+	if (HYDRATION && hydrating && root_controlled) {
 		// The original `node`: for a sentinel, `hydrate_append` performs the
 		// cursor advance that stands in for the eliminated sibling navigation.
 		append(/** @type {ChildNode} */ (node), /** @type {Node} */ (boundary));
@@ -459,46 +557,40 @@ function update_index(block, index) {
  * @param {Block} block
  * @param {any} value
  * @param {((item: any) => any) | undefined} map_item
+ * @param {boolean} is_local
  * @returns {void}
  */
-function update_value(block, value, map_item) {
+function update_value(block, value, map_item, is_local) {
 	var state = block.s;
 	if (state.r !== value) {
 		state.r = value;
-		set(state.v, map_item === undefined ? value : map_item(value));
+		var next = map_item === undefined ? value : map_item(value);
+		if (is_local) {
+			// Held as it is, read by the item block's update function alone
+			// (`LOCAL_ITEMS`) off its state's `$item` slot: the block re-runs here.
+			state.v = next;
+			state.p.$item = next;
+			run_block(block);
+		} else {
+			set(state.v, next);
+		}
 	}
 }
 
 /**
  * @template V
- * @template K
  * @param {ListAnchor} anchor
  * @param {Block} block
  * @param {V[]} b
- * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
- * @param {boolean} is_controlled
- * @param {boolean} is_indexed
- * @param {((item: V) => K) | undefined} get_key identity keys when omitted
- * @param {((anchor: Node) => void) | undefined} render_empty
- * @param {((item: V) => any) | undefined} map_item
  * @returns {void}
  *
  * The first run only creates items, so it lives in this small function and
  * the diff below is compiled only once a list actually changes.
  */
-function reconcile_by_key(
-	anchor,
-	block,
-	b,
-	render_fn,
-	is_controlled,
-	is_indexed,
-	get_key,
-	render_empty,
-	map_item,
-) {
+function reconcile_by_key(anchor, block, b) {
 	var b_length = b.length;
 	var state = /** @type {ListState} */ (block.s);
+	var get_key = state.k;
 
 	if (state.keys === null && b_length > 0) {
 		var b_blocks = Array(b_length);
@@ -512,7 +604,7 @@ function reconcile_by_key(
 			if (get_key !== undefined) {
 				b_keys[j] = get_key(value);
 			}
-			b_blocks[j] = create_item(anchor, value, j, render_fn, is_indexed, true, map_item);
+			b_blocks[j] = create_item(anchor, value, j, b_keys[j], state);
 		}
 
 		state.array = b;
@@ -521,46 +613,24 @@ function reconcile_by_key(
 		return;
 	}
 
-	reconcile_by_key_diff(
-		anchor,
-		block,
-		b,
-		render_fn,
-		is_controlled,
-		is_indexed,
-		get_key,
-		render_empty,
-		map_item,
-	);
+	reconcile_by_key_diff(anchor, block, b);
 }
 
 /**
  * Keyed diff for every run after the first (or a first run with an empty
  * list). See {@link reconcile_by_key}.
- * @template V, K
+ * @template V
  * @param {ListAnchor} anchor
  * @param {Block} block
  * @param {V[]} b
- * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
- * @param {boolean} is_controlled
- * @param {boolean} is_indexed
- * @param {((item: V) => K) | undefined} get_key
- * @param {((anchor: Node) => void) | undefined} render_empty
- * @param {((item: V) => any) | undefined} map_item
  * @returns {void}
  */
-function reconcile_by_key_diff(
-	anchor,
-	block,
-	b,
-	render_fn,
-	is_controlled,
-	is_indexed,
-	get_key,
-	render_empty,
-	map_item,
-) {
+function reconcile_by_key_diff(anchor, block, b) {
 	var state = /** @type {ListState} */ (block.s);
+	var is_controlled = state.c;
+	var is_indexed = state.x;
+	var get_key = state.k;
+	var render_empty = state.e;
 
 	// Variables used in conditional branches - declare with initial values
 	/** @type {number} */
@@ -627,7 +697,7 @@ function reconcile_by_key_diff(
 	// Fast-path for create
 	if (a_length === 0) {
 		for (; j < b_length; j++) {
-			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed, true, map_item);
+			b_blocks[j] = create_item(anchor, b[j], j, b_keys[j], state);
 		}
 		state.array = b;
 		state.blocks = b_blocks;
@@ -669,27 +739,15 @@ function reconcile_by_key_diff(
 	// moves; only what is left afterwards needs the map and LIS below.
 	while (a_start <= a_end && b_start <= b_end) {
 		if (a_keys[a_start] === b_keys[b_start]) {
-			b_val = b[b_start];
 			b_block = b_blocks[b_start] = a_blocks[a_start];
-			if (is_indexed) {
-				update_index(b_block, b_start);
-			}
-			if (get_key !== undefined) {
-				update_value(b_block, b_val, map_item);
-			}
+			patch_item(state, b_block, b[b_start], b_start);
 			a_start++;
 			b_start++;
 			continue;
 		}
 		if (a_keys[a_end] === b_keys[b_end]) {
-			b_val = b[b_end];
 			b_block = b_blocks[b_end] = a_blocks[a_end];
-			if (is_indexed) {
-				update_index(b_block, b_end);
-			}
-			if (get_key !== undefined) {
-				update_value(b_block, b_val, map_item);
-			}
+			patch_item(state, b_block, b[b_end], b_end);
 			a_end--;
 			b_end--;
 			continue;
@@ -704,14 +762,8 @@ function reconcile_by_key_diff(
 		}
 		if (a_keys[a_end] === b_keys[b_start]) {
 			// Last old item is the next new one: move it in front of the old run.
-			b_val = b[b_start];
 			b_block = b_blocks[b_start] = a_blocks[a_end];
-			if (is_indexed) {
-				update_index(b_block, b_start);
-			}
-			if (get_key !== undefined) {
-				update_value(b_block, b_val, map_item);
-			}
+			patch_item(state, b_block, b[b_start], b_start);
 			move(b_block, /** @type {ChildNode} */ (a_blocks[a_start].s.start));
 			a_end--;
 			b_start++;
@@ -719,14 +771,8 @@ function reconcile_by_key_diff(
 		}
 		if (a_keys[a_start] === b_keys[b_end]) {
 			// First old item is the last new one: move it behind the old run.
-			b_val = b[b_end];
 			b_block = b_blocks[b_end] = a_blocks[a_start];
-			if (is_indexed) {
-				update_index(b_block, b_end);
-			}
-			if (get_key !== undefined) {
-				update_value(b_block, b_val, map_item);
-			}
+			patch_item(state, b_block, b[b_end], b_end);
 			move(b_block, block_start(b_blocks, b_end + 1, b_length, anchor));
 			a_start++;
 			b_end--;
@@ -741,15 +787,7 @@ function reconcile_by_key_diff(
 		if (b_start <= b_end) {
 			var target_node = block_start(b_blocks, b_end + 1, b_length, anchor);
 			while (b_start <= b_end) {
-				b_blocks[b_start] = create_item(
-					target_node,
-					b[b_start],
-					b_start,
-					render_fn,
-					is_indexed,
-					true,
-					map_item,
-				);
+				b_blocks[b_start] = create_item(target_node, b[b_start], b_start, b_keys[b_start], state);
 				b_start++;
 			}
 		}
@@ -790,14 +828,8 @@ function reconcile_by_key_diff(
 							} else {
 								pos = j;
 							}
-							b_val = b[j];
 							b_block = b_blocks[j] = a_blocks[i];
-							if (is_indexed) {
-								update_index(b_block, j);
-							}
-							if (get_key !== undefined) {
-								update_value(b_block, b_val, map_item);
-							}
+							patch_item(state, b_block, b[j], j);
 							++patched;
 							break;
 						}
@@ -833,14 +865,8 @@ function reconcile_by_key_diff(
 						} else {
 							pos = j;
 						}
-						b_val = b[j];
 						b_block = b_blocks[j] = a_blocks[i];
-						if (is_indexed) {
-							update_index(b_block, j);
-						}
-						if (get_key !== undefined) {
-							update_value(b_block, b_val, map_item);
-						}
+						patch_item(state, b_block, b[j], j);
 						++patched;
 					} else if (!fast_path_removal) {
 						destroy_block(a_blocks[i]);
@@ -854,17 +880,7 @@ function reconcile_by_key_diff(
 
 	if (fast_path_removal) {
 		reconcile_fast_clear(anchor, block, []);
-		reconcile_by_key(
-			anchor,
-			block,
-			b,
-			render_fn,
-			is_controlled,
-			is_indexed,
-			get_key,
-			render_empty,
-			map_item,
-		);
+		reconcile_by_key(anchor, block, b);
 		return;
 	} else if (moved) {
 		var next_pos = 0;
@@ -872,26 +888,9 @@ function reconcile_by_key_diff(
 		j = seq.length - 1;
 
 		// When most surviving items have to move anyway, re-lay the whole range
-		// in order before a fixed target: inserting before the same node is
-		// noticeably cheaper per item than moving into arbitrary positions.
+		// in order (see `relay`).
 		if ((patched - seq.length) * 3 > b_left * 2) {
-			var relay_target = block_start(b_blocks, b_end + 1, b_length, anchor);
-			for (i = 0; i < b_left; i++) {
-				pos = i + b_start;
-				if (sources[i] === 0) {
-					b_blocks[pos] = create_item(
-						relay_target,
-						b[pos],
-						pos,
-						render_fn,
-						is_indexed,
-						true,
-						map_item,
-					);
-				} else {
-					move(b_blocks[pos], relay_target);
-				}
-			}
+			relay(anchor, a_blocks, a_start, a_end, b, b_blocks, b_start, b_end, sources, b_keys, state);
 			state.array = b;
 			state.blocks = b_blocks;
 			state.keys = b_keys;
@@ -905,7 +904,7 @@ function reconcile_by_key_diff(
 				next_pos = pos + 1;
 
 				var target = block_start(b_blocks, next_pos, b_length, anchor);
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true, map_item);
+				b_blocks[pos] = create_item(target, b_val, pos, b_keys[pos], state);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				next_pos = pos + 1;
@@ -924,7 +923,7 @@ function reconcile_by_key_diff(
 				next_pos = pos + 1;
 
 				var target = block_start(b_blocks, next_pos, b_length, anchor);
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true, map_item);
+				b_blocks[pos] = create_item(target, b_val, pos, b_keys[pos], state);
 			}
 		}
 	}
@@ -934,19 +933,94 @@ function reconcile_by_key_diff(
 	state.keys = b_keys;
 }
 
+/**
+ * Re-lays the unmatched range `b_start..b_end` in its new order, walking it
+ * front to back: `cursor` is the first node of the range that is not in place
+ * yet, so a block already there costs a compare and a sibling read, and every
+ * other block (or a new item) is inserted before `cursor`. Inserting each item
+ * toward the front is what the reverse fast path does too; appending every
+ * item at the end of the range instead cost about twice as much in Blink's
+ * reorder floor (500 rows: 0.55 ms against 0.29), and several times more
+ * right after a layout flush, so this holds even when most items move.
+ * @template V
+ * @param {ListAnchor} anchor
+ * @param {Block[]} a_blocks the old blocks; destroyed ones are skipped
+ * @param {number} a_start
+ * @param {number} a_end
+ * @param {V[]} b
+ * @param {Block[]} b_blocks matched blocks at their new index, holes for new items
+ * @param {number} b_start
+ * @param {number} b_end
+ * @param {Int32Array} sources zero at the index of a new item
+ * @param {any[] | undefined} b_keys the new items' keys (a keyed list)
+ * @param {ListState} state
+ */
+function relay(
+	anchor,
+	a_blocks,
+	a_start,
+	a_end,
+	b,
+	b_blocks,
+	b_start,
+	b_end,
+	sources,
+	b_keys,
+	state,
+) {
+	var b_length = b.length;
+	var end_target = block_start(b_blocks, b_end + 1, b_length, anchor);
+	/** @type {ChildNode | AppendIntoAnchor | null} */
+	var cursor = null;
+
+	// The range starts at the first surviving old block.
+	for (var i = a_start; i <= a_end && cursor === null; i++) {
+		var old_block = a_blocks[i];
+		if ((old_block.f & DESTROYED) === 0) {
+			cursor = /** @type {ChildNode | null} */ (get_first_node(old_block));
+		}
+	}
+	if (cursor === null) {
+		cursor = end_target;
+	}
+
+	for (var pos = b_start; pos <= b_end; pos++) {
+		if (sources[pos - b_start] === 0) {
+			b_blocks[pos] = create_item(
+				cursor,
+				b[pos],
+				pos,
+				b_keys === undefined ? undefined : b_keys[pos],
+				state,
+			);
+			continue;
+		}
+		var block = b_blocks[pos];
+		var first = get_first_node(block);
+		if (first === null) {
+			// Renders nothing: it has no place to take.
+			continue;
+		}
+		if (first !== cursor) {
+			move(block, cursor);
+			continue;
+		}
+		var after = next_sibling(/** @type {Node} */ (get_last_node(block)));
+		cursor = after === null ? end_target : /** @type {ChildNode} */ (after);
+	}
+}
+
 /**
  * @template V
  * @param {ListAnchor} anchor
  * @param {Block} block
  * @param {V[]} b
- * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
- * @param {boolean} is_controlled
- * @param {boolean} is_indexed
- * @param {(anchor: Node) => void} [render_empty]
  * @returns {void}
  */
-function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed, render_empty) {
+function reconcile_by_ref(anchor, block, b) {
 	var state = /** @type {ListState} */ (block.s);
+	var is_controlled = state.c;
+	var render_empty = state.e;
 	var a_length = state.array.length;
 	var b_length = b.length;
 	var j = 0;
@@ -986,14 +1060,14 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 	// Fast-path for create
 	if (a_length === 0) {
 		for (; j < b_length; j++) {
-			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed, false);
+			b_blocks[j] = create_item(anchor, b[j], j, undefined, state);
 		}
 		state.array = b;
 		state.blocks = b_blocks;
 		return;
 	}
 
-	reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_controlled, is_indexed);
+	reconcile_by_ref_diff(anchor, block, b, b_blocks);
 }
 
 /**
@@ -1004,13 +1078,11 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
  * @param {Block} block
  * @param {V[]} b
  * @param {Block[]} b_blocks
- * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
- * @param {boolean} is_controlled
- * @param {boolean} is_indexed
  * @returns {void}
  */
-function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_controlled, is_indexed) {
+function reconcile_by_ref_diff(anchor, block, b, b_blocks) {
 	var state = /** @type {ListState} */ (block.s);
+	var is_controlled = state.c;
 
 	// Variables used in conditional branches - declare with initial values
 	/** @type {number} */
@@ -1046,21 +1118,15 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 	// moves; only what is left afterwards needs the map and LIS below.
 	while (a_start <= a_end && b_start <= b_end) {
 		if (a[a_start] === b[b_start]) {
-			b_val = b[b_start];
 			b_block = b_blocks[b_start] = a_blocks[a_start];
-			if (is_indexed) {
-				update_index(b_block, b_start);
-			}
+			patch_item(state, b_block, b[b_start], b_start);
 			a_start++;
 			b_start++;
 			continue;
 		}
 		if (a[a_end] === b[b_end]) {
-			b_val = b[b_end];
 			b_block = b_blocks[b_end] = a_blocks[a_end];
-			if (is_indexed) {
-				update_index(b_block, b_end);
-			}
+			patch_item(state, b_block, b[b_end], b_end);
 			a_end--;
 			b_end--;
 			continue;
@@ -1070,11 +1136,8 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 		}
 		if (a[a_end] === b[b_start]) {
 			// Last old item is the next new one: move it in front of the old run.
-			b_val = b[b_start];
 			b_block = b_blocks[b_start] = a_blocks[a_end];
-			if (is_indexed) {
-				update_index(b_block, b_start);
-			}
+			patch_item(state, b_block, b[b_start], b_start);
 			move(b_block, /** @type {ChildNode} */ (a_blocks[a_start].s.start));
 			a_end--;
 			b_start++;
@@ -1082,11 +1145,8 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 		}
 		if (a[a_start] === b[b_end]) {
 			// First old item is the last new one: move it behind the old run.
-			b_val = b[b_end];
 			b_block = b_blocks[b_end] = a_blocks[a_start];
-			if (is_indexed) {
-				update_index(b_block, b_end);
-			}
+			patch_item(state, b_block, b[b_end], b_end);
 			move(b_block, block_start(b_blocks, b_end + 1, b_length, anchor));
 			a_start++;
 			b_end--;
@@ -1101,14 +1161,7 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 		if (b_start <= b_end) {
 			var target_node = block_start(b_blocks, b_end + 1, b_length, anchor);
 			while (b_start <= b_end) {
-				b_blocks[b_start] = create_item(
-					target_node,
-					b[b_start],
-					b_start,
-					render_fn,
-					is_indexed,
-					false,
-				);
+				b_blocks[b_start] = create_item(target_node, b[b_start], b_start, undefined, state);
 				b_start++;
 			}
 		}
@@ -1145,11 +1198,8 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 							} else {
 								pos = j;
 							}
-							b_val = b[j];
 							b_block = b_blocks[j] = a_blocks[i];
-							if (is_indexed) {
-								update_index(b_block, j);
-							}
+							patch_item(state, b_block, b[j], j);
 							++patched;
 							break;
 						}
@@ -1185,11 +1235,8 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 						} else {
 							pos = j;
 						}
-						b_val = b[j];
 						b_block = b_blocks[j] = a_blocks[i];
-						if (is_indexed) {
-							update_index(b_block, j);
-						}
+						patch_item(state, b_block, b[j], j);
 						++patched;
 					} else if (!fast_path_removal) {
 						destroy_block(a_blocks[i]);
@@ -1203,7 +1250,7 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 
 	if (fast_path_removal) {
 		reconcile_fast_clear(anchor, block, []);
-		reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed);
+		reconcile_by_ref(anchor, block, b);
 		return;
 	} else if (moved) {
 		var next_pos = 0;
@@ -1211,18 +1258,21 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 		j = seq.length - 1;
 
 		// When most surviving items have to move anyway, re-lay the whole range
-		// in order before a fixed target: inserting before the same node is
-		// noticeably cheaper per item than moving into arbitrary positions.
+		// in order (see `relay`).
 		if ((patched - seq.length) * 3 > b_left * 2) {
-			var relay_target = block_start(b_blocks, b_end + 1, b_length, anchor);
-			for (i = 0; i < b_left; i++) {
-				pos = i + b_start;
-				if (sources[i] === 0) {
-					b_blocks[pos] = create_item(relay_target, b[pos], pos, render_fn, is_indexed, false);
-				} else {
-					move(b_blocks[pos], relay_target);
-				}
-			}
+			relay(
+				anchor,
+				a_blocks,
+				a_start,
+				a_end,
+				b,
+				b_blocks,
+				b_start,
+				b_end,
+				sources,
+				undefined,
+				state,
+			);
 			state.array = b;
 			state.blocks = b_blocks;
 			return;
@@ -1235,7 +1285,7 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 				next_pos = pos + 1;
 
 				var target = block_start(b_blocks, next_pos, b_length, anchor);
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
+				b_blocks[pos] = create_item(target, b_val, pos, undefined, state);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				next_pos = pos + 1;
@@ -1254,7 +1304,7 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 				next_pos = pos + 1;
 
 				var target = block_start(b_blocks, next_pos, b_length, anchor);
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
+				b_blocks[pos] = create_item(target, b_val, pos, undefined, state);
 			}
 		}
 	}