ripple 0.3.127 → 0.4.0

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

@@ -1,84 +1,110 @@
-/** @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) {
-	var b = branch(() => {
-		var tracked_index;
-		/** @type {V | Tracked} */
-		var tracked_value = value;
-
-		if (is_indexed || is_keyed) {
-			var block = /** @type {Block} */ (active_block);
-
-			if (block.s === null) {
-				if (is_indexed) {
-					tracked_index = tracked(index, block);
-				}
-				if (is_keyed) {
-					tracked_value = tracked(value, block);
-				}
-
-				block.s = {
-					start: null,
-					end: null,
-					i: tracked_index,
-					v: tracked_value,
-				};
-			} else {
-				if (is_indexed) {
-					tracked_index = block.s.i;
-				}
-				if (is_keyed) {
-					tracked_index = block.s.v;
-				}
-			}
-			render_fn(anchor, tracked_value, tracked_index);
-		} else {
-			render_fn(anchor, tracked_value);
-		}
-	});
+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(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 = create_block(BRANCH_BLOCK, run_item, state);
+
+	// The item's tracked value and index are owned by the item block itself.
+	if (is_keyed) {
+		/** @type {Tracked} */ (tracked_value).b = b;
+	}
+	if (is_indexed) {
+		/** @type {Tracked} */ (tracked_index).b = b;
+	}
 	return b;
 }
 
 /**
- * @param {Node} anchor
+ * 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;
+
+/**
+ * @param {{ i: Tracked | undefined, v: any }} state
+ */
+function run_item(state) {
+	var render_fn = /** @type {(anchor: Node, value: any, index?: 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);
+}
+
+/**
+ * @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) {
@@ -99,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.
@@ -123,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) {
@@ -162,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
@@ -175,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));
 		}
 	}
 
@@ -196,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));
 	}
 }
@@ -221,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;
 
@@ -241,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);
 		}
 	}
 
@@ -256,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;
@@ -313,24 +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) {
-	set(block.s.v, 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,
@@ -341,15 +495,75 @@ 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} */
-	var a_start = 0;
-	/** @type {number} */
-	var b_start = 0;
-	/** @type {number} */
 	var a_left = 0;
 	/** @type {number} */
 	var b_left = 0;
@@ -364,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;
 
@@ -409,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;
@@ -423,78 +635,135 @@ function reconcile_by_key(
 		return;
 	}
 
-	var a_blocks = state.blocks;
-	var a_keys = state.keys;
-	var a_val = a[j];
-	var b_val = b[j];
-	var a_key = a_keys[j];
-	var b_key = b_keys[j];
+	// 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;
 	var b_end = b_length - 1;
+	var b_val;
 	var b_block;
 
-	outer: {
-		while (a_key === b_key) {
-			a[j] = b_val;
-			b_block = b_blocks[j] = a_blocks[j];
-			if (is_indexed) {
-				update_index(b_block, j);
+	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];
 			}
-			update_value(b_block, b_val);
-			++j;
-			if (j > a_end || j > b_end) {
-				break outer;
+			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_val = a[j];
-			b_val = b[j];
-			a_key = a_keys[j];
-			b_key = b_keys[j];
+			a_end--;
+			b_end--;
 		}
+	}
 
-		a_val = a[a_end];
-		b_val = b[b_end];
-		a_key = a_keys[a_end];
-		b_key = b_keys[b_end];
-
-		while (a_key === b_key) {
-			a[a_end] = b_val;
+	// 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
+	// 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);
+			}
+			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);
 			}
-			update_value(b_block, b_val);
+			if (get_key !== undefined) {
+				update_value(b_block, b_val, map_item);
+			}
 			a_end--;
 			b_end--;
-			if (j > a_end || j > b_end) {
-				break outer;
+			continue;
+		}
+		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];
+			b_block = b_blocks[b_start] = a_blocks[a_end];
+			if (is_indexed) {
+				update_index(b_block, b_start);
 			}
-			a_val = a[a_end];
+			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++;
+			continue;
+		}
+		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];
-			a_key = a_keys[a_end];
-			b_key = b_keys[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);
+			}
+			move(b_block, block_start(b_blocks, b_end + 1, b_length, anchor));
+			a_start++;
+			b_end--;
+			continue;
 		}
+		break;
 	}
 
 	var fast_path_removal = false;
 
-	if (j > a_end) {
-		if (j <= b_end) {
-			var insert_target = block_start(a_blocks, a_end + 1, a_length, anchor);
-			while (j <= b_end) {
-				b_val = b[j];
-				b_blocks[j] = create_item(insert_target, b_val, j, render_fn, is_indexed, true);
-				j++;
+	if (a_start > a_end) {
+		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_start++;
 			}
 		}
-	} else if (j > b_end) {
-		while (j <= a_end) {
-			destroy_block(a_blocks[j++]);
+	} else if (b_start > b_end) {
+		while (a_start <= a_end) {
+			destroy_block(a_blocks[a_start++]);
 		}
 	} else {
-		a_start = j;
-		b_start = j;
-		a_left = a_end - j + 1;
-		b_left = b_end - j + 1;
+		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);
 		moved = false;
 		pos = 0;
@@ -506,13 +775,9 @@ function reconcile_by_key(
 		// When sizes are small, just loop them through
 		if (b_length < 4 || (a_left | b_left) < 32) {
 			for (i = a_start; i <= a_end; ++i) {
-				a_val = a[i];
-				a_key = a_keys[i];
 				if (patched < b_left) {
 					for (j = b_start; j <= b_end; j++) {
-						b_val = b[j];
-						b_key = b_keys[j];
-						if (a_key === b_key) {
+						if (a_keys[i] === b_keys[j]) {
 							sources[j - b_start] = i + 1;
 							if (fast_path_removal) {
 								fast_path_removal = false;
@@ -525,11 +790,14 @@ function reconcile_by_key(
 							} else {
 								pos = j;
 							}
+							b_val = b[j];
 							b_block = b_blocks[j] = a_blocks[i];
 							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;
 						}
@@ -549,11 +817,8 @@ function reconcile_by_key(
 			}
 
 			for (i = a_start; i <= a_end; ++i) {
-				a_val = a[i];
-				a_key = a_keys[i];
-
 				if (patched < b_left) {
-					j = map.get(a_key);
+					j = map.get(a_keys[i]);
 
 					if (j !== undefined) {
 						if (fast_path_removal) {
@@ -568,12 +833,14 @@ function reconcile_by_key(
 						} else {
 							pos = j;
 						}
-						block = b_blocks[j] = a_blocks[i];
 						b_val = b[j];
+						b_block = b_blocks[j] = a_blocks[i];
 						if (is_indexed) {
-							update_index(block, j);
+							update_index(b_block, j);
+						}
+						if (get_key !== undefined) {
+							update_value(b_block, b_val, map_item);
 						}
-						update_value(block, b_val);
 						++patched;
 					} else if (!fast_path_removal) {
 						destroy_block(a_blocks[i]);
@@ -587,13 +854,50 @@ 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;
 		var seq = lis_algorithm(sources);
 		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.
+		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);
+				}
+			}
+			state.array = b;
+			state.blocks = b_blocks;
+			state.keys = b_keys;
+			return;
+		}
+
 		for (i = b_left - 1; i >= 0; i--) {
 			if (sources[i] === 0) {
 				pos = i + b_start;
@@ -601,10 +905,9 @@ 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;
-				b_val = b[pos];
 				next_pos = pos + 1;
 
 				var target = block_start(b_blocks, next_pos, b_length, anchor);
@@ -621,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);
 			}
 		}
 	}
@@ -633,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
@@ -643,39 +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_start = 0;
-	/** @type {number} */
-	var b_start = 0;
-	/** @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;
 
@@ -721,67 +993,132 @@ 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_val = a[j];
-	var b_val = b[j];
+	var a_start = 0;
+	var b_start = 0;
 	var a_end = a_length - 1;
 	var b_end = b_length - 1;
+	var b_val;
 	var b_block;
 
-	outer: {
-		while (a_val === b_val) {
-			a[j] = b_val;
-			b_block = b_blocks[j] = a_blocks[j];
+	// 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
+	// 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, j);
+				update_index(b_block, b_start);
 			}
-			++j;
-			if (j > a_end || j > b_end) {
-				break outer;
-			}
-			a_val = a[j];
-			b_val = b[j];
+			a_start++;
+			b_start++;
+			continue;
 		}
-
-		a_val = a[a_end];
-		b_val = b[b_end];
-
-		while (a_val === b_val) {
-			a[a_end] = b_val;
+		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);
 			}
 			a_end--;
 			b_end--;
-			if (j > a_end || j > b_end) {
-				break outer;
+			continue;
+		}
+		if (a_start === a_end || a_blocks[a_start].s.start === null) {
+			break;
+		}
+		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);
 			}
-			a_val = a[a_end];
+			move(b_block, /** @type {ChildNode} */ (a_blocks[a_start].s.start));
+			a_end--;
+			b_start++;
+			continue;
+		}
+		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);
+			}
+			move(b_block, block_start(b_blocks, b_end + 1, b_length, anchor));
+			a_start++;
+			b_end--;
+			continue;
 		}
+		break;
 	}
 
 	var fast_path_removal = false;
 
-	if (j > a_end) {
-		if (j <= b_end) {
-			var insert_target = block_start(a_blocks, a_end + 1, a_length, anchor);
-			while (j <= b_end) {
-				b_val = b[j];
-				b_blocks[j] = create_item(insert_target, b_val, j, render_fn, is_indexed, false);
-				j++;
+	if (a_start > a_end) {
+		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_start++;
 			}
 		}
-	} else if (j > b_end) {
-		while (j <= a_end) {
-			destroy_block(a_blocks[j++]);
+	} else if (b_start > b_end) {
+		while (a_start <= a_end) {
+			destroy_block(a_blocks[a_start++]);
 		}
 	} else {
-		a_start = j;
-		b_start = j;
-		a_left = a_end - j + 1;
-		b_left = b_end - j + 1;
+		a_left = a_end - a_start + 1;
+		b_left = b_end - b_start + 1;
 		sources = new Int32Array(b_left + 1);
 		moved = false;
 		pos = 0;
@@ -793,11 +1130,9 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 		// When sizes are small, just loop them through
 		if (b_length < 4 || (a_left | b_left) < 32) {
 			for (i = a_start; i <= a_end; ++i) {
-				a_val = a[i];
 				if (patched < b_left) {
 					for (j = b_start; j <= b_end; j++) {
-						b_val = b[j];
-						if (a_val === b_val) {
+						if (a[i] === b[j]) {
 							sources[j - b_start] = i + 1;
 							if (fast_path_removal) {
 								fast_path_removal = false;
@@ -810,6 +1145,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 							} else {
 								pos = j;
 							}
+							b_val = b[j];
 							b_block = b_blocks[j] = a_blocks[i];
 							if (is_indexed) {
 								update_index(b_block, j);
@@ -833,10 +1169,8 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 			}
 
 			for (i = a_start; i <= a_end; ++i) {
-				a_val = a[i];
-
 				if (patched < b_left) {
-					j = map.get(a_val);
+					j = map.get(a[i]);
 
 					if (j !== undefined) {
 						if (fast_path_removal) {
@@ -851,9 +1185,10 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 						} else {
 							pos = j;
 						}
-						block = b_blocks[j] = a_blocks[i];
+						b_val = b[j];
+						b_block = b_blocks[j] = a_blocks[i];
 						if (is_indexed) {
-							update_index(block, j);
+							update_index(b_block, j);
 						}
 						++patched;
 					} else if (!fast_path_removal) {
@@ -875,6 +1210,24 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 		var seq = lis_algorithm(sources);
 		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.
+		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);
+				}
+			}
+			state.array = b;
+			state.blocks = b_blocks;
+			return;
+		}
+
 		for (i = b_left - 1; i >= 0; i--) {
 			if (sources[i] === 0) {
 				pos = i + b_start;
@@ -885,7 +1238,6 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
-				b_val = b[pos];
 				next_pos = pos + 1;
 
 				var target = block_start(b_blocks, next_pos, b_length, anchor);