solarite 0.7.0 → 0.8.0

package/src/Shell.js

@@ -2,7 +2,6 @@ import assert from "./assert.js";
 import Path from "./Path.js";
 import Util from "./Util.js";
 import Globals from "./Globals.js";
-import HtmlParser from "./HtmlParser.js";
 import PathToEvent from "./PathToEvent.js";
 import PathToAttribValue from "./PathToAttribValue.js";
 import PathToAttribs from "./PathToAttribs.js";
@@ -21,7 +20,7 @@ export default class Shell {
 
 	/**
 	 * @type {DocumentFragment|Text} DOM parent of the shell's nodes. */
-	fragment;
+	docFrag;
 
 	/** @type {Path[]} Paths to where expressions should go. */
 	paths = [];
@@ -41,10 +40,22 @@ export default class Shell {
 	/** @type {boolean} True if any of this Shell's own paths is a PathToComponent. */
 	hasComponentPaths = false;
 
+	/** @type {boolean} True if any path binds an attribute that's a live HTML property
+	 * (checked, value, selected — Util.isHtmlProp).  Users flip those underneath the template,
+	 * so "expression unchanged" doesn't mean "DOM unchanged" and the skip shortcuts exempt them. */
+	hasLivePropPaths = false;
+
 	/** @type {boolean} True if every path consumes exactly one expression and none are components.
 	 * Lets NodeGroup.applyExprs() use a fast loop without allocating per-path expression arrays. */
 	pathsSingleExpr = false;
 
+	/** @type {boolean} True when a NodeGroup whose values are unchanged still has work to do:
+	 * components re-render so changes deeper in the tree surface, and live HTML properties are
+	 * rewritten because a click can flip them underneath the cached expression.  The list scans
+	 * check this before calling PathToNodes.refreshSameItem(), so the overwhelmingly common
+	 * unchanged row costs one field read instead of a call. */
+	needsRefresh = false;
+
 	/** @type {boolean} True if this Shell has any ids, styles, or scripts. */
 	hasEmbeds = false;
 
@@ -60,6 +71,52 @@ export default class Shell {
 	 * with no per-instance Path objects.  See the stampPaths setup in the constructor. */
 	stampable = false;
 
+	// The remaining fields are only filled in for some shells (resolve program, stampable),
+	// but they're all declared here so every Shell instance shares one hidden class.
+	// NodeGroup's per-row code (its constructor, applyStamp, resolveStampSlots) reads these
+	// off whichever shell it's given, and a single shape keeps those loads monomorphic.
+
+	/** @type {?string} The Template close key, cached here by the NodeGroup constructor so
+	 * each new template row skips a WeakMap lookup.  See Template.getCloseKey(). */
+	closeKey;
+
+	/** @type {?int[]} The resolve program: flat [parentSlot, childIndex] pairs in dependency
+	 * order; pair i fills slot i+1, slot 0 being the fragment.  Built by buildResolveProgram();
+	 * undefined for shells with components. */
+	resolveOps;
+
+	/** @type {?Node[]} Reusable scratch array for resolved nodes; safe because resolution
+	 * never re-enters. */
+	resolveSlots;
+
+	// The stamp program, set only when stampable is true:
+
+	/** @type {?int[]} Indexes of PathToNodes paths, checked for primitive exprs before stamping. */
+	nodesPathIdx;
+
+	/** @type {?Path[]} One shared stamper per path; nodeMarker/parentNg are set per use. */
+	stampPaths;
+
+	/** @type {?Uint8Array} Opcode per path; see the stamp-program comment in the constructor. */
+	stampOp;
+
+	/** @type {?Uint16Array} paths[i].markerSlot, in a flat array so the hot loop
+	 * doesn't load the Path object to find its slot. */
+	stampSlot;
+
+	/** @type {?Path[]} Per-path extra the stamp program needs: the event stamper for op 3
+	 * (it carries delegatedKey and eventName), the attribute name for op 4, null otherwise. */
+	stampAux;
+
+	/** @type {?string[]} The delegatable event names this shell binds, so a loop can register
+	 * their dispatchers once for the whole run of rows instead of testing every bound node. */
+	stampEventNames;
+
+	/** @type {?Uint8Array} Per-path flags the in-place rewrite loop needs, so it reads one byte
+	 * from a flat array instead of two properties from a Path object it otherwise wouldn't
+	 * touch.  Bit 1 = the path binds a live HTML property, bit 2 = it's a whole-parent child. */
+	stampFlags;
+
 	/**
 	 * Create the nodes but without filling in the expressions.
 	 * This is useful because the expression-less nodes created by a template can be cached.
@@ -69,13 +126,13 @@ export default class Shell {
 		if (!html)
 			return;
 
-		//#IFDEV
+		//#IFDEBUG
 		this._html = html.join('');
 		//#ENDIF
 
 		// If no html tags or entities, just create a text node.
 		if (html.length === 1 && !html[0].match(/[<&]/)) {
-			this.fragment = Globals.doc.createTextNode(html[0]);
+			this.docFrag = Globals.doc.createTextNode(html[0]);
 			return;
 		}
 
@@ -93,29 +150,29 @@ export default class Shell {
 				let frag = Globals.doc.createDocumentFragment();
 				while (svgEl.firstChild)
 					frag.append(svgEl.firstChild);
-				this.fragment = frag;
+				this.docFrag = frag;
 			}
 			else {
 				template.innerHTML = htmlWithPlaceholders;
-				this.fragment = template.content;
+				this.docFrag = template.content;
 			}
 		}
 		else { // Create one text node, so shell isn't empty and NodeGroups created from it have something to point the startNode and endNode at.
 			template.content.append(Globals.doc.createTextNode(''))
-			this.fragment = template.content;
+			this.docFrag = template.content;
 		}
 
 		// 1b. Remove whitespace-only text nodes inside table-structure elements.
 		// The parser foster-parents non-whitespace text out of tables, and whitespace-only
 		// text between cells/rows is never rendered, so removing it is invisible.
 		// Smaller fragments make cloning, path resolution, and insertion faster.
-		stripTableWhitespace(this.fragment);
+		stripTableWhitespace(this.docFrag);
 
 		// 2. Find placeholders
 		let node;
 		let toRemove = [];
 		let placeholdersUsed = 0;
-		const walker = Globals.doc.createTreeWalker(this.fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
+		const walker = Globals.doc.createTreeWalker(this.docFrag, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
 		while (node = walker.nextNode()) {
 
 			// Remove previous elements after each iteration, so paths will still be calculated correctly.
@@ -133,13 +190,20 @@ export default class Shell {
 					// The reserved key attribute identifies this template within a keyed list.
 					// It's consumed here and never written to the DOM or passed to components.
 					if (attr.name === 'key') {
+
+						// These three are template-authoring mistakes, and every one of them fails SILENTLY if
+						// it isn't caught: the reconciler would key rows on a garbage value and reuse the wrong
+						// DOM, with nothing reported.  So they ship, unlike the assertions elsewhere in this
+						// file.  The cost is one regex split per unique template \u2014 never per render, never per
+						// row \u2014 which is why they are affordable to keep.
 						let parts = attr.value.split(/[\ue000-\uf8ff]/g);
 						if (parts.length !== 2 || parts[0] !== '' || parts[1] !== '')
-							throw new Error(`The key attribute is reserved and must be a single expression: key=\${...}`);
-						if (node.parentNode !== this.fragment)
-							throw new Error(`The key attribute must be on a top-level element of its template.`);
+							throw new Error(`Solarite: key must be one whole expression.`);
+						if (node.parentNode !== this.docFrag)
+							throw new Error(`Solarite: key must be on a top-level element.`);
 						if (this.keyIndex >= 0)
-							throw new Error(`A template can have only one key attribute.`);
+							throw new Error(`Solarite: duplicate key attribute.`);
+
 						this.keyIndex = attr.value.charCodeAt(0) - attribPlaceholder;
 
 						let path = new PathToKey(null, node);
@@ -184,19 +248,33 @@ export default class Shell {
 							}
 
 							placeholdersUsed += parts.length - 1;
-							// In svgMode, setting typed SVG attributes (viewBox, r, etc.) with the placeholders
-							// stripped out makes the browser log parse errors, both here and when the fragment is cloned.
-							// Remove the attribute instead; apply() recreates it with the real values.
-							// Event attributes bound to a single expression are removed because they bind via
-							// addEventListener; leaving an empty onclick="" attribute violates a strict CSP when the event fires.
-							if (svgMode || (isEvent && !nonEmptyParts))
+							// An attribute whose whole value is one expression is removed from the shell:
+							// its stamped value is always the empty string, so every clone would carry a
+							// useless empty attribute that costs storage on creation and a slot in the
+							// element's attribute list forever, and apply() writes the real value anyway
+							// (a missing attribute reads back as '', so an empty expression still writes
+							// nothing).  Event attributes must be removed for the same reason plus a
+							// stricter one: an empty onclick="" violates a strict CSP when the event fires.
+							// In svgMode, setting typed SVG attributes (viewBox, r, etc.) with the
+							// placeholders stripped out makes the browser log parse errors, both here and
+							// when the fragment is cloned, so those are removed whether or not they're whole.
+							if (svgMode || !nonEmptyParts)
 								node.removeAttribute(attr.name);
-							else try {
+
+							// setAttribute throws only when the template author wrote a name the browser
+							// refuses, such as one holding a space or a quote.  That name comes from a tagged
+							// template literal's static text, so it is a typo that surfaces the first time the
+							// template renders and can never appear later or for only some users.  Development
+							// therefore wraps the call to rethrow with the attribute name and the tag included,
+							// because the browser's own DOMException names neither and leaves the author
+							// hunting.  Production ships the bare call and lets that DOMException through: the
+							// friendlier wording is only worth its bytes to whoever can still fix the template.
+							else /*#IFDEBUG*/try {/*#ENDIF*/
 								node.setAttribute(attr.name, parts.join(''));
-							}
+							/*#IFDEBUG*/}
 							catch (e) {
 								throw new Error(`Error setting attribute "${attr.name}" on node <${node.tagName}>: ${e.message}`);
-							}
+							}/*#ENDIF*/
 						}
 					}
 				}
@@ -218,7 +296,7 @@ export default class Shell {
 			else if (node.nodeType === 8 && node.nodeValue === '!✨!') {
 
 				if (node?.parentNode?.closest && node?.parentNode?.closest('[contenteditable]'))
-					throw new Error(`Contenteditable can't have expressions inside them. Use <div contenteditable value="\${...}"> instead.`);
+					throw new Error(`Solarite: no \${...} inside contenteditable; use value="\${...}".`);
 
 				let parent = node.parentNode;
 
@@ -242,7 +320,7 @@ export default class Shell {
 						nodeBefore = Globals.doc.createComment('Path:'+this.paths.length);
 						node.parentNode.insertBefore(nodeBefore, node)
 					}
-					/*#IFDEV*/assert(nodeBefore);/*#ENDIF*/
+					/*#IFDEBUG*/assert(nodeBefore);/*#ENDIF*/
 
 					// Get the next node.
 					let nodeMarker;
@@ -257,7 +335,7 @@ export default class Shell {
 						nodeMarker = node;
 						nodeMarker.textContent = 'PathEnd:'+ this.paths.length;
 					}
-					/*#IFDEV*/assert(nodeMarker);/*#ENDIF*/
+					/*#IFDEBUG*/assert(nodeMarker);/*#ENDIF*/
 
 					let path = new PathToNodes(nodeBefore, nodeMarker);
 					this.paths.push(path);
@@ -265,11 +343,6 @@ export default class Shell {
 				}
 			}
 
-			// Comments become text nodes when inside textareas.
-			else if (node.nodeType === 3 && node.parentNode?.tagName === 'TEXTAREA' && node.textContent.includes('<!--!✨!-->'))
-				throw new Error(`Textarea can't have expressions inside them. Use <textarea value="\${...}"> instead.`);
-			
-			
 			// Sometimes users will comment out a block of html code that has expressions.
 			// Here we look for expressions in comments.
 			// We don't actually update them dynamically, but we still add paths for them.
@@ -283,29 +356,39 @@ export default class Shell {
 				}
 			}
 
-			// Replace comment placeholders inside script and style tags, which have become text nodes.
-			else if (node.nodeType === 3 && ['SCRIPT', 'STYLE'].includes(node.parentNode?.nodeName)) { // Node.TEXT_NODE
-				let parts = node.textContent.split(commentPlaceholder);
-				if (parts.length > 1) {
-
-					let placeholders = [];
-					for (let i = 0; i<parts.length; i++) {
-						let current = Globals.doc.createTextNode(parts[i]);
-						node.parentNode.insertBefore(current, node);
-						if (i > 0)
-							placeholders.push(current)
-					}
-
-					for (let i=0, node; node=placeholders[i]; i++) {
-						let path = new PathToNodes(node.previousSibling, node);
-						this.paths.push(path);
-						placeholdersUsed ++;
+			// A few elements have raw-text bodies, which the html parser reads as literal characters
+			// rather than as markup.  A comment placeholder written inside one therefore never becomes
+			// a comment node; it arrives here as ordinary text.  A textarea can't support expressions
+			// in its body at all, while script and style can, by splitting their text around each
+			// placeholder so that every expression gets a text node of its own to write into.
+			else if (node.nodeType === 3) { // Node.TEXT_NODE
+				let parentName = node.parentNode?.nodeName;
+
+				if (parentName === 'TEXTAREA' && node.textContent.includes(commentPlaceholder))
+					throw new Error(`Solarite: no \${...} inside textarea; use value="\${...}".`);
+
+				else if (parentName === 'SCRIPT' || parentName === 'STYLE') {
+					let parts = node.textContent.split(commentPlaceholder);
+					if (parts.length > 1) {
+
+						// Every part is inserted before the original node, in order, so from the second
+						// part onward the text node made on the previous iteration is already sitting
+						// immediately before this one and serves as the new path's nodeBefore.
+						for (let i = 0; i<parts.length; i++) {
+							let current = Globals.doc.createTextNode(parts[i]);
+							node.parentNode.insertBefore(current, node);
+							if (i > 0) {
+								let path = new PathToNodes(current.previousSibling, current);
+								this.paths.push(path);
+								placeholdersUsed ++;
+
+								/*#IFDEBUG*/path.verify();/*#ENDIF*/
+							}
+						}
 
-						/*#IFDEV*/path.verify();/*#ENDIF*/
+						// Removing it here will mess up the treeWalker.
+						toRemove.push(node);
 					}
-
-					// Removing them here will mess up the treeWalker.
-					toRemove.push(node);
 				}
 			}
 		}
@@ -314,31 +397,37 @@ export default class Shell {
 		// Less than or equal because there can be one path to multiple expressions
 		// if those expressions are in the same attribute value.
 		if (placeholdersUsed !== html.length-1)
-			throw new Error(`Could not parse expressions in template.  Check for duplicate attributes or malformed html: ${html.join('${...}')}`);
+			throw new Error(`Solarite: bad html or duplicate attribute: ${html.join('${...}')}`);
 
 		for (let path of this.paths) {
-			if (path.nodeBefore)
-				path.nodeBeforeIndex = Array.prototype.indexOf.call(path.nodeBefore.parentNode.childNodes, path.nodeBefore)
+			// -1 when the path has no nodeBefore.  Assigned unconditionally so every shell path
+			// of a given class takes the same property-addition order and shares one hidden class.
+			path.nodeBeforeIndex = path.nodeBefore
+				? Array.prototype.indexOf.call(path.nodeBefore.parentNode.childNodes, path.nodeBefore)
+				: -1;
 
 			// Must be calculated after we remove the toRemove nodes:
 			path.nodeMarkerPath = Path.get(path.nodeMarker)
-
-
 		}
 
 		this.findEmbeds();
-		this.buildResolveProgram();
 
+		// This scan must run before buildResolveProgram(), which skips shells with components
+		// and reads hasComponentPaths rather than walking the paths a second time.
 		this.pathsSingleExpr = true;
 		for (let path of this.paths) {
 			if (path instanceof PathToComponent) {
 				this.hasComponentPaths = true;
 				this.pathsSingleExpr = false;
-				break; // Both facts are now decided.
 			}
-			if (path.getExpressionCount() !== 1)
-				this.pathsSingleExpr = false; // Keep scanning for components.
+			else if (path.getExpressionCount() !== 1)
+				this.pathsSingleExpr = false;
+			if (path.isHtmlProperty) // needs the full scan — no early break
+				this.hasLivePropPaths = true;
 		}
+		this.needsRefresh = this.hasComponentPaths || (this.hasLivePropPaths && this.pathsSingleExpr);
+
+		this.buildResolveProgram();
 
 		// Stampable shells create NodeGroups without allocating any Path objects:
 		// NodeGroup.applyStamp() writes expressions through these shared stamper paths,
@@ -363,17 +452,50 @@ export default class Shell {
 			}
 			if (ok) {
 				this.stampable = true;
-
-				/** @type {int[]} Indexes of PathToNodes paths, checked for primitive exprs before stamping. */
 				this.nodesPathIdx = nodesIdx;
-
-				/** @type {Path[]} One shared stamper per path; nodeMarker/parentNg are set per use. */
 				this.stampPaths = this.paths.map(p => p.cloneWithNodes(null, p.nodeMarker));
 
+				// Compiled stamp program: one opcode per path lets applyStamp() write a fresh
+				// row through a flat branch chain instead of dispatching applySingle() per path.
+				// 0 = generic (shared stamper fallback), 1 = list key (no DOM), 2 = wholeParent
+				// child text, 3 = delegatable single-expression event (written as node expandos
+				// when the root delegates, the default).
+				let n = this.paths.length;
+				this.stampOp = new Uint8Array(n);
+				this.stampSlot = new Uint16Array(n);
+				this.stampAux = new Array(n).fill(null);
+				this.stampFlags = new Uint8Array(n);
+
+				let eventNames = null;
+				for (let i=0; i<n; i++) {
+					let p = this.paths[i], sp = this.stampPaths[i];
+					this.stampSlot[i] = p.markerSlot;
+					this.stampFlags[i] = (sp.isHtmlProperty ? 1 : 0) | (sp.wholeParent ? 2 : 0);
+					if (p instanceof PathToKey)
+						this.stampOp[i] = 1;
+					else if (sp.wholeParent)
+						this.stampOp[i] = 2;
+					else if (sp instanceof PathToEvent && sp.delegatedKey !== undefined && !sp.attrValue) {
+						this.stampOp[i] = 3;
+						this.stampAux[i] = sp;
+						(eventNames ??= []).push(sp.eventName);
+					}
+
+					// A plain attribute holding one whole expression.  The shell no longer carries
+					// the attribute at all (see the placeholder handling above), so on a freshly
+					// cloned row the value is known to be absent and a string can be written
+					// without first reading back what's there.
+					else if (sp instanceof PathToAttribValue && !sp.attrValue && !sp.isHtmlProperty
+						&& !sp.isComponentAttrib) {
+						this.stampOp[i] = 4;
+						this.stampAux[i] = sp.attribName;
+					}
+				}
+				this.stampEventNames = eventNames;
 			}
 		}
 
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		/*#IFDEBUG*/this.verify();/*#ENDIF*/
 	}
 
 	/**
@@ -384,42 +506,64 @@ export default class Shell {
 	 * @param htmlChunks {string[]}
 	 * @returns {string} Html with the placeholders in place. */
 	static addPlaceholders(htmlChunks) {
-		let result = [];
+		let result = '';
+
+		// Where the tokenizer is as it walks the chunks.  An expression can sit in the middle of an attribute
+		// value, so both of these have to survive from one chunk to the next.  Nothing else has to: an
+		// expression anywhere inside a tag gets the same attribute placeholder, so the machine only has to
+		// know whether it is inside a tag at all, and whether a quoted value is currently open.
+		let inTag = false; // True from the '<' that opens a tag or comment through the '>' that closes it.
+		let quote = null; // The quote character that opened the attribute value we're inside of: null, '"', or "'".
 
-		let htmlParser = new HtmlParser(); // Reset the context.
 		for (let i = 0; i < htmlChunks.length; i++) {
-			let lastHtml = htmlChunks[i];
+			let html = htmlChunks[i];
 
 			// Append -solarite-placholder to web component tags, so we can pass args to them when they're instantiated.
-			let lastIndex = 0;
-			let context = htmlParser.parse(lastHtml, (html, index, prevContext/*, nextContext*/) => { // This function is called every time the html context changes.
-				if (lastIndex !== index) {
-					let token = html.slice(lastIndex, index);
-
-					if (prevContext === HtmlParser.Tag) {
-						// Find Web Component tags and append -solarite-placeholder to their tag names
-						// This way we can gather their constructor arguments and their children before we call their constructor.
-						// Later, PathToComponent.apply() will replace them with the real components.
-						// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-						const isWebComponentTagName = /^<\/?[a-z][a-z0-9]*-[a-z0-9-]+/i; // a dash in the middle
-						token = token.replace(isWebComponentTagName, match => match + '-SOLARITE-PLACEHOLDER'); // caps to match other instances of this string, for better compression.
+			let lastIndex = 0; // Start of the run of this chunk not yet copied into result.
+			for (let j = 0; j < html.length; j++) {
+				const char = html[j];
+
+				if (!inTag) {
+					if (char === '<' && html[j + 1].match(/[/a-z!]/i)) { // Start of a tag or comment.
+						inTag = true;
+
+						// A component suffix can only ever be added right here, at the '<' that opens the tag, so
+						// the name is matched on the spot with a sticky regex rather than collected into a buffer
+						// and matched later.  The greedy tag-name class can't run past the name, because every
+						// character that can follow a tag name is outside it.
+						isWebComponentTagName.lastIndex = j;
+						let match = isWebComponentTagName.exec(html);
+						if (match) {
+							let end = j + match[0].length;
+							result += html.slice(lastIndex, end) + '-SOLARITE-PLACEHOLDER';
+							lastIndex = end;
+						}
 					}
+				}
 
-					result.push(token);
+				// Inside a tag, only two characters end anything: the quote that closes the value we're in, or,
+				// when we're not in one, the '>' that closes the tag.  Attribute names, '=', unquoted values and
+				// whitespace all need no handling at all.
+				else if (quote) {
+					if (char === quote)
+						quote = null;
 				}
-				lastIndex = index;
-			});
+				else if (char === '"' || char === "'")
+					quote = char;
+				else if (char === '>')
+					inTag = false;
+			}
+
+			result += html.slice(lastIndex);
 
 			// Insert placeholders
-			if (i < htmlChunks.length - 1) {
-				if (context === HtmlParser.Text)
-					result.push(commentPlaceholder) // Comment Placeholder. because we can't put text in between <tr> tags for example.
-				else
-					result.push(String.fromCharCode(attribPlaceholder + i));
-			}
+			if (i < htmlChunks.length - 1)
+				result += inTag
+					? String.fromCharCode(attribPlaceholder + i)
+					: commentPlaceholder; // Comment Placeholder. because we can't put text in between <tr> tags for example.
 		}
 
-		return result.join('');
+		return result;
 	}
 
 	/**
@@ -431,21 +575,18 @@ export default class Shell {
 	 * this.ids
 	 * this.staticComponents */
 	findEmbeds() {
-		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('script'), el => Path.get(el))
+		this.scripts = Array.prototype.map.call(this.docFrag.querySelectorAll('script'), el => Path.get(el))
 
 		// TODO: only find styles that have Paths in them?
-		this.styles = Array.prototype.map.call(this.fragment.querySelectorAll('style'), el => Path.get(el))
+		this.styles = Array.prototype.map.call(this.docFrag.querySelectorAll('style'), el => Path.get(el))
 
-		let idEls = this.fragment.querySelectorAll('[id],[data-id]');
-
-		// Check for valid id names.
-		for (let el of idEls) {
-			let id = el.getAttribute('data-id') || el.getAttribute('id')
-			if (Globals.div.hasOwnProperty(id))
-				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement id property.`)
-		}
-
-		this.ids = Array.prototype.map.call(idEls, el => Path.get(el))
+		// An id that would clobber a built-in element property is reported by Util.bindId(), which
+		// asks the real component object, with `in`, at the moment the binding happens.  The check
+		// that used to stand here asked Globals.div.hasOwnProperty(id) instead, and a freshly
+		// created element has no own properties at all — every DOM property an element exposes
+		// lives on its interface prototype — so that test could never be true and the error it
+		// guarded was never reachable.
+		this.ids = Array.prototype.map.call(this.docFrag.querySelectorAll('[id],[data-id]'), el => Path.get(el))
 
 		this.hasEmbeds = this.ids.length > 0 || this.styles.length > 0 || this.scripts.length > 0;
 	}
@@ -456,25 +597,37 @@ export default class Shell {
 	 * Replaces per-path root-to-node walks in the hot NodeGroup creation path.
 	 * Skipped for shells with components, whose clone() has special attribPaths behavior. */
 	buildResolveProgram() {
-		let hasComponents = false;
-		for (let path of this.paths)
-			if (path instanceof PathToComponent) {
-				hasComponents = true;
-				break;
-			}
-		if (hasComponents || !this.paths.length)
+		if (this.hasComponentPaths || !this.paths.length)
 			return;
 
 		let ops = [];
 		let slotOf = new Map();
-		let frag = this.fragment;
+		let frag = this.docFrag;
 		let nextSlot = 1;
 		let getSlot = node => {
 			if (node === frag)
 				return 0;
 			let s = slotOf.get(node);
 			if (s === undefined) {
-				ops.push(getSlot(node.parentNode), Array.prototype.indexOf.call(node.parentNode.childNodes, node));
+				// Two ways to reach a node, costing one pointer step each: walk forward from an
+				// already-resolved earlier sibling, or take the parent's firstChild and walk
+				// forward.  Sibling steps win whenever they're no more numerous, and they can
+				// also spare the parent a slot of its own — in a row of cells, resolving each
+				// <td> from the previous one is one step instead of firstChild plus its index.
+				let d = 0, from = -1;
+				for (let sib = node.previousSibling; sib; sib = sib.previousSibling) {
+					d++;
+					let ss = slotOf.get(sib);
+					if (ss !== undefined) {
+						from = ss;
+						break;
+					}
+				}
+				let index = Array.prototype.indexOf.call(node.parentNode.childNodes, node);
+				if (from >= 0 && d <= index + 1)
+					ops.push(from, -d); // A negative step count means "walk nextSibling from that slot".
+				else
+					ops.push(getSlot(node.parentNode), index);
 				s = nextSlot++;
 				slotOf.set(node, s);
 			}
@@ -485,10 +638,7 @@ export default class Shell {
 			path.beforeSlot = path.nodeBefore ? getSlot(path.nodeBefore) : -1;
 		}
 
-		/** @type {?int[]} Flat [parentSlot, childIndex] pairs; pair i fills slot i+1. */
 		this.resolveOps = ops;
-
-		/** @type {Node[]} Reusable scratch array for resolved nodes; safe because resolution never re-enters. */
 		this.resolveSlots = new Array(nextSlot);
 
 		// A lone root element means slot 1 is always that element (the first op pair is [0, 0]),
@@ -523,15 +673,15 @@ export default class Shell {
 		lastSvgMode = svgMode;
 		lastShell = result;
 
-		/*#IFDEV*/result.verify();/*#ENDIF*/
+		/*#IFDEBUG*/result.verify();/*#ENDIF*/
 		return result;
 	}
 
-	//#IFDEV
+	//#IFDEBUG
 	// For debugging only:
 	verify() {
 		for (let path of this.paths) {
-			assert(this.fragment.contains(path.getParentNode()))
+			assert(this.docFrag.contains(path.getParentNode()))
 			path.verify();
 		}
 	}
@@ -541,6 +691,15 @@ export default class Shell {
 
 const commentPlaceholder = `<!--!✨!-->`;
 
+// A tag name with a dash in the middle, which is what makes an element a web component.  addPlaceholders()
+// tests this at each '<' that opens a tag, and a match gets -solarite-placeholder appended to its tag name.
+// That way we can gather a component's constructor arguments and its children before we call its constructor;
+// later PathToComponent.applyAll() replaces the placeholder tag with the real component.  The suffix is written in
+// caps wherever it appears, so that the several copies of it in this project compress well.  It's sticky rather
+// than anchored so it can be tested at an offset within the chunk instead of against a sliced-out token.
+// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
+const isWebComponentTagName = /<\/?[a-z][a-z0-9]*-[a-z0-9-]+/iy;
+
 // Elements whose whitespace-only text children are never rendered.
 const tableTags = ['TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR'];