ripple 0.4.2 → 0.4.3

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

@@ -25,31 +25,36 @@ import { get_last_child, next_sibling, resolve_anchor } from './operations.js';
 import { append } from './template.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,
@@ -59,8 +64,8 @@ function create_item(anchor, value, index, render_fn, is_indexed, is_keyed, map_
 	// 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, state);
-		run_branch(lean, render_fn, anchor, value);
+		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;
 	}
@@ -69,18 +74,35 @@ function create_item(anchor, value, index, render_fn, is_indexed, is_keyed, map_
 	// 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
@@ -93,16 +115,16 @@ 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, p: any }} state
+ * @param {{ i: Tracked | undefined, v: any, k: any, p: any }} state
  */
 function run_item(state) {
 	var p = state.p;
@@ -115,11 +137,13 @@ function run_item(state) {
 		)(p);
 		return;
 	}
-	var render_fn = /** @type {(anchor: Node, value: any, index?: any) => Block} */ (item_render_fn);
+	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);
 }
 
 /**
@@ -292,6 +316,7 @@ class ListState {
 	 * @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,
@@ -304,6 +329,7 @@ class ListState {
 		map_item,
 		update_fn,
 		is_local,
+		is_keyed,
 	) {
 		this.a = anchor;
 		this.g = get_collection;
@@ -315,6 +341,7 @@ class ListState {
 		this.m = map_item;
 		this.u = update_fn;
 		this.l = is_local;
+		this.y = is_keyed;
 	}
 }
 
@@ -327,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);
 	}
 }
@@ -346,21 +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,
-		state.l,
-	);
+	reconcile_by_key(state.a, block, array);
 	set_tracking(true);
 
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		state.a = /** @type {Element | Text} */ (hydrate_node);
 	}
 }
@@ -387,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 {
@@ -395,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);
 		}
@@ -415,13 +431,14 @@ export function for_block(node, get_collection, render_fn, flags, 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));
@@ -464,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 {
@@ -472,7 +489,7 @@ export function for_block_keyed(
 		}
 	}
 
-	if (hydrating) {
+	if (HYDRATION && hydrating) {
 		if (root_controlled) {
 			boundary = /** @type {Node} */ (hydrate_node);
 		}
@@ -492,13 +509,14 @@ export function for_block_keyed(
 			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));
@@ -561,36 +579,18 @@ function update_value(block, value, map_item, is_local) {
 
 /**
  * @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
- * @param {boolean} is_local items are held as they are (`LOCAL_ITEMS`)
  * @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,
-	is_local,
-) {
+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);
@@ -604,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, !is_local, map_item);
+			b_blocks[j] = create_item(anchor, value, j, b_keys[j], state);
 		}
 
 		state.array = b;
@@ -613,50 +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,
-		is_local,
-	);
+	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
- * @param {boolean} is_local items are held as they are (`LOCAL_ITEMS`)
  * @returns {void}
  */
-function reconcile_by_key_diff(
-	anchor,
-	block,
-	b,
-	render_fn,
-	is_controlled,
-	is_indexed,
-	get_key,
-	render_empty,
-	map_item,
-	is_local,
-) {
-	var is_keyed = !is_local;
+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} */
@@ -723,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, is_keyed, map_item);
+			b_blocks[j] = create_item(anchor, b[j], j, b_keys[j], state);
 		}
 		state.array = b;
 		state.blocks = b_blocks;
@@ -765,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, is_local);
-			}
+			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, is_local);
-			}
+			patch_item(state, b_block, b[b_end], b_end);
 			a_end--;
 			b_end--;
 			continue;
@@ -800,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, is_local);
-			}
+			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++;
@@ -815,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, is_local);
-			}
+			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--;
@@ -837,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,
-					is_keyed,
-					map_item,
-				);
+				b_blocks[b_start] = create_item(target_node, b[b_start], b_start, b_keys[b_start], state);
 				b_start++;
 			}
 		}
@@ -886,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, is_local);
-							}
+							patch_item(state, b_block, b[j], j);
 							++patched;
 							break;
 						}
@@ -929,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, is_local);
-						}
+						patch_item(state, b_block, b[j], j);
 						++patched;
 					} else if (!fast_path_removal) {
 						destroy_block(a_blocks[i]);
@@ -950,18 +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,
-			is_local,
-		);
+		reconcile_by_key(anchor, block, b);
 		return;
 	} else if (moved) {
 		var next_pos = 0;
@@ -971,21 +890,7 @@ function reconcile_by_key_diff(
 		// When most surviving items have to move anyway, re-lay the whole range
 		// in order (see `relay`).
 		if ((patched - seq.length) * 3 > b_left * 2) {
-			relay(
-				anchor,
-				a_blocks,
-				a_start,
-				a_end,
-				b,
-				b_blocks,
-				b_start,
-				b_end,
-				sources,
-				render_fn,
-				is_indexed,
-				is_keyed,
-				map_item,
-			);
+			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;
@@ -999,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, is_keyed, 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;
@@ -1018,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, is_keyed, map_item);
+				b_blocks[pos] = create_item(target, b_val, pos, b_keys[pos], state);
 			}
 		}
 	}
@@ -1047,10 +952,8 @@ function reconcile_by_key_diff(
  * @param {number} b_start
  * @param {number} b_end
  * @param {Int32Array} sources zero at the index of a new item
- * @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
+ * @param {any[] | undefined} b_keys the new items' keys (a keyed list)
+ * @param {ListState} state
  */
 function relay(
 	anchor,
@@ -1062,10 +965,8 @@ function relay(
 	b_start,
 	b_end,
 	sources,
-	render_fn,
-	is_indexed,
-	is_keyed,
-	map_item,
+	b_keys,
+	state,
 ) {
 	var b_length = b.length;
 	var end_target = block_start(b_blocks, b_end + 1, b_length, anchor);
@@ -1085,7 +986,13 @@ function relay(
 
 	for (var pos = b_start; pos <= b_end; pos++) {
 		if (sources[pos - b_start] === 0) {
-			b_blocks[pos] = create_item(cursor, b[pos], pos, render_fn, is_indexed, is_keyed, map_item);
+			b_blocks[pos] = create_item(
+				cursor,
+				b[pos],
+				pos,
+				b_keys === undefined ? undefined : b_keys[pos],
+				state,
+			);
 			continue;
 		}
 		var block = b_blocks[pos];
@@ -1108,14 +1015,12 @@ function relay(
  * @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;
@@ -1155,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);
 }
 
 /**
@@ -1173,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} */
@@ -1215,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;
@@ -1239,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++;
@@ -1251,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--;
@@ -1270,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++;
 			}
 		}
@@ -1314,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;
 						}
@@ -1354,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]);
@@ -1372,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;
@@ -1392,10 +1270,8 @@ function reconcile_by_ref_diff(anchor, block, b, b_blocks, render_fn, is_control
 				b_start,
 				b_end,
 				sources,
-				render_fn,
-				is_indexed,
-				false,
 				undefined,
+				state,
 			);
 			state.array = b;
 			state.blocks = b_blocks;
@@ -1409,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;
@@ -1428,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);
 			}
 		}
 	}