ripple 0.3.128 → 0.4.0

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

@@ -1,47 +1,54 @@
-/** @import { Block, Tracked } from '#client' */
+/** @import { AppendIntoAnchor, Block, Tracked } from '#client' */
 
 import { IS_CONTROLLED, IS_INDEXED, ROOT_CONTROLLED } from '../../../constants.js';
 import {
+	block as create_block,
 	branch,
 	destroy_block,
 	destroy_block_children,
 	get_first_node,
 	get_last_node,
+	own_anchor,
 	render,
 } from './blocks.js';
-import { FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
-import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
-import { create_text, get_first_child, get_last_child, next_sibling } from './operations.js';
+import { BRANCH_BLOCK, FOR_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, tracked, untrack } from './runtime.js';
+import { active_block, set, set_tracking, tracked } from './runtime.js';
 import { array_from, is_array } from '@tsrx/core/runtime/language-helpers';
 
 /**
  * @template V
- * @param {Node} anchor
+ * @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`)
  * @returns {Block}
  */
-function create_item(anchor, value, index, render_fn, is_indexed, is_keyed) {
+function create_item(anchor, value, index, render_fn, is_indexed, is_keyed, map_item) {
 	var block = /** @type {Block} */ (active_block);
 	var tracked_index = is_indexed ? tracked(index, block) : undefined;
-	var tracked_value = is_keyed ? tracked(value, block) : value;
+	var tracked_value = is_keyed
+		? tracked(map_item === undefined ? value : map_item(value), block)
+		: value;
 	var 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,
 	};
 
 	// 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 = branch(run_item, 0, state);
+	var b = create_block(BRANCH_BLOCK, run_item, state);
 
 	// The item's tracked value and index are owned by the item block itself.
 	if (is_keyed) {
@@ -53,7 +60,22 @@ function create_item(anchor, value, index, render_fn, is_indexed, is_keyed) {
 	return b;
 }
 
-/** @type {Node | null} */
+/**
+ * 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
+ * items append to the parent with no anchor node in the DOM.
+ * @typedef {Element | Text | AppendIntoAnchor} ListAnchor
+ */
+
+/**
+ * @param {Element} parent
+ * @returns {AppendIntoAnchor}
+ */
+function controlled_anchor(parent) {
+	return { parent, into: true };
+}
+
+/** @type {Node | AppendIntoAnchor | null} */
 var item_anchor = null;
 /** @type {((anchor: Node, value: any, index?: any) => Block) | null} */
 var item_render_fn = null;
@@ -70,19 +92,19 @@ function run_item(state) {
 }
 
 /**
- * @param {Node} anchor
+ * @param {ListAnchor} anchor
  * @param {(anchor: Node) => void} render_empty
  * @returns {Block}
  */
 function create_empty(anchor, render_empty) {
 	return branch(() => {
-		render_empty(anchor);
+		render_empty(/** @type {Node} */ (anchor));
 	});
 }
 
 /**
  * @param {Block} block
- * @param {ChildNode} anchor
+ * @param {ChildNode | AppendIntoAnchor} anchor
  * @returns {void}
  */
 function move(block, anchor) {
@@ -103,21 +125,46 @@ function move(block, anchor) {
 		end = s.end;
 	}
 
+	// A controlled list appends into its parent (no anchor node); anything
+	// else inserts before its anchor.
+	/** @type {Node | null} */
+	var parent = null;
+	/** @type {ChildNode | null} */
+	var before = null;
+	if (/** @type {AppendIntoAnchor} */ (anchor).into === true) {
+		parent = /** @type {AppendIntoAnchor} */ (anchor).parent;
+	} else {
+		before = /** @type {ChildNode} */ (anchor);
+	}
+
 	if (node === end) {
-		anchor.before(node);
+		insert_node(parent, before, node);
 		return;
 	}
 	while (node !== null) {
 		var next_node = /** @type {Node} */ (next_sibling(node));
-		anchor.before(node);
+		insert_node(parent, before, node);
 		node = next_node;
 		if (node === end) {
-			anchor.before(/** @type {Node} */ (end));
+			insert_node(parent, before, /** @type {Node} */ (end));
 			break;
 		}
 	}
 }
 
+/**
+ * @param {Node | null} parent
+ * @param {ChildNode | null} before
+ * @param {Node} node
+ */
+function insert_node(parent, before, node) {
+	if (parent !== null) {
+		parent.appendChild(node);
+	} else {
+		/** @type {ChildNode} */ (before).before(node);
+	}
+}
+
 /**
  * Resolve the insertion anchor for a block at `index`: the first real DOM node
  * at or after `index`, or `fallback` when every remaining block renders nothing.
@@ -127,8 +174,8 @@ function move(block, anchor) {
  * @param {Block[]} blocks
  * @param {number} index
  * @param {number} length
- * @param {Element | Text} fallback
- * @returns {ChildNode}
+ * @param {ListAnchor} fallback
+ * @returns {ChildNode | AppendIntoAnchor}
  */
 function block_start(blocks, index, length, fallback) {
 	if (index >= length) {
@@ -166,9 +213,91 @@ function collection_to_array(collection) {
 	return array;
 }
 
+/**
+ * The state of a list block. The reconciled list (`array`, `blocks`, `keys`,
+ * `empty`) and the inputs the list is re-run with both live here, so a list
+ * allocates no closures.
+ */
+class ListState {
+	/** @type {any[]} */
+	array = [];
+	/** @type {Block[]} */
+	blocks = [];
+	/** @type {any[] | null} null until the first reconcile */
+	keys = null;
+	/** @type {Block | null} */
+	empty = null;
+
+	/**
+	 * @param {ListAnchor} anchor
+	 * @param {() => any} get_collection
+	 * @param {(anchor: Node, value: any, index?: any) => Block} render_fn
+	 * @param {boolean} is_controlled
+	 * @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]
+	 */
+	constructor(
+		anchor,
+		get_collection,
+		render_fn,
+		is_controlled,
+		is_indexed,
+		get_key,
+		render_empty,
+		map_item,
+	) {
+		this.a = anchor;
+		this.g = get_collection;
+		this.r = render_fn;
+		this.c = is_controlled;
+		this.x = is_indexed;
+		this.k = get_key;
+		this.e = render_empty;
+		this.m = map_item;
+	}
+}
+
+/**
+ * @param {ListState} state
+ */
+function run_for(state) {
+	var block = /** @type {Block} */ (active_block);
+	var array = collection_to_array(state.g());
+
+	// 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);
+	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) {
+		state.a = /** @type {Element | Text} */ (hydrate_node);
+	}
+}
+
+/**
+ * @param {ListState} state
+ */
+function run_for_keyed(state) {
+	var block = /** @type {Block} */ (active_block);
+	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);
+	set_tracking(true);
+
+	if (hydrating) {
+		state.a = /** @type {Element | Text} */ (hydrate_node);
+	}
+}
+
 /**
  * @template V
- * @param {Element} node
+ * @param {Element | AppendIntoAnchor} node
  * @param {() => V[] | Iterable<V>} get_collection
  * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {number} flags
@@ -179,16 +308,18 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
 	var root_controlled = (flags & ROOT_CONTROLLED) !== 0;
-	var anchor = /** @type {Element | Text} */ (node);
+	// A root-controlled list receives the component's `__anchor`, which may be
+	// an append-into sentinel; moves and end insertions need a real node.
+	var anchor = /** @type {ListAnchor} */ (root_controlled ? resolve_anchor(node) : node);
 	/** @type {Node | undefined} */
 	var boundary;
 
 	if (is_controlled) {
 		if (hydrating) {
-			var parent_node = /** @type {Element} */ (node);
-			/** @type {Element | Text} */ (set_hydrate_node(get_first_child(parent_node)));
+			// The cursor sits on the list's element; the items are its children.
+			hydrate_first_child();
 		} else {
-			anchor = node.appendChild(create_text());
+			anchor = controlled_anchor(/** @type {Element} */ (node));
 		}
 	}
 
@@ -200,24 +331,24 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 	}
 
 	render(
-		() => {
-			var block = /** @type {Block} */ (active_block);
-			var collection = get_collection();
-			var array = collection_to_array(collection);
-
-			untrack(() => {
-				reconcile_by_ref(anchor, block, array, render_fn, is_controlled, is_indexed, render_empty);
-			});
-
-			if (hydrating) {
-				anchor = /** @type {Element | Text} */ (hydrate_node);
-			}
-		},
-		null,
+		run_for,
+		new ListState(
+			anchor,
+			get_collection,
+			render_fn,
+			is_controlled,
+			is_indexed,
+			undefined,
+			render_empty,
+		),
 		FOR_BLOCK,
 	);
 
+	if (!is_controlled) own_anchor(node, /** @type {Node} */ (anchor));
+
 	if (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));
 	}
 }
@@ -225,19 +356,30 @@ export function for_block(node, get_collection, render_fn, flags, render_empty)
 /**
  * @template V
  * @template K
- * @param {Element} node
+ * @param {Element | AppendIntoAnchor} node
  * @param {() => V[] | Iterable<V>} get_collection
  * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {number} flags
- * @param {(item: V) => K} [get_key]
+ * @param {(item: V) => K} [get_key] omitted for identity keys (`key item`)
  * @param {(anchor: Node) => void} [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
  * @returns {void}
  */
-export function for_block_keyed(node, get_collection, render_fn, flags, get_key, render_empty) {
+export function for_block_keyed(
+	node,
+	get_collection,
+	render_fn,
+	flags,
+	get_key,
+	render_empty,
+	map_item,
+) {
 	var is_controlled = (flags & IS_CONTROLLED) !== 0;
 	var is_indexed = (flags & IS_INDEXED) !== 0;
 	var root_controlled = (flags & ROOT_CONTROLLED) !== 0;
-	var anchor = /** @type {Element | Text} */ (node);
+	var anchor = /** @type {ListAnchor} */ (root_controlled ? resolve_anchor(node) : node);
 	/** @type {Node | undefined} */
 	var boundary;
 
@@ -245,10 +387,10 @@ export function for_block_keyed(node, get_collection, render_fn, flags, get_key,
 		var parent_node = /** @type {Element} */ (node);
 
 		if (hydrating) {
-			/** @type {Element | Text} */ (set_hydrate_node(get_first_child(parent_node)));
+			hydrate_first_child();
 			anchor = /** @type {Element | Text} */ (get_last_child(parent_node));
 		} else {
-			anchor = node.appendChild(create_text());
+			anchor = controlled_anchor(parent_node);
 		}
 	}
 
@@ -260,46 +402,45 @@ export function for_block_keyed(node, get_collection, render_fn, flags, get_key,
 	}
 
 	render(
-		() => {
-			var block = /** @type {Block} */ (active_block);
-			var collection = get_collection();
-			var array = collection_to_array(collection);
-
-			untrack(() => {
-				reconcile_by_key(
-					anchor,
-					block,
-					array,
-					render_fn,
-					is_controlled,
-					is_indexed,
-					/** @type {(item: V) => K} */ (get_key),
-					render_empty,
-				);
-			});
-		},
-		null,
+		run_for_keyed,
+		new ListState(
+			anchor,
+			get_collection,
+			render_fn,
+			is_controlled,
+			is_indexed,
+			get_key,
+			render_empty,
+			map_item,
+		),
 		FOR_BLOCK,
 	);
 
+	if (!is_controlled) own_anchor(node, /** @type {Node} */ (anchor));
+
 	if (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));
 	}
 }
 
 /**
  * @template V
- * @param {Element | Text} anchor
+ * @param {ListAnchor} anchor
  * @param {Block} block
  * @param {V[]} array
  * @returns {void}
  */
 function reconcile_fast_clear(anchor, block, array) {
 	var state = block.s;
-	var parent_node = /** @type {Element} */ (anchor.parentNode);
+	var into = /** @type {AppendIntoAnchor} */ (anchor).into === true;
+	var parent_node = /** @type {Element} */ (
+		into ? /** @type {AppendIntoAnchor} */ (anchor).parent : /** @type {Node} */ (anchor).parentNode
+	);
 	parent_node.textContent = '';
 	destroy_block_children(block);
-	parent_node.append(anchor);
+	if (!into) parent_node.append(/** @type {Node} */ (anchor));
 	state.array = array;
 	state.blocks = [];
 	state.empty = null;
@@ -317,27 +458,33 @@ function update_index(block, index) {
 /**
  * @param {Block} block
  * @param {any} value
+ * @param {((item: any) => any) | undefined} map_item
  * @returns {void}
  */
-function update_value(block, value) {
-	var tracked_value = block.s.v;
-	if (tracked_value.__v !== value) {
-		set(tracked_value, value);
+function update_value(block, value, map_item) {
+	var state = block.s;
+	if (state.r !== value) {
+		state.r = value;
+		set(state.v, map_item === undefined ? value : map_item(value));
 	}
 }
 
 /**
  * @template V
  * @template K
- * @param {Element | Text} anchor
+ * @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} get_key
- * @param {(anchor: Node) => void} [render_empty]
+ * @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,
@@ -348,8 +495,72 @@ function reconcile_by_key(
 	is_indexed,
 	get_key,
 	render_empty,
+	map_item,
 ) {
-	var state = block.s;
+	var b_length = b.length;
+	var state = /** @type {ListState} */ (block.s);
+
+	if (state.keys === null && b_length > 0) {
+		var b_blocks = Array(b_length);
+		// Identity keys (`key item`) are the items themselves; the list keeps a
+		// copy, as the array it rendered may later be mutated in place.
+		var b_keys = get_key === undefined ? b.slice() : Array(b_length);
+
+		// One loop, no `map` callback machinery: most lists are short.
+		for (var j = 0; j < b_length; j++) {
+			var value = b[j];
+			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);
+		}
+
+		state.array = b;
+		state.blocks = b_blocks;
+		state.keys = b_keys;
+		return;
+	}
+
+	reconcile_by_key_diff(
+		anchor,
+		block,
+		b,
+		render_fn,
+		is_controlled,
+		is_indexed,
+		get_key,
+		render_empty,
+		map_item,
+	);
+}
+
+/**
+ * Keyed diff for every run after the first (or a first run with an empty
+ * list). See {@link reconcile_by_key}.
+ * @template V, 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
+ * @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,
+) {
+	var state = /** @type {ListState} */ (block.s);
 
 	// Variables used in conditional branches - declare with initial values
 	/** @type {number} */
@@ -367,17 +578,8 @@ function reconcile_by_key(
 	/** @type {number} */
 	var i = 0;
 
-	if (state === null) {
-		state = block.s = {
-			array: [],
-			blocks: [],
-			keys: null,
-			empty: null,
-		};
-	}
-
-	var a = state.array;
-	var a_length = a.length;
+	var a_blocks = state.blocks;
+	var a_length = a_blocks.length;
 	var b_length = b.length;
 	var j = 0;
 
@@ -412,13 +614,20 @@ function reconcile_by_key(
 		}
 		return;
 	}
-	var b_blocks = Array(b_length);
-	var b_keys = b.map(get_key);
+	// Identity keys are the items themselves (copied, as the rendered array
+	// may later be mutated in place), so a matched key is also the item's
+	// current tracked value: only computed keys need `update_value`.
+	var b_keys = get_key === undefined ? b.slice() : b.map(get_key);
+	// A same-length run rewrites the block array in place: matched ends are
+	// already at their index, and the middle reads the old blocks from a copy
+	// taken before its first write.
+	var in_place = a_length === b_length;
+	var b_blocks = in_place ? a_blocks : Array(b_length);
 
 	// 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);
+			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed, true, map_item);
 		}
 		state.array = b;
 		state.blocks = b_blocks;
@@ -426,8 +635,8 @@ function reconcile_by_key(
 		return;
 	}
 
-	var a_blocks = state.blocks;
-	var a_keys = state.keys;
+	// Set by every run that leaves items behind.
+	var a_keys = /** @type {any[]} */ (state.keys);
 	var a_start = 0;
 	var b_start = 0;
 	var a_end = a_length - 1;
@@ -435,6 +644,25 @@ function reconcile_by_key(
 	var b_val;
 	var b_block;
 
+	if (get_key === undefined && !is_indexed) {
+		// Identity keys without an index: a matched item needs no update, so
+		// the unchanged prefix and suffix are skipped with plain compares.
+		while (a_start <= a_end && b_start <= b_end && a_keys[a_start] === b_keys[b_start]) {
+			if (!in_place) {
+				b_blocks[b_start] = a_blocks[a_start];
+			}
+			a_start++;
+			b_start++;
+		}
+		while (a_start <= a_end && b_start <= b_end && a_keys[a_end] === b_keys[b_end]) {
+			if (!in_place) {
+				b_blocks[b_end] = a_blocks[a_end];
+			}
+			a_end--;
+			b_end--;
+		}
+	}
+
 	// Match from both ends first, including the two end-crossing cases: an old
 	// item that moved to the far end of the new list, and a run whose ends were
 	// exchanged (a reversal, or a swap of two items). Those complete with plain
@@ -446,7 +674,9 @@ function reconcile_by_key(
 			if (is_indexed) {
 				update_index(b_block, b_start);
 			}
-			update_value(b_block, b_val);
+			if (get_key !== undefined) {
+				update_value(b_block, b_val, map_item);
+			}
 			a_start++;
 			b_start++;
 			continue;
@@ -457,7 +687,9 @@ function reconcile_by_key(
 			if (is_indexed) {
 				update_index(b_block, b_end);
 			}
-			update_value(b_block, b_val);
+			if (get_key !== undefined) {
+				update_value(b_block, b_val, map_item);
+			}
 			a_end--;
 			b_end--;
 			continue;
@@ -465,6 +697,11 @@ function reconcile_by_key(
 		if (a_start === a_end || a_blocks[a_start].s.start === null) {
 			break;
 		}
+		if (in_place) {
+			// An end-crossing move overwrites an old block before it is read.
+			a_blocks = a_blocks.slice();
+			in_place = false;
+		}
 		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];
@@ -472,7 +709,9 @@ function reconcile_by_key(
 			if (is_indexed) {
 				update_index(b_block, b_start);
 			}
-			update_value(b_block, b_val);
+			if (get_key !== undefined) {
+				update_value(b_block, b_val, map_item);
+			}
 			move(b_block, /** @type {ChildNode} */ (a_blocks[a_start].s.start));
 			a_end--;
 			b_start++;
@@ -485,7 +724,9 @@ function reconcile_by_key(
 			if (is_indexed) {
 				update_index(b_block, b_end);
 			}
-			update_value(b_block, b_val);
+			if (get_key !== undefined) {
+				update_value(b_block, b_val, map_item);
+			}
 			move(b_block, block_start(b_blocks, b_end + 1, b_length, anchor));
 			a_start++;
 			b_end--;
@@ -507,6 +748,7 @@ function reconcile_by_key(
 					render_fn,
 					is_indexed,
 					true,
+					map_item,
 				);
 				b_start++;
 			}
@@ -516,6 +758,10 @@ function reconcile_by_key(
 			destroy_block(a_blocks[a_start++]);
 		}
 	} else {
+		if (in_place) {
+			a_blocks = a_blocks.slice();
+			in_place = false;
+		}
 		a_left = a_end - a_start + 1;
 		b_left = b_end - b_start + 1;
 		sources = new Int32Array(b_left + 1);
@@ -549,7 +795,9 @@ function reconcile_by_key(
 							if (is_indexed) {
 								update_index(b_block, j);
 							}
-							update_value(b_block, b_val);
+							if (get_key !== undefined) {
+								update_value(b_block, b_val, map_item);
+							}
 							++patched;
 							break;
 						}
@@ -590,7 +838,9 @@ function reconcile_by_key(
 						if (is_indexed) {
 							update_index(b_block, j);
 						}
-						update_value(b_block, b_val);
+						if (get_key !== undefined) {
+							update_value(b_block, b_val, map_item);
+						}
 						++patched;
 					} else if (!fast_path_removal) {
 						destroy_block(a_blocks[i]);
@@ -604,7 +854,17 @@ function reconcile_by_key(
 
 	if (fast_path_removal) {
 		reconcile_fast_clear(anchor, block, []);
-		reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed, get_key);
+		reconcile_by_key(
+			anchor,
+			block,
+			b,
+			render_fn,
+			is_controlled,
+			is_indexed,
+			get_key,
+			render_empty,
+			map_item,
+		);
 		return;
 	} else if (moved) {
 		var next_pos = 0;
@@ -619,7 +879,15 @@ function reconcile_by_key(
 			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);
+					b_blocks[pos] = create_item(
+						relay_target,
+						b[pos],
+						pos,
+						render_fn,
+						is_indexed,
+						true,
+						map_item,
+					);
 				} else {
 					move(b_blocks[pos], relay_target);
 				}
@@ -637,7 +905,7 @@ function reconcile_by_key(
 				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);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true, map_item);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				next_pos = pos + 1;
@@ -656,7 +924,7 @@ function reconcile_by_key(
 				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);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true, map_item);
 			}
 		}
 	}
@@ -668,7 +936,7 @@ function reconcile_by_key(
 
 /**
  * @template V
- * @param {Element | Text} anchor
+ * @param {ListAnchor} anchor
  * @param {Block} block
  * @param {V[]} b
  * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
@@ -678,35 +946,8 @@ function reconcile_by_key(
  * @returns {void}
  */
 function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed, render_empty) {
-	var state = block.s;
-
-	// Variables used in conditional branches - declare with initial values
-	/** @type {number} */
-	var a_left = 0;
-	/** @type {number} */
-	var b_left = 0;
-	/** @type {Int32Array} */
-	var sources = new Int32Array(0);
-	/** @type {boolean} */
-	var moved = false;
-	/** @type {number} */
-	var pos = 0;
-	/** @type {number} */
-	var patched = 0;
-	/** @type {number} */
-	var i = 0;
-
-	if (state === null) {
-		state = block.s = {
-			array: [],
-			blocks: [],
-			keys: null,
-			empty: null,
-		};
-	}
-
-	var a = state.array;
-	var a_length = a.length;
+	var state = /** @type {ListState} */ (block.s);
+	var a_length = state.array.length;
 	var b_length = b.length;
 	var j = 0;
 
@@ -752,6 +993,45 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 		return;
 	}
 
+	reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_controlled, is_indexed);
+}
+
+/**
+ * Diffs a non-empty list against its previous run. Separate from the empty and
+ * create paths so a first render (a mount, a hydration) never compiles it.
+ * @template V
+ * @param {ListAnchor} anchor
+ * @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) {
+	var state = /** @type {ListState} */ (block.s);
+
+	// Variables used in conditional branches - declare with initial values
+	/** @type {number} */
+	var a_left = 0;
+	/** @type {number} */
+	var b_left = 0;
+	/** @type {Int32Array} */
+	var sources = new Int32Array(0);
+	/** @type {boolean} */
+	var moved = false;
+	/** @type {number} */
+	var pos = 0;
+	/** @type {number} */
+	var patched = 0;
+	/** @type {number} */
+	var i = 0;
+
+	var a = state.array;
+	var a_length = a.length;
+	var b_length = b.length;
+	var j = 0;
 	var a_blocks = state.blocks;
 	var a_start = 0;
 	var b_start = 0;