solarite 0.7.0 → 0.8.0

package/src/PathToNodes.js

@@ -6,9 +6,31 @@ import Util from "./Util.js";
 import Template, {templatesSame, exprSame} from "./Template.js";
 import Globals from "./Globals.js";
 import MultiValueMap from "./MultiValueMap.js";
+import MappedList from "./MappedList.js";
+import {SelectorRef} from "./Selector.js";
 
 export default class PathToNodes extends Path {
 
+	/** @type {boolean} True once any NodeGroup this path created needs a visit even when its
+	 * values are unchanged (it holds a component or a live HTML property).  Those rows are the
+	 * reason the list scans exist, so their presence rules out applyMisses()' skip-the-scan
+	 * path.  Sticky: it's never cleared, which can only cost a scan that wasn't needed. */
+	anyNeedsRefresh = false;
+
+	/** @type {?Array} The h.map() items the previous render drew, one per NodeGroup and in the
+	 * same order, so an unchanged row is recognized by comparing two arrays rather than by
+	 * following a pointer into each NodeGroup.  A thousand rows' NodeGroups are scattered over
+	 * a hundred kilobytes, so reading a field from each one costs a cache miss apiece; two flat
+	 * arrays walk in step.  Null whenever the last render wasn't an h.map().
+	 * @type {?Array} */
+	lastItems = null;
+
+	/** @type {boolean} True when the previous render's items contained raw DOM Nodes,
+	 * which routes applySingle() to the generic reconciler.  Declared so the hot
+	 * `!this.itemsHaveNodes` check reads a real field instead of a missing property,
+	 * and so the first raw-Node render doesn't transition the hidden class. */
+	itemsHaveNodes = false;
+
 	/** @type {?NodeGroup[]} The NodeGroups created by this path's expression, in order.
 	 * Lazily created; null when the path has only ever rendered a primitive (see textNode). */
 	nodeGroups = null;
@@ -22,14 +44,6 @@ export default class PathToNodes extends Path {
 
 
 
-	/**
-	 * Nodes that have been used during the current render().
-	 * Used with getNodeGroup() and freeNodeGroups() on the generic path; the positional diff
-	 * tracks in-use NodeGroups in this.nodeGroups instead.
-	 * Lazily created since most paths never use it.
-	 * @type {?NodeGroup[]} */
-	nodeGroupsRendered = null;
-
 	/**
 	 * Nodes that were added to the web component during the last render(), but are available to be used again.
 	 * Used with getNodeGroup() and freeNodeGroups(), keyed by close key.
@@ -47,18 +61,6 @@ export default class PathToNodes extends Path {
 		super(nodeBefore, nodeMarker);
 	}
 
-	/**
-	 * Insert/replace the nodes created by a single expression.
-	 * Called by applyExprs()
-	 * @param exprs {Expr[]} Only the first is used.
-	 * @return {Node[]} New Nodes created. */
-	apply(exprs) {
-		//#IFDEV
-		assert(Array.isArray(exprs));
-		//#ENDIF
-		this.applySingle(exprs[0]);
-	}
-
 	/**
 	 * Make the DOM between nodeBefore and nodeMarker match the value of expr.
 	 * This is the main entry point for rendering an expression's nodes, chosen from three strategies:
@@ -70,7 +72,7 @@ export default class PathToNodes extends Path {
 	 * @param expr {Expr} */
 	applySingle(expr) {
 
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		/*#IFDEBUG*/this.verify();/*#ENDIF*/
 
 		// Fast path for a single primitive expression, the most common case in loops.
 		let exprType = typeof expr;
@@ -146,31 +148,452 @@ export default class PathToNodes extends Path {
 			this.textNode = null;
 		}
 
-		// 1. Flatten the expression to a list of Templates, strings and Nodes, evaluating functions along the way.
+		// A selection binding only knows how to write an attribute, so catch it here rather than
+		// letting it render as an empty string and leave the caller wondering where it went.
+		if (expr instanceof SelectorRef)
+			throw new Error('Solarite: a selector must own the whole attribute.');
+
+		// 1. h.map() hands over its source items and callback rather than built Templates, so a
+		// row whose item is unchanged is recognized without building or looking up a Template.
+		if (expr instanceof MappedList) {
+			this.applyMapped(expr);
+			/*#IFDEBUG*/this.verify();/*#ENDIF*/
+			return;
+		}
+
+		// Anything that isn't an h.map() leaves no items to recognize rows by next time.
+		this.lastItems = null;
+
+		// 2. Flatten the expression to a list of Templates, strings and Nodes, evaluating functions along the way.
+		// A flat array that is entirely Templates — the rows.map(...) shape that list renders
+		// produce — is borrowed directly instead of copied.  The borrow lasts only for the
+		// rest of this synchronous call:  applyDiff/applyKeyed/applyGeneric read the items and
+		// retain only the NodeGroups (and each item's own Template) built from them, never the
+		// items array itself, so no reference to the caller's array survives the render.  Keep
+		// that invariant — storing newItems on any long-lived object would pin the caller's
+		// per-render array until the next render, moving its collection into a later frame.
 		/** @type {(Template|string|Node)[]} */
-		let newItems = [];
-		let hasNodesNow = this.collectItems(expr, newItems, false);
+		let newItems = null;
+		let hasNodesNow = false;
+		if (Array.isArray(expr)) {
+			let len = expr.length, i = 0;
+			while (i < len && expr[i] instanceof Template)
+				i++;
+			if (i === len)
+				newItems = expr; // Borrowed from the caller; read-only from here on.
+		}
+		if (newItems === null) {
+			newItems = [];
+			hasNodesNow = this.collectItems(expr, newItems, false);
+		}
 
-		// 2. Raw Nodes in the items (now or on the previous render) can't be diffed positionally
+		// 3. Raw Nodes in the items (now or on the previous render) can't be diffed positionally
 		// because this.nodeGroups only tracks NodeGroups.  Use the generic path for those.
 		if (hasNodesNow || this.itemsHaveNodes) {
 			this.itemsHaveNodes = hasNodesNow;
 			this.applyGeneric(newItems);
 		}
-		else {
-			// Templates with a key=${} attribute diff by key so node identity follows the data.
-			// An empty list also routes to applyKeyed when the previous render was keyed,
-			// so removed keyed NodeGroups are discarded instead of pooled.
-			let first = newItems.length !== 0 ? newItems[0] : null;
-			if (first !== null
-				? (typeof first !== 'string' && (first.key !== undefined || Shell.get(first.html, first.svgMode).keyIndex >= 0))
-				: (this.nodeGroups !== null && this.nodeGroups.length !== 0 && this.nodeGroups[0].key !== undefined))
-				this.applyKeyed(newItems);
+		else
+			this.diffItems(newItems);
+
+		/*#IFDEBUG*/this.verify();/*#ENDIF*/
+	}
+
+	/**
+	 * Reconcile a flat list of Templates and strings against this path's NodeGroups.
+	 * Templates with a key=${} attribute diff by key so node identity follows the data.
+	 * An empty list also routes to applyKeyed when the previous render was keyed, so removed
+	 * keyed NodeGroups are discarded instead of pooled.
+	 * @param newItems {(Template|string)[]} */
+	diffItems(newItems) {
+		let first = newItems.length !== 0 ? newItems[0] : null;
+		if (first !== null
+			? (typeof first !== 'string' && (first.key !== undefined || Shell.get(first.html, first.svgMode).keyIndex >= 0))
+			: (this.nodeGroups !== null && this.nodeGroups.length !== 0 && this.nodeGroups[0].key !== undefined))
+			this.applyKeyed(newItems);
+		else
+			this.applyDiff(newItems);
+	}
+
+	/**
+	 * Render an h.map() list.
+	 *
+	 * What makes this cheaper than reconciling an array of Templates is that a row still holding
+	 * the item it was built from needs no Template at all: it is recognized by one identity
+	 * check, with nothing built and nothing compared.  When the list is the same length and only
+	 * a few rows changed, that is the whole render — see applyMisses().  Otherwise the walk
+	 * follows the offset a shifted list settles on, and finally consults a map from item to the
+	 * Template the previous render built, so rows that moved far are still reused.
+	 * @param mapped {MappedList} */
+	applyMapped(mapped) {
+		let items = mapped.items, fn = mapped.fn;
+		let len = items.length;
+		let oldNgs = this.nodeGroups;
+		// Only rows this path drew from an h.map() last time can be recognized by their item;
+		// anything else starts over.
+		let lastItems = this.lastItems;
+		let oldLen = oldNgs === null || lastItems === null || lastItems.length !== oldNgs.length
+			? 0 : oldNgs.length;
+
+		// Patch path.  When the list is the same length as last time, every row that still holds
+		// the item it was built from is already final: it needs no Template, no comparison and no
+		// visit.  So find the positions that did change, build only those, and patch them.  That
+		// makes a selection or a partial update cost work proportional to the change instead of
+		// to the length of the list.  Rows that must be visited even when unchanged (components,
+		// live HTML properties) rule it out, since revisiting them is what the full scan is for.
+		let misses = null, missTemplates = null, missCount = 0;
+		if (oldLen === len && len !== 0 && !this.anyNeedsRefresh && !this.itemsHaveNodes) {
+			let tooMany = false;
+			let cap = missProbeThreshold;
+
+			// First find WHICH positions changed, without building anything for them.  A change
+			// this path can't handle is then abandoned having cost only comparisons — building
+			// as we went would throw away a Template for every row of, say, a reversed list,
+			// which the general diff is about to reuse from the previous render.
+			for (let i=0; i<len; i++) {
+				if (lastItems[i] !== items[i]) {
+					if (missCount === cap) {
+						// Enough of the list has changed to ask what kind of change this is,
+						// because the two kinds want opposite treatment.  If the item at this
+						// position is somewhere else in the old list, the rows were reordered,
+						// and the general diff's item map will reuse their Templates instead of
+						// rebuilding them — so stop here and let it.  If the item is new, the
+						// rows' contents changed, and there is nothing to reuse: keep going and
+						// patch them all, however many there are.  The scan costs one pass over
+						// the old rows, once, and only for a list that changed this much.
+						if (itemIsElsewhere(lastItems, oldLen, items[i])) {
+							tooMany = true;
+							missCount = 0; // Nothing was built, so the general path has nothing to reuse.
+							break;
+						}
+						cap = len; // Asked and answered; there is no second probe.
+					}
+					(misses ??= [])[missCount++] = i;
+				}
+			}
+
+			// Now build them.
+			if (!tooMany && missCount !== 0) {
+				missTemplates = new Array(missCount);
+				for (let k=0; k<missCount; k++) {
+					let t = fn(items[misses[k]]);
+					if (!(t instanceof Template) && typeof t !== 'string') { // A Node, an array, …
+						tooMany = true;
+						missCount = k; // Keep the ones already built; the rest are the caller's problem.
+						break;
+					}
+					missTemplates[k] = t;
+				}
+			}
+			if (!tooMany && (missCount === 0
+					|| this.applyMisses(oldNgs, misses, missTemplates, missCount, len))) {
+				for (let k=0; k<missCount; k++) {
+					let j = misses[k];
+					lastItems[j] = items[j];
+				}
+				return;
+			}
+		}
+
+		// General path: build the whole list of Templates and hand it to the reconciler.
+		let newItems = new Array(len);
+		let built = missCount !== 0 ? misses : null, b = 0;
+		let itemMap = null, noItemMap = false;
+		const indexOfItem = item => {
+			if (noItemMap)
+				return -1;
+			if (itemMap === null) {
+				// One scan before paying for a map: if this item is nowhere in the old rows, the
+				// list's contents changed rather than moved, so there is nothing to look up and
+				// every later miss can go straight to the callback.  A scan is cheaper than a map
+				// of every row, and this is the common shape — rows replaced in place.
+				if (!itemIsElsewhere(lastItems, oldLen, item)) {
+					noItemMap = true;
+					return -1;
+				}
+				itemMap = new Map();
+				for (let k=0; k<oldLen; k++)
+					itemMap.set(lastItems[k], k);
+			}
+			let k = itemMap.get(item);
+			return k === undefined ? -1 : k;
+		};
+		// Walk the two lists together.  A row is recognized by the item it was built from, at the
+		// offset the walk has settled on: after an insertion or a removal every later row sits a
+		// fixed distance from where it was, and following that keeps recognizing them instead of
+		// treating the whole tail as changed.  The short search that re-establishes the offset
+		// only runs while the walk is still in step, so a list of genuinely new rows (an append,
+		// a replace-all) gives up after one miss rather than searching for every row.  Failing
+		// all that, a map from item to the Template the previous render built for it catches
+		// rows that moved far — a sort, a shuffle.  It's built on demand, from the rows this
+		// path already holds: a persistent per-item cache would instead pay a write for every
+		// row of every list ever created, which is most of the work of building a list from
+		// scratch, and would hold each Template alive for as long as the caller holds the item.
+		if (oldLen !== 0) {
+			let delta = 0, inSync = true;
+			for (let i=0; i<len; i++) {
+				let item = items[i];
+				let j = i + delta;
+				let inRange = j >= 0 && j < oldLen;
+				if (inRange && lastItems[j] === item) {
+					newItems[i] = oldNgs[j].template;
+					inSync = true;
+					continue;
+				}
+
+				// This position was already found to have changed, and its Template built, by the
+				// patch scan above.  That only happens for a same-length list, where the offset
+				// stays zero, so there's no search to redo here.
+				if (built !== null && b < missCount && built[b] === i) {
+					newItems[i] = missTemplates[b++];
+					continue;
+				}
+
+				if (inSync) {
+					let found = -1;
+					for (let d=1; d<=shiftSearchDistance; d++) {
+						let after = j + d, before = j - d;
+						if (after < oldLen && lastItems[after] === item) {
+							found = after;
+							break;
+						}
+						if (before >= 0 && lastItems[before] === item) {
+							found = before;
+							break;
+						}
+					}
+					if (found >= 0) {
+						delta = found - i;
+						newItems[i] = oldNgs[found].template;
+						continue;
+					}
+
+					// The item isn't in the old list at all, but the old row standing here
+					// belongs to an item a little further along: rows were INSERTED here.  Build
+					// this one and shift the offset, so the rest of the list is still recognized.
+					// Without this, prepending one row to a long list would look like a change to
+					// every row in it.  Only worth asking when the list actually grew.
+					if (inRange && len > oldLen)
+						for (let d=1; d<=insertSearchDistance && i+d<len; d++)
+							if (items[i+d] === lastItems[j]) {
+								newItems[i] = fn(item);
+								delta--;
+								found = -2; // Handled; skip the fallbacks below.
+								break;
+							}
+					if (found === -2)
+						continue;
+
+					inSync = false;
+				}
+
+				// Past the end of the old list there is nothing left to match, so appended rows
+				// go straight to the callback instead of paying for a lookup that must miss.
+				if (j < oldLen) {
+					let k = indexOfItem(item);
+					if (k >= 0) {
+						newItems[i] = oldNgs[k].template;
+						delta = k - i; // Back in step; the rest of the list can walk positionally again.
+						inSync = true;
+						continue;
+					}
+				}
+				newItems[i] = fn(item);
+			}
+		}
+
+		else
+			for (let i=0; i<len; i++)
+				newItems[i] = fn(items[i]);
+
+		// A callback that returns something other than a Template or a string (a raw Node, an
+		// array, a nested list) can't be diffed positionally; flatten it the general way.
+		let first = len !== 0 ? newItems[0] : null;
+		if (first !== null && !(first instanceof Template) && typeof first !== 'string') {
+			let flat = [];
+			let hasNodesNow = this.collectItems(newItems, flat, false);
+			if (hasNodesNow || this.itemsHaveNodes) {
+				this.itemsHaveNodes = hasNodesNow;
+				this.applyGeneric(flat);
+			}
 			else
-				this.applyDiff(newItems);
+				this.diffItems(flat);
+			return;
 		}
 
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		if (this.itemsHaveNodes) {
+			this.itemsHaveNodes = false;
+			this.applyGeneric(newItems);
+			return;
+		}
+
+		this.diffItems(newItems);
+
+		// Remember which item drew each row, so the next render can match them by identity.
+		// The reconciler leaves nodeGroups aligned with newItems, and therefore with items.
+		// The caller's array is copied rather than kept, since the caller mutates it in place.
+		let li = this.lastItems;
+		if (li === null || li.length !== len)
+			li = this.lastItems = new Array(len);
+		for (let j=0; j<len; j++)
+			li[j] = items[j];
+	}
+
+	/**
+	 * Patch only the positions an h.map() render changed, leaving every other row alone.
+	 *
+	 * Every unchanged position already holds the NodeGroup built from that exact item, so it
+	 * needs no visit at all; only the changed positions can require a rewrite, a move, or a new
+	 * row.  Changed positions are handled in two steps, the same shape as the general keyed
+	 * diff's small-reorder path: first the ones that kept their key (a row whose data changed
+	 * in place), then the leftovers are cross-matched against each other by key so a swap or a
+	 * short shuffle moves the fewest node ranges.
+	 *
+	 * @param ngs {NodeGroup[]} This path's NodeGroups, patched in place.
+	 * @param misses {int[]} Positions whose item changed, ascending.
+	 * @param templates {(Template|string)[]} The new Template for each of those positions.
+	 * @param missCount {int}
+	 * @param len {int} Length of the list, for anchoring the last position.
+	 * @return {boolean} False when the change doesn't fit this path and the caller must run
+	 * the general diff instead; nothing has been modified in that case. */
+	applyMisses(ngs, misses, templates, missCount, len) {
+
+		// Only a keyed list can move rows around safely.  An unkeyed one can still be rewritten
+		// in place, which is what the positional diff would do for it anyway.
+		let keyed = ngs[0].key !== undefined;
+
+		// 1. Classify the changed positions without touching anything, so that a change too big
+		// for this path can still be handed to the general diff with nothing half-applied.
+		// A row that kept its key is rewritten where it stands; the rest have to be matched
+		// against each other, and past a handful of those the general diff's map-and-LIS
+		// approach is the better tool.
+		let displaced = null, dCount = 0;
+		for (let k=0; k<missCount; k++) {
+			let ng = ngs[misses[k]], t = templates[k];
+			if (typeof t === 'string' || !itemClose(ng, t) || (keyed && ng.key !== keyOf(t))) {
+				if (!keyed || dCount === maxDisplacedMisses)
+					return false;
+				(displaced ??= [])[dCount++] = k;
+			}
+		}
+
+		// 2. Rewrite the rows that kept their key.  displaced holds indexes into misses in
+		// ascending order, so one pointer walks past them.
+		for (let k=0, d=0; k<missCount; k++) {
+			if (d < dCount && displaced[d] === k) {
+				d++;
+				continue;
+			}
+			let ng = ngs[misses[k]], t = templates[k];
+			if (itemSame(ng, t))
+				this.refreshSameItem(ng, t);
+			else
+				this.rewriteNodeGroup(ng, t);
+		}
+		if (dCount === 0)
+			return true;
+
+		// 3. Hand the displaced rows to the shared placer.  displaced holds indexes into misses
+		// and templates, so misses is what maps a row to its position in the list.
+		let wholeParent = this.wholeParent;
+		this.placeDisplaced(displaced, misses, ngs, templates, ngs, len,
+			wholeParent ? null : this.nodeMarker,
+			wholeParent ? this.nodeMarker : this.nodeMarker.parentNode);
+
+		// 4. Node membership or order changed, so invalidate caches.
+		if (!this.parentNg.firstApply) {
+			this.nodesCache = null;
+			if (this.parentNg.parentPath)
+				this.parentNg.parentPath.clearNodesCache();
+		}
+
+		// Keep state used by the generic path from going stale.
+		if (this.nodeGroupsAttachedAvailable)
+			this.nodeGroupsAttachedAvailable = null;
+		return true;
+	}
+
+	/**
+	 * Settle a handful of rows that moved, appeared or vanished within one window of a list.
+	 *
+	 * Both small-reorder paths — the h.map() patch in applyMisses and the equal-length window in
+	 * applyKeyed — reach the same point: a few positions whose old NodeGroup no longer belongs
+	 * where it stands, everything around them already correct.  Since every candidate came from
+	 * this same window, a swap, a dragged row or a short shuffle finds its partners inside it, so
+	 * the rows are cross-matched against each other by key rather than through the general
+	 * diff's key map and longest-increasing-subsequence machinery.
+	 *
+	 * rows holds ascending indexes into items, which is the array each caller already has; when
+	 * those indexes are not themselves list positions, positions maps them across.  Doing the
+	 * indirection here rather than compacting it away in the caller keeps this off the allocation
+	 * path: neither caller builds an array it wasn't building already.  rows.length is small by
+	 * construction (at most maxDisplacedMisses), which is what makes the O(n²) cross-match
+	 * cheaper than building a map.
+	 *
+	 * @param rows {int[]} Ascending indexes of the rows to settle.
+	 * @param positions {int[]|null} Maps a row index to its list position, or null when the row
+	 *   indexes are already positions.
+	 * @param oldNgs {NodeGroup[]} Where each position's outgoing NodeGroup is read from.
+	 * @param items {(Template|string)[]} The new items, indexed by row index.
+	 * @param outNgs {NodeGroup[]} Receives the NodeGroup that ends up at each position.  May be
+	 *   the same array as oldNgs; the outgoing groups are snapshotted before anything is written.
+	 * @param boundary {int} First position past this window, where the anchor stops being
+	 *   outNgs[p+1] and becomes tailAnchor.
+	 * @param tailAnchor {Node|null} Anchor for a row placed at boundary-1.
+	 * @param parent {Node} Where the rows' nodes live. */
+	placeDisplaced(rows, positions, oldNgs, items, outNgs, boundary, tailAnchor, parent) {
+		let count = rows.length;
+
+		// 1. Cross-match the rows against each other by key.  A claimed NodeGroup is nulled out
+		// of the snapshot so it can't be claimed twice.
+		let free = new Array(count);
+		for (let b=0; b<count; b++) {
+			let i = rows[b];
+			free[b] = oldNgs[positions === null ? i : positions[i]];
+		}
+		let placed = new Array(count);
+		for (let a=0; a<count; a++) {
+			let t = items[rows[a]];
+			let key = keyOf(t);
+			if (key !== undefined)
+				for (let b=0; b<count; b++) {
+					let ng = free[b];
+					if (ng !== null && ng.key === key && itemClose(ng, t)) {
+						free[b] = null;
+						if (itemSame(ng, t))
+							this.refreshSameItem(ng, t);
+						else
+							this.rewriteNodeGroup(ng, t);
+						placed[a] = ng;
+						break;
+					}
+				}
+		}
+
+		// 2. Discard the old rows nothing claimed.  Keyed semantics require a new key to get new
+		// nodes, so these are never pooled.
+		for (let b=0; b<count; b++) {
+			let ng = free[b];
+			if (ng !== null) {
+				if (ng.startNode !== ng.endNode)
+					Util.saveOrphans(ng.getNodes());
+				else
+					ng.startNode.remove();
+			}
+		}
+
+		// 3. Put the rows in place, right to left so each one's anchor is already final.
+		for (let a=count-1; a>=0; a--) {
+			let i = rows[a];
+			let p = positions === null ? i : positions[i];
+			let ng = placed[a];
+			if (ng === undefined)
+				ng = this.createNew(items[i]);
+			outNgs[p] = ng;
+			let anchor = p+1 < boundary ? outNgs[p+1].startNode : tailAnchor;
+			if (ng.endNode.nextSibling !== anchor || ng.startNode.parentNode !== parent)
+				insertNodesBefore(parent, ng, anchor);
+		}
 	}
 
 	/**
@@ -193,8 +616,8 @@ export default class PathToNodes extends Path {
 			let ng = oldNgs[start], t = newItems[start];
 			if (!itemSame(ng, t))
 				break;
-			if (ng.hasComponentPaths)
-				ng.applyExprs(t.exprs, false);
+			if (ng.shell.needsRefresh)
+				this.refreshSameItem(ng, t);
 			newNgs[start] = ng;
 			start++;
 		}
@@ -204,8 +627,8 @@ export default class PathToNodes extends Path {
 			let ng = oldNgs[oldEnd-1], t = newItems[newEnd-1];
 			if (!itemSame(ng, t))
 				break;
-			if (ng.hasComponentPaths)
-				ng.applyExprs(t.exprs, false);
+			if (ng.shell.needsRefresh)
+				this.refreshSameItem(ng, t);
 			newNgs[--newEnd] = ng;
 			oldEnd--;
 		}
@@ -214,8 +637,8 @@ export default class PathToNodes extends Path {
 		while (start < oldEnd && start < newEnd) {
 			let ng = oldNgs[start], t = newItems[start];
 			if (itemSame(ng, t)) { // Can happen between changed rows, e.g. partial updates.
-				if (ng.hasComponentPaths)
-					ng.applyExprs(t.exprs, false);
+				if (ng.shell.needsRefresh)
+					this.refreshSameItem(ng, t);
 			}
 			else if (itemClose(ng, t))
 				this.rewriteNodeGroup(ng, t);
@@ -252,34 +675,18 @@ export default class PathToNodes extends Path {
 				}
 			}
 
-			// 5. Insert leftover new items.
+			// 5. Insert leftover new items directly.  Each row is one native insert; a
+			// batching DocumentFragment would double the insert count for no benefit,
+			// since style/layout work is deferred until the next frame either way.
 			if (newRemain) {
 				let wholeParent = this.wholeParent;
 				let anchor = newEnd < newLen ? newNgs[newEnd].startNode : (wholeParent ? null : this.nodeMarker);
 				let parent = wholeParent ? this.nodeMarker : this.nodeMarker.parentNode;
-				let target = parent, before = anchor;
-				let fragment = null;
-				if (newRemain > 1) { // Batch-insert through a fragment.
-					fragment = Globals.doc.createDocumentFragment();
-					target = fragment;
-					before = null;
-				}
 				for (let i=start; i<newEnd; i++) {
 					let ng = this.createOrReuse(newItems[i]);
 					newNgs[i] = ng;
-					let node = ng.startNode, end = ng.endNode;
-					if (node === end) // Single-node NodeGroups are the common case in loops.
-						target.insertBefore(node, before);
-					else while (true) {
-						let next = node.nextSibling;
-						target.insertBefore(node, before);
-						if (node === end)
-							break;
-						node = next;
-					}
+					insertNodesBefore(parent, ng, anchor);
 				}
-				if (fragment)
-					parent.insertBefore(fragment, anchor);
 			}
 
 			// 6. Node membership changed, so invalidate caches.
@@ -294,8 +701,6 @@ export default class PathToNodes extends Path {
 		this.nodeGroups = newNgs;
 
 		// Keep state used by the generic path from going stale.
-		if (this.nodeGroupsRendered)
-			this.nodeGroupsRendered = null;
 		if (this.nodeGroupsAttachedAvailable)
 			this.nodeGroupsAttachedAvailable = null;
 	}
@@ -314,23 +719,11 @@ export default class PathToNodes extends Path {
 		let oldLen = oldNgs.length, newLen = newItems.length;
 		let newNgs = new Array(newLen);
 
-		// Resolve an item's key, caching the html->keyIndex lookup for same-template lists.
-		let keyHtml = null, keyIndex = -1;
-		const keyOf = t => {
-			if (t.key !== undefined) // JSX templates carry the key directly.
-				return t.key;
-			if (t.html !== keyHtml) {
-				keyHtml = t.html;
-				keyIndex = Shell.get(t.html, t.svgMode).keyIndex;
-			}
-			return keyIndex >= 0 ? t.exprs[keyIndex] : undefined;
-		};
-
-		//#IFDEV
+		//#IFDEBUG
 		{
 			let seen = new Set();
 			for (let t of newItems) {
-				let k = typeof t === 'string' ? undefined : keyOf(t);
+				let k = keyOf(t);
 				if (k === undefined)
 					console.warn('Unkeyed item in a keyed list; it will be rebuilt on every render:', t);
 				else if (seen.has(k))
@@ -348,15 +741,13 @@ export default class PathToNodes extends Path {
 			let ng = oldNgs[start], t = newItems[start];
 			// An identical Template instance (h.map) implies an identical key, so skip key extraction.
 			if (ng.template === t) {
-				if (ng.hasComponentPaths)
-					ng.applyExprs(t.exprs, false);
+				if (ng.shell.needsRefresh)
+					this.refreshSameItem(ng, t);
 			}
 			else if (typeof t === 'string' || ng.key !== keyOf(t) || !itemClose(ng, t))
 				break;
-			else if (itemSame(ng, t)) {
-				if (ng.hasComponentPaths)
-					ng.applyExprs(t.exprs, false);
-			}
+			else if (itemSame(ng, t))
+				this.refreshSameItem(ng, t);
 			else
 				this.rewriteNodeGroup(ng, t);
 			newNgs[start] = ng;
@@ -367,15 +758,13 @@ export default class PathToNodes extends Path {
 		while (oldEnd > start && newEnd > start) {
 			let ng = oldNgs[oldEnd-1], t = newItems[newEnd-1];
 			if (ng.template === t) {
-				if (ng.hasComponentPaths)
-					ng.applyExprs(t.exprs, false);
+				if (ng.shell.needsRefresh)
+					this.refreshSameItem(ng, t);
 			}
 			else if (typeof t === 'string' || ng.key !== keyOf(t) || !itemClose(ng, t))
 				break;
-			else if (itemSame(ng, t)) {
-				if (ng.hasComponentPaths)
-					ng.applyExprs(t.exprs, false);
-			}
+			else if (itemSame(ng, t))
+				this.refreshSameItem(ng, t);
 			else
 				this.rewriteNodeGroup(ng, t);
 			newNgs[--newEnd] = ng;
@@ -387,6 +776,57 @@ export default class PathToNodes extends Path {
 			let wholeParent = this.wholeParent;
 			let parent = wholeParent ? this.nodeMarker : this.nodeMarker.parentNode;
 
+			// 3a. Equal-length windows: scan them aligned.  Rows whose keys match positionally
+			// are updated in place with no bookkeeping, and when at most 8 positions are
+			// displaced (a swap, a dragged row, a small shuffle) they're cross-matched and
+			// moved directly — no key map, no sources array, no LIS.  A bigger shuffle falls
+			// through to the general map phase; the in-place updates already done stay valid
+			// there, since the map phase finds those rows already matching their new items.
+			let fastHandled = false;
+			if (oldRemain === newRemain) {
+				let displaced = null;
+				let ok = true;
+				for (let i=start; i<newEnd; i++) {
+					let ng = oldNgs[i], t = newItems[i];
+					if (ng.template === t) {
+						if (ng.shell.needsRefresh)
+							this.refreshSameItem(ng, t);
+					}
+					else {
+						let k = keyOf(t);
+						if (k !== undefined && ng.key === k && itemClose(ng, t)) {
+							if (itemSame(ng, t))
+								this.refreshSameItem(ng, t);
+							else
+								this.rewriteNodeGroup(ng, t);
+						}
+						else {
+							(displaced ??= []).push(i);
+							if (displaced.length > 8) {
+								ok = false;
+								break;
+							}
+							continue; // newNgs[i] is filled during the placement pass below.
+						}
+					}
+					newNgs[i] = ng;
+				}
+				if (ok) {
+					// The windows are the same length, so a displaced row's index is already its
+					// position and no position map is needed.  The tail anchor is the suffix row
+					// just past this window, which placement never writes to — it only fills
+					// positions below newEnd — so it is computed once here instead of on every
+					// pass around the placement loop.
+					if (displaced !== null)
+						this.placeDisplaced(displaced, null, oldNgs, newItems, newNgs, newEnd,
+							newEnd < newLen ? newNgs[newEnd].startNode : (wholeParent ? null : this.nodeMarker),
+							parent);
+					fastHandled = true;
+				}
+			}
+
+			if (!fastHandled) {
+
 			// 3. Match the middle windows by key.
 			let kept = 0, moved = false;
 			let sources = null; // sources[i] = old index reused by new item start+i, or -1 to create fresh.
@@ -412,10 +852,8 @@ export default class PathToNodes extends Path {
 								moved = true;
 							else
 								lastNewIndex = newIndex;
-							if (itemSame(ng, t)) {
-								if (ng.hasComponentPaths)
-									ng.applyExprs(t.exprs, false);
-							}
+							if (itemSame(ng, t))
+								this.refreshSameItem(ng, t);
 							else
 								this.rewriteNodeGroup(ng, t);
 							newNgs[newIndex] = ng;
@@ -424,59 +862,72 @@ export default class PathToNodes extends Path {
 							(removals ??= []).push(ng);
 					}
 				}
-				else {
-					removals = oldNgs.slice(start, oldEnd);
-				}
+				// else: the whole old window goes away.  It isn't collected into an array here,
+				// because the fast clear below usually takes every one of them at once and the
+				// array would be built only to be thrown away.
+			}
+
+			// 3b. A large whole-parent list that is being fully replaced is emptied and refilled
+			// with its parent detached, so the browser's connected-tree bookkeeping (child-change
+			// notifications, tree-version bumps, MutationObserver interest walks, deferred
+			// accessibility and style consumers) runs once at reattach instead of once per row
+			// removed and once per row added.  Detaching before the clear, rather than after it,
+			// puts the removals on the cheap side of that line as well.  The gates: the whole
+			// region is being replaced, so nothing is kept and no focus can survive inside it;
+			// the parent is a plain element, since detaching a custom element would fire its
+			// disconnected/connectedCallback in the middle of a render and a subclass may run
+			// arbitrary logic there; the parent is in the document, since the notification storm
+			// only exists on a connected tree; and the list is long enough for the saving to beat
+			// the fixed cost of the detour and the extra MutationObserver records it creates.
+			let detachedFrom = null, reattachBefore = null;
+			if (wholeParent && start === 0 && newEnd === newLen && kept === 0 && newRemain > 500
+				&& parent.isConnected && parent.parentNode !== null
+				&& parent.localName.indexOf('-') === -1 && !parent.hasAttribute('is')) {
+				detachedFrom = parent.parentNode;
+				reattachBefore = parent.nextSibling;
+				parent.remove();
 			}
 
 			// 4. Remove unmatched old NodeGroups.  They're discarded, never pooled,
 			// so a later render with new keys always creates new nodes.
-			if (removals) {
-				// Materialize node caches of multi-node groups while attached, since detaching breaks sibling links.
-				for (let ng of removals)
-					if (ng.startNode !== ng.endNode)
-						ng.getNodes();
+			let removeAll = oldRemain !== 0 && newRemain === 0;
+			if (removals !== null || removeAll) {
+				// Fast clear when nothing is kept anywhere; the whole region is removals.  Trying
+				// it first means a cleared list skips the two passes below entirely: those exist
+				// to lift each group's nodes out one at a time, and emptying the parent has
+				// already taken all of them.
+				if (!(start === 0 && newEnd === newLen && kept === 0 && this.fastClear())) {
+					if (removeAll)
+						removals = oldNgs.slice(start, oldEnd);
+
+					// Materialize node caches of multi-node groups while attached, since detaching breaks sibling links.
+					for (let ng of removals)
+						if (ng.startNode !== ng.endNode)
+							ng.getNodes();
 
-				// Fast clear when nothing is kept anywhere; the whole region is removals.
-				let cleared = start === 0 && newEnd === newLen && kept === 0 && this.fastClear();
-				if (!cleared)
 					for (let ng of removals) {
 						if (ng.startNode !== ng.endNode)
 							Util.saveOrphans(ng.getNodes()); // Moves the nodes out of the DOM, into their own fragment.
 						else
 							ng.startNode.remove();
 					}
+				}
 			}
 
 			// 5. Insert new NodeGroups and move kept ones.
 			if (newRemain) {
 				let anchor = newEnd < newLen ? newNgs[newEnd].startNode : (wholeParent ? null : this.nodeMarker);
 
-				// 5a. Nothing kept in the middle: batch-insert every new item through a fragment.
+				// 5a. Nothing kept in the middle: insert every new item directly.
+				// Each row is one native insert; routing rows through a batching
+				// DocumentFragment would double the insert count for no benefit, since
+				// style/layout work is deferred until the next frame either way.
 				if (kept === 0) {
-					let target = parent, before = anchor;
-					let fragment = null;
-					if (newRemain > 1) {
-						fragment = Globals.doc.createDocumentFragment();
-						target = fragment;
-						before = null;
-					}
 					for (let i=start; i<newEnd; i++) {
 						let ng = this.createNew(newItems[i]);
 						newNgs[i] = ng;
-						let node = ng.startNode, end = ng.endNode;
-						if (node === end)
-							target.insertBefore(node, before);
-						else while (true) {
-							let next = node.nextSibling;
-							target.insertBefore(node, before);
-							if (node === end)
-								break;
-							node = next;
-						}
+						insertNodesBefore(parent, ng, anchor);
 					}
-					if (fragment)
-						parent.insertBefore(fragment, anchor);
 				}
 
 				// 5b. Mixed: iterate backwards so each item's anchor is already in place.
@@ -503,6 +954,11 @@ export default class PathToNodes extends Path {
 				}
 			}
 
+			if (detachedFrom !== null)
+				detachedFrom.insertBefore(parent, reattachBefore);
+
+			} // end if (!fastHandled)
+
 			// 6. Node membership or order changed, so invalidate caches.
 			// During a NodeGroup's first applyExprs(), no ancestor caches can reference its nodes yet.
 			if (!this.parentNg.firstApply) {
@@ -515,8 +971,6 @@ export default class PathToNodes extends Path {
 		this.nodeGroups = newNgs;
 
 		// Keep state used by the generic path from going stale.
-		if (this.nodeGroupsRendered)
-			this.nodeGroupsRendered = null;
 		if (this.nodeGroupsAttachedAvailable)
 			this.nodeGroupsAttachedAvailable = null;
 	}
@@ -530,11 +984,30 @@ export default class PathToNodes extends Path {
 		if (typeof item === 'string')
 			return new NodeGroup(textTemplate(item), this); // Text NodeGroups have no paths to apply.
 		let ng = new NodeGroup(item, this);
+		if (ng.shell.needsRefresh)
+			this.anyNeedsRefresh = true;
 		if (item.exprs.length || (ng.paths && ng.paths.length))
 			ng.applyExprs(item.exprs);
 		return ng;
 	}
 
+	/**
+	 * Refresh a NodeGroup whose new template has the SAME values as its current one.
+	 * Components still render so changes deeper in the tree can surface, and groups holding
+	 * live-HTML-property bindings (checked/value/selected) rewrite in place — a user's click
+	 * flips those DOM properties underneath the cached expression, so same values ≠ same DOM.
+	 * rewriteNodeGroup's per-path skip exempts exactly those paths; everything else is
+	 * compared and skipped as before, so this stays cheap.
+	 * @param ng {NodeGroup}
+	 * @param t {Template|string} */
+	refreshSameItem(ng, t) {
+		let shell = ng.shell;
+		if (shell.hasComponentPaths)
+			ng.applyExprs(t.exprs, false);
+		else if (shell.hasLivePropPaths && shell.pathsSingleExpr && typeof t !== 'string')
+			this.rewriteNodeGroup(ng, t);
+	}
+
 	/**
 	 * Update an existing NodeGroup, created from the same html strings, with new values.
 	 * @param ng {NodeGroup}
@@ -548,15 +1021,21 @@ export default class PathToNodes extends Path {
 		else {
 			// When every path consumes exactly one expression, paths align 1:1 with exprs,
 			// so only the expressions that changed need to be applied.
-			if (ng.pathsSingleExpr) {
+			if (ng.shell.pathsSingleExpr) {
 				// Stamped groups (paths === null) rewrite through the shared stampers and stay
 				// path-less, unless a child-node expression stopped being primitive.
 				if (ng.paths !== null || !ng.rewriteStamp(item)) {
 					let oldExprs = ng.template.exprs, newExprs = item.exprs;
 					let paths = ng.paths ?? ng.materializePaths();
-					for (let i = paths.length - 1; i >= 0; i--)
-						if (!exprSame(oldExprs[i], newExprs[i]))
-							paths[i].applySingle(newExprs[i]);
+					for (let i = paths.length - 1; i >= 0; i--) {
+						// Boolean live-HTML-property bindings are exempt from the unchanged-value
+						// skip — a click flips the property underneath the cached expression;
+						// applySingle() compares against the live node before writing.
+						let oldExpr = oldExprs[i], newExpr = newExprs[i];
+						if ((oldExpr !== newExpr && !exprSame(oldExpr, newExpr))
+							|| (paths[i].isHtmlProperty && typeof newExpr === 'boolean'))
+							paths[i].applySingle(newExpr);
+					}
 				}
 
 				if (ng.styles)
@@ -595,6 +1074,8 @@ export default class PathToNodes extends Path {
 		}
 
 		ng = new NodeGroup(item, this);
+		if (ng.shell.needsRefresh)
+			this.anyNeedsRefresh = true;
 		if (item.exprs.length || (ng.paths && ng.paths.length))
 			ng.applyExprs(item.exprs);
 		return ng;
@@ -622,6 +1103,14 @@ export default class PathToNodes extends Path {
 		else if (typeof expr === 'function')
 			hasNodes = this.collectItems(expr(), items, hasNodes);
 
+		// A MappedList nested inside an array or returned from a function can't use the
+		// identity fast path, but it still renders; expand it through the per-item cache.
+		else if (expr instanceof MappedList) {
+			let subItems = expr.items, fn = expr.fn;
+			for (let i=0; i<subItems.length; i++)
+				items.push(fn(subItems[i]));
+		}
+
 		else if (expr instanceof NodeList) {
 			for (let node of expr)
 				items.push(node);
@@ -661,7 +1150,7 @@ export default class PathToNodes extends Path {
 		/** @type {Node[]} */
 		let newNodes = [];
 		let oldNodeGroups = path.nodeGroups || emptyNodeGroups;
-		/*#IFDEV*/assert(!oldNodeGroups.includes(null))/*#ENDIF*/
+		/*#IFDEBUG*/assert(!oldNodeGroups.includes(null))/*#ENDIF*/
 
 		path.nodeGroups = [];
 		for (let item of items) {
@@ -769,29 +1258,26 @@ export default class PathToNodes extends Path {
 			|| this.nodeGroupsDetachedAvailable?.deleteAny(closeKey);
 
 		if (result) {
-			if (templatesSame(result.template, template)) {
-				// Components still render so changes deeper in the tree can surface.
-				if (result.hasComponentPaths)
-					result.applyExprs(template.exprs, false);
-			}
+			if (templatesSame(result.template, template))
+				this.refreshSameItem(result, template);
 			else
 				result.applyExprs(template.exprs);
 			result.template = template;
 		}
 		else {
 			result = new NodeGroup(template, this);
+			if (result.shell.needsRefresh)
+				this.anyNeedsRefresh = true;
 			result.applyExprs(template.exprs);
 		}
 
-		(this.nodeGroupsRendered ??= []).push(result);
-
-		/*#IFDEV*/assert(result.parentPath);/*#ENDIF*/
+		/*#IFDEBUG*/assert(result.parentPath);/*#ENDIF*/
 		return result;
 	}
 
 
 	/**
-	 * Move everything from this.nodeGroupsRendered to this.nodeGroupsAttached and nodeGroupsDetached.
+	 * Move everything from this.nodeGroups to this.nodeGroupsAttached and nodeGroupsDetached.
 	 * Called at the beginning of applyGeneric() so it can have NodeGroups to use.
 	 * TODO: this could run as needed in getNodeGroup? */
 	freeNodeGroups() {
@@ -801,7 +1287,7 @@ export default class PathToNodes extends Path {
 			let detached = (this.nodeGroupsDetachedAvailable ??= new MultiValueMap()).data;
 			for (let key in previouslyAttached) {
 				let src = previouslyAttached[key];
-				let from = src.head || 0; // Skip entries already consumed by deleteAny().
+				let from = src.hd || 0; // Skip entries already consumed by deleteAny().
 				let array = detached[key];
 				if (!array) {
 					array = detached[key] = from ? src.slice(from) : src;
@@ -809,22 +1295,18 @@ export default class PathToNodes extends Path {
 						array.length = maxPooledPerKey;
 				}
 				else
-					for (let i=from, max=maxPooledPerKey + (array.head || 0); i<src.length && array.length < max; i++)
+					for (let i=from, max=maxPooledPerKey + (array.hd || 0); i<src.length && array.length < max; i++)
 						array.push(src[i]);
 			}
 		}
 
-		// Add nodes that were used during render() to nodeGroupsRendered.
-		// If the last render used the positional diff, the in-use NodeGroups are in
-		// this.nodeGroups instead of nodeGroupsRendered.
-		this.nodeGroupsAttachedAvailable = new MultiValueMap();
-		let nga = this.nodeGroupsAttachedAvailable;
-		let source = this.nodeGroupsRendered?.length ? this.nodeGroupsRendered : this.nodeGroups;
-		if (source)
-			for (let ng of source)
+		// Offer the NodeGroups the last render left in place for reuse.  Every path that renders
+		// NodeGroups — the positional diff, the keyed diff and applyGeneric alike — leaves them in
+		// this.nodeGroups, so that one array is always the set still standing in the DOM.
+		let nga = this.nodeGroupsAttachedAvailable = new MultiValueMap();
+		if (this.nodeGroups)
+			for (let ng of this.nodeGroups)
 				nga.add(ng.closeKey, ng);
-
-		this.nodeGroupsRendered = null;
 	}
 
 
@@ -844,7 +1326,7 @@ export default class PathToNodes extends Path {
 		// This shaves about 5ms off the partialUpdate benchmark.
 		result = this.nodesCache;
 		if (result) {
-			//#IFDEV
+			//#IFDEBUG
 			//this.checkNodesCache();
 			//#ENDIF
 			return result
@@ -867,7 +1349,7 @@ export default class PathToNodes extends Path {
 		return result;
 	}
 
-	//#IFDEV
+	//#IFDEBUG
 
 	get debug() {
 		return [
@@ -921,12 +1403,55 @@ export default class PathToNodes extends Path {
 // Shared empty array for paths whose nodeGroups were never created.  Never mutated.
 const emptyNodeGroups = [];
 
+// How many changed h.map() positions applyMapped() collects before it stops to work out what
+// kind of change it is looking at (see the probe in applyMapped).  Below this every ordinary
+// edit — a selection, a partial update — is handled without asking.
+const missProbeThreshold = 256;
+
+// How many of those positions may need matching against each other before the general keyed
+// diff, with its key map and longest-increasing-subsequence, becomes the cheaper tool.  The
+// cross-match here is quadratic, which only pays while the number of moved rows is small.
+const maxDisplacedMisses = 16;
+
+// How far applyMapped() looks around a position to pick a shifted list's rows back up.  One
+// insertion or removal moves everything by one, which the first step finds; a handful at once
+// still lands inside this window, and past it the item map takes over.
+const shiftSearchDistance = 4;
+
+// How far ahead it looks to recognize a block of inserted rows, by finding the item that the
+// old row standing here now belongs to.  Wider than the search above because inserting a page
+// of rows at once is ordinary, and because this search only runs while the walk is still in
+// step and stops it dead the first time it fails — so its worst case is one pass of this many
+// comparisons per render, against building a map of every row in the list.
+const insertSearchDistance = 64;
+
 // Most detached NodeGroups kept per close key.  Bounds memory growth after very large
 // lists are cleared while keeping pooled rows for every typical re-create pattern.
 // Lowering this (e.g. to 1000) cuts retained memory ~7x after clearing a 10k-row list,
 // but makes re-creating such a list ~2x slower since most rows are built fresh.
 const maxPooledPerKey = 10000;
 
+
+// Cache for keyOf(): list rows share one html array, so the Shell lookup that finds where the
+// key=${} expression sits happens once per list rather than once per row.
+let lastKeyHtml = null, lastKeyIndex = -1;
+
+/**
+ * The list key of an item, or undefined when it has none.
+ * @param t {Template|string}
+ * @return {*} */
+function keyOf(t) {
+	if (typeof t === 'string')
+		return undefined;
+	if (t.key !== undefined) // JSX templates carry the key directly.
+		return t.key;
+	if (t.html !== lastKeyHtml) {
+		lastKeyHtml = t.html;
+		lastKeyIndex = Shell.get(t.html, t.svgMode).keyIndex;
+	}
+	return lastKeyIndex >= 0 ? t.exprs[lastKeyIndex] : undefined;
+}
+
 /**
  * @param text {string}
  * @return {Template} */
@@ -963,6 +1488,21 @@ function itemClose(ng, item) {
 	return tpl.html === item.html && tpl.svgMode === item.svgMode;
 }
 
+/**
+ * Is this item somewhere in the list the previous render drew, i.e. did it move rather than
+ * appear?  A plain scan rather than a map, because it runs once and usually answers on the way
+ * past.
+ * @param lastItems {Array}
+ * @param oldLen {int}
+ * @param item {*}
+ * @return {boolean} */
+function itemIsElsewhere(lastItems, oldLen, item) {
+	for (let i=0; i<oldLen; i++)
+		if (lastItems[i] === item)
+			return true;
+	return false;
+}
+
 /**
  * Insert all of ng's nodes before anchor within parent.
  * @param parent {Node}