solarite 0.7.0 → 0.8.0

package/src/NodeGroup.js

@@ -6,9 +6,54 @@ import Path from "./Path.js";
 import Globals from './Globals.js';
 import PathToComponent from "./PathToComponent.js";
 import PathToNodes from "./PathToNodes.js";
+import {ensureDelegatedDispatcher, delegatedRootKey} from "./PathToAttribValue.js";
 
 /** @typedef {boolean|string|number|function|Object|Array|Date|Node|Template} Expr */
 
+/** Stand-in Shell for text NodeGroups, which are never parsed from html.  Its default field
+ * values (no components, no live properties, no single-expression paths) are exactly what the
+ * per-row code must see for a bare Text node, so ng.shell is never null. */
+const textShell = new Shell();
+
+// The Shell whose delegated dispatchers a root last registered, kept on the RootNodeGroup so
+// that a run of rows checks one field instead of asking at every bound node.  A Symbol rather
+// than a declared field, since only root NodeGroups ever carry it and a declared field would
+// cost a slot on every row.  The delegation mode isn't part of it: it comes from the root's
+// render options, which are fixed when the root is created.
+const lastStampedShellKey = Symbol('solariteStampedShell');
+
+/**
+ * Run a Shell's precomputed resolve program (see Shell.buildResolveProgram) into the shell's
+ * shared slots array, which the caller has already seeded with its starting node.
+ * Each node is reached with firstChild/nextSibling pointer walks instead of childNodes[index];
+ * the live NodeList indexing is markedly slower, and the indices are small (markers are
+ * elements, often the first child after whitespace stripping).  A negative step count means the
+ * program reaches this node by walking forward from an earlier sibling's slot instead of from
+ * its parent.
+ * @param slots {Node[]} The shell's shared scratch array; slot 0 is the fragment.
+ * @param ops {int[]} Flat [parentSlot, childIndex] pairs in dependency order.
+ * @param i {int} Index of the first op pair to run; earlier pairs are pre-seeded by the caller.
+ * @param s {int} Slot that pair fills.
+ * @return {Node[]} slots, so callers can resolve and use it in one expression. */
+function runResolveOps(slots, ops, i, s) {
+	for (; i<ops.length; i+=2, s++) {
+		let k = ops[i+1], node;
+		if (k < 0) {
+			node = slots[ops[i]];
+			do
+				node = node.nextSibling;
+			while (++k < 0);
+		}
+		else {
+			node = slots[ops[i]].firstChild;
+			for (; k>0; k--)
+				node = node.nextSibling;
+		}
+		slots[s] = node;
+	}
+	return slots;
+}
+
 /**
  * A group of Nodes instantiated from a Shell, with Expr's filled in.
  *
@@ -42,11 +87,11 @@ export default class NodeGroup {
 	 * matched by PathToNodes.applyKeyed().  Undefined for unkeyed NodeGroups. */
 	key;
 
-	/** @type {boolean} True if any of this NodeGroup's own paths is a PathToComponent. */
-	hasComponentPaths = false;
-
-	/** @type {boolean} True if every path consumes exactly one expression and none are components. */
-	pathsSingleExpr = false;
+	/** @type {Shell} The Shell this NodeGroup was cloned from, so the per-row code can read
+	 * hasComponentPaths/hasLivePropPaths/pathsSingleExpr and the stamp program off it instead
+	 * of copying them onto every instance and re-looking the Shell up on every apply.
+	 * Text NodeGroups get the shared empty textShell, which reports false for all of them. */
+	shell;
 
 	/** @type {boolean} True until applyExprs() finishes the first time.
 	 * While true, ancestor node caches can't reference this NodeGroup's nodes, so they don't need invalidation. */
@@ -57,6 +102,11 @@ export default class NodeGroup {
 	 * @type {Node[]} Cached result of getNodes() used only for improving performance.*/
 	nodesCache;
 
+	/** @type {?Node[]} Slot nodes resolved by the first rewriteStamp(); a stamped group's
+	 * element structure never changes while it stays stampable, so they're reused on every
+	 * later rewrite.  Declared here so every NodeGroup keeps one monomorphic hidden class. */
+	stampSlotsCache = null;
+
 	/**
 	 * A map between <style> Elements and their text content.
 	 * This lets NodeGroup.updateStyles() see when the style text has changed.
@@ -78,7 +128,7 @@ export default class NodeGroup {
 		this.rootNg = parentPath?.parentNg?.rootNg || this;
 		this.parentPath = parentPath;
 
-		/*#IFDEV*/assert(this.rootNg);/*#ENDIF*/
+		/*#IFDEBUG*/assert(this.rootNg);/*#ENDIF*/
 		this.template = template;
 
 		// JSX templates carry their list key on the Template (tagged templates instead set it via
@@ -89,24 +139,22 @@ export default class NodeGroup {
 		// If it's just a text node, skip a bunch of unnecessary steps.
 		// el can be an existing Text node to adopt, from PathToNodes' bare-text fast path.
 		if (template.isText) {
+			this.shell = textShell;
 			this.closeKey = template.getCloseKey();
 			this.startNode = this.endNode = el || Globals.doc.createTextNode(template.html[0]);
 		}
 
 		else {
 			// Get a cached version of the parsed and instantiated html, and Paths:
-			const shell = Shell.get(template.html, template.svgMode);
+			const shell = this.shell = Shell.get(template.html, template.svgMode);
 
 			// The shell caches the close key so each new template doesn't repeat the WeakMap lookup.
 			this.closeKey = shell.closeKey ??= template.getCloseKey();
 
-			this.hasComponentPaths = shell.hasComponentPaths;
-			this.pathsSingleExpr = shell.pathsSingleExpr;
-
 			// A lone root element is cloned directly, skipping a throwaway fragment wrapper.
 			// Only for child NodeGroups; RootNodeGroup's grafting expects a fragment.
 			if (shell.singleRoot && parentPath !== null) {
-				const clone = shell.fragment.firstChild.cloneNode(true);
+				const clone = shell.docFrag.firstChild.cloneNode(true);
 				this.startNode = this.endNode = clone;
 
 				// Stampable shells skip path creation entirely; the first applyExprs() routes
@@ -115,7 +163,7 @@ export default class NodeGroup {
 					this.setPathsFromFragment(clone, shell, 0, true);
 			}
 			else {
-				const shellFragment = shell.fragment.cloneNode(true);
+				const shellFragment = shell.docFrag.cloneNode(true);
 
 				if (shellFragment.nodeType === 11) { // DocumentFragment
 					this.startNode = shellFragment.firstChild;
@@ -127,7 +175,7 @@ export default class NodeGroup {
 			}
 		}
 
-		//#IFDEV
+		//#IFDEBUG
 		this.verify();
 		//#ENDIF
 	}
@@ -158,10 +206,14 @@ export default class NodeGroup {
 	 * Dispatches expression handling to other functions depending on the path type.
 	 * @param exprs {(*|*[]|function|Template)[]}
 	 * @param includeNonComponents {boolean} False to only apply component paths,
-	 * used when the non-component exprs are known to be unchanged. */
-	applyExprs(exprs, includeNonComponents=true) {
-
-		/*#IFDEV*/
+	 * used when the non-component exprs are known to be unchanged.
+	 * @param lastExprs {?Expr[]} The expressions applied last time, when the caller has them.
+	 * Paths that would provably do nothing with an unchanged expression are then skipped —
+	 * see Path.skipIfSame.  A root template's event bindings are the usual beneficiaries:
+	 * they are the same handlers on every render, and re-binding them costs a call apiece. */
+	applyExprs(exprs, includeNonComponents=true, lastExprs=null) {
+
+		/*#IFDEBUG*/
 		this.verify();
 		/*#ENDIF*/
 
@@ -169,14 +221,18 @@ export default class NodeGroup {
 
 		// Fast path: every path consumes exactly one expression and none are components,
 		// so skip the bookkeeping that maps expressions to paths.
-		if (this.pathsSingleExpr) {
+		if (this.shell.pathsSingleExpr) {
 			if (includeNonComponents) {
 				if (paths === null) { // Created from a stampable shell; no paths yet.
 					this.applyStamp(exprs);
 					return;
 				}
-				for (let i = paths.length - 1; i >= 0; i--)
-					paths[i].applySingle(exprs[i]);
+				for (let i = paths.length - 1; i >= 0; i--) {
+					let path = paths[i];
+					if (lastExprs !== null && path.skipIfSame && lastExprs[i] === exprs[i])
+						continue;
+					path.applySingle(exprs[i]);
+				}
 
 				if (this.styles)
 					this.updateStyles();
@@ -203,7 +259,7 @@ export default class NodeGroup {
 		let exprIndex = exprs.length; // Update exprs at paths.
 		let pathExprs = new Array(paths.length); // Store all the expressions that map to a single path.  Only paths to attribute values can have more than one.
 		for (let i = paths.length - 1, path; path = paths[i]; i--) {
-			if (i===0 && path instanceof PathToComponent && path.nodeMarker === this.getRootNode())
+			if (i===0 && path instanceof PathToComponent && path.nodeMarker === this.getRootEl())
 				continue;
 
 			// Get the expressions associated with this path.
@@ -215,15 +271,15 @@ export default class NodeGroup {
 			// They use expressions from the paths that provide their attributes.
 			if (path instanceof PathToComponent) {
 				let attribExprs = pathExprs.slice(i+1, i+1 + path.attribPaths.length); // +1 b/c we move forward from the component path.
-				path.apply(attribExprs);
+				path.applyAll(attribExprs);
 			}
 			else if (includeNonComponents)
-				path.apply(pathExprs[i]);
+				path.applyAll(pathExprs[i]);
 		}
 
 		// If there's leftover expressions, there's probably an issue with the Shell that created this NodeGroup,
 		// and the number of paths not matching.
-		/*#IFDEV*/
+		/*#IFDEBUG*/
 		assert(exprIndex === 0);
 		/*#ENDIF*/
 
@@ -239,7 +295,7 @@ export default class NodeGroup {
 		}
 		this.firstApply = false;
 
-		/*#IFDEV*/
+		/*#IFDEBUG*/
 		this.verify();
 		/*#ENDIF*/
 	}
@@ -251,8 +307,7 @@ export default class NodeGroup {
 	 * falls back to materializing real paths and applying normally.
 	 * @param exprs {Expr[]} */
 	applyStamp(exprs) {
-		let template = this.template;
-		let shell = Shell.get(template.html, template.svgMode);
+		let shell = this.shell;
 
 		// 1. Bail to real paths when any child-node expression isn't a primitive.
 		let nodesIdx = shell.nodesPathIdx;
@@ -268,27 +323,71 @@ export default class NodeGroup {
 			}
 		}
 
-		// 2. Resolve target nodes, then write each expression.
+		// 2. Resolve target nodes, then run the shell's compiled stamp program: a flat
+		// opcode per path replaces per-path applySingle() dispatch (see Shell.stampOp).
 		let slots = this.resolveStampSlots(shell);
-		let paths = shell.paths, stampers = shell.stampPaths;
-		for (let i = paths.length - 1; i >= 0; i--) {
-			let stamper = stampers[i];
-			let marker = slots[paths[i].markerSlot];
-
-			// A wholeParent text path's marker is the (freshly cloned, empty) only-child slot:
-			// write its text directly, skipping applySingle's branching and the shared-stamper
-			// bookkeeping.  Child exprs are primitive here (step 1 bailed otherwise).
-			if (stamper.wholeParent) {
-				let v = exprs[i];
+		let ops = shell.stampOp, slotIdx = shell.stampSlot, aux = shell.stampAux;
+		let stampers = shell.stampPaths;
+		let rootNg = this.rootNg;
+		let root = rootNg.rootEl;
+		let opt = rootNg.renderOptions?.eventDelegation;
+		let delegateDoc = opt === 'document';
+		let delegateAll = opt === undefined || opt === true || delegateDoc;
+
+		// Register this shell's delegated dispatchers once for a whole run of rows.  They live on
+		// the root, not on the bound nodes, so asking per node — as the general binding path has
+		// to — would be a call and a set lookup for every handler in the list.
+		let names = shell.stampEventNames;
+		if (names !== null && delegateAll && rootNg[lastStampedShellKey] !== shell) {
+			for (let k=0; k<names.length; k++)
+				ensureDelegatedDispatcher(root, names[k], delegateDoc);
+			rootNg[lastStampedShellKey] = shell;
+		}
+
+		let firstApply = this.firstApply;
+		for (let i = ops.length - 1; i >= 0; i--) {
+			let v = exprs[i];
+			let o = ops[i];
+
+			// Whole-parent child text: the marker is the (freshly cloned, empty) only-child
+			// slot.  Child exprs are primitive here (step 1 bailed otherwise).
+			if (o === 2) {
 				if (typeof v === 'number')
 					v += '';
-				marker.textContent = v;
-				continue;
+				slots[slotIdx[i]].textContent = v;
+			}
+
+			// Delegatable event with a valid handler shape: write the node expandos
+			// directly, mirroring bindEvent()'s delegated branch.  An event-name-array
+			// delegation option or an invalid value falls through to the generic stamper.
+			else if (o === 3 && delegateAll
+				&& (typeof v === 'function' || (Array.isArray(v) && typeof v[0] === 'function'))) {
+				let sp = aux[i];
+				let node = slots[slotIdx[i]];
+				node[sp.delegatedKey] = v;
+				node[delegatedRootKey] = root;
 			}
 
-			stamper.nodeMarker = marker;
-			stamper.parentNg = this;
-			stamper.applySingle(exprs[i]);
+			// A plain attribute on a freshly cloned row: the shell left it off, so an empty
+			// value means there is simply nothing to write, and any other string can go
+			// straight in without reading the attribute back first.
+			else if (o === 4 && firstApply && typeof v === 'string') {
+				if (v !== '')
+					slots[slotIdx[i]].setAttribute(aux[i], v);
+			}
+
+			// The list key never touches the DOM.
+			else if (o === 1)
+				this.key = v;
+
+			// Everything else (attributes, disabled delegation, odd values) goes through
+			// the shared stamper's full applySingle() semantics.
+			else {
+				let stamper = stampers[i];
+				stamper.nodeMarker = slots[slotIdx[i]];
+				stamper.parentNg = this;
+				stamper.applySingle(v);
+			}
 		}
 
 		this.nodesCache = null;
@@ -302,7 +401,7 @@ export default class NodeGroup {
 	 * @return {boolean} False when a child-node expression isn't primitive; the caller
 	 * must then materialize paths and apply normally. */
 	rewriteStamp(template) {
-		let shell = Shell.get(template.html, template.svgMode);
+		let shell = this.shell;
 		let newExprs = template.exprs;
 		let nodesIdx = shell.nodesPathIdx;
 		for (let i=0; i<nodesIdx.length; i++) {
@@ -312,19 +411,29 @@ export default class NodeGroup {
 		}
 
 		let oldExprs = this.template.exprs;
-		let paths = shell.paths, stampers = shell.stampPaths;
-		let slots = null; // Nodes are resolved only if something actually changed.
-		for (let i = paths.length - 1; i >= 0; i--) {
-			if (!exprSame(oldExprs[i], newExprs[i])) {
+		let stampers = shell.stampPaths, slotIdx = shell.stampSlot, flags = shell.stampFlags;
+		let slots = this.stampSlotsCache; // Nodes are resolved only if something actually changed, then cached.
+		for (let i = stampers.length - 1; i >= 0; i--) {
+			// Live HTML properties (checked etc., boolean-valued) are exempt from the
+			// unchanged-value skip: a user's click flips the DOM property underneath the cached
+			// expression, and applySingle() compares against the live node before writing.
+			// The identity test is inline because most expressions are unchanged, and reaching
+			// exprSame() only to be told so costs more than the comparison itself.
+			let oldExpr = oldExprs[i], newExpr = newExprs[i];
+			let flag = flags[i];
+			if ((oldExpr !== newExpr && !exprSame(oldExpr, newExpr))
+				|| ((flag & 1) && typeof newExpr === 'boolean')) {
+				// .slice() is required: resolveStampSlots returns the Shell's SHARED scratch
+				// array, which the next row's resolve would overwrite.
 				if (slots === null)
-					slots = this.resolveStampSlots(shell);
+					slots = this.stampSlotsCache = this.resolveStampSlots(shell).slice();
 				let stamper = stampers[i];
-				let marker = slots[paths[i].markerSlot];
+				let marker = slots[slotIdx[i]]; // The flat slot array, so the Path isn't loaded.
 
 				// Fast path for a wholeParent text path whose child already exists (the common
 				// rewrite case): set its value directly, skipping applySingle's branching and
 				// textNode bookkeeping.  exprSame above already proved it changed.
-				if (stamper.wholeParent) {
+				if (flag & 2) {
 					let v = newExprs[i], tn = marker.firstChild;
 					if (typeof v === 'number')
 						v += '';
@@ -359,16 +468,10 @@ export default class NodeGroup {
 	 * @return {Node[]} The shell's shared scratch slots array. */
 	resolveStampSlots(shell) {
 		let slots = shell.resolveSlots;
+		// A singleRoot shell's first op pair is always [0, 0], so slot 1 is the row's own root
+		// element and the program can start at the second pair.
 		slots[1] = this.startNode;
-		let ops = shell.resolveOps;
-		// firstChild/nextSibling pointer walk; see setPathsFromFragment for why not childNodes[i].
-		for (let i=2, s=2; i<ops.length; i+=2, s++) {
-			let node = slots[ops[i]].firstChild;
-			for (let k=ops[i+1]; k>0; k--)
-				node = node.nextSibling;
-			slots[s] = node;
-		}
-		return slots;
+		return runResolveOps(slots, shell.resolveOps, 2, 2);
 	}
 
 	/**
@@ -378,17 +481,8 @@ export default class NodeGroup {
 	 * @param shell {?Shell}
 	 * @return {Path[]} */
 	materializePaths(shell=null) {
-		shell ??= Shell.get(this.template.html, this.template.svgMode);
-		let slots = this.resolveStampSlots(shell);
-		let paths = shell.paths;
-		let pathLength = paths.length;
-		let result = this.paths = new Array(pathLength);
-		for (let i=0; i<pathLength; i++) {
-			let p = paths[i];
-			let path = p.cloneWithNodes(p.beforeSlot >= 0 ? slots[p.beforeSlot] : null, slots[p.markerSlot]);
-			path.parentNg = this;
-			result[i] = path;
-		}
+		shell ??= this.shell;
+		let result = this.clonePathsFromSlots(shell, this.resolveStampSlots(shell));
 
 		// A wholeParent child-node path that stamped a primitive left exactly one Text child.
 		for (let idx of shell.nodesPathIdx) {
@@ -428,14 +522,8 @@ export default class NodeGroup {
 	/**
 	 * Get the root element of the NodeGroup's RootNodeGroup.
 	 * @returns {HTMLElement|DocumentFragment} */
-	getRootNode() {
-		return this.rootNg.root;
-	}
-
-	/**
-	 * @returns {RootNodeGroup} */
-	getRootNodeGroup() {
-		return this.rootNg;
+	getRootEl() {
+		return this.rootNg.rootEl;
 	}
 
 	/**
@@ -446,9 +534,6 @@ export default class NodeGroup {
 	 * @param isRootClone {boolean} True when fragment is a direct clone of a singleRoot
 	 * shell's root element: it fills slot 1 itself and the first op pair is skipped. */
 	setPathsFromFragment(fragment, shell, startingPathDepth=0, isRootClone=false) {
-		let paths = shell.paths;
-		let pathLength = paths.length; // For faster iteration
-		let result = this.paths = new Array(pathLength);
 
 		// Fast path: run the shell's precomputed resolve program (see Shell.buildResolveProgram).
 		// Each Path.clone() would walk childNodes from the fragment root to its target node,
@@ -460,37 +545,45 @@ export default class NodeGroup {
 		// attribPaths behavior; pathOffset!==0 (root grafting) also uses the fallback.
 		let ops = shell.resolveOps;
 		if (ops && startingPathDepth === 0) {
-			let slots = shell.resolveSlots;
-			let i = 0, s = 1;
-			if (isRootClone) { // Slot 1 is the root element itself; skip its op pair.
-				slots[1] = fragment;
-				i = 2;
-				s = 2;
-			}
-			else
+			let slots;
+			if (isRootClone) // The root element is also this.startNode, so it seeds slot 1 itself.
+				slots = this.resolveStampSlots(shell);
+			else {
+				slots = shell.resolveSlots;
 				slots[0] = fragment;
-			// Resolve each node via firstChild/nextSibling pointer walks instead of
-			// childNodes[index]; the live NodeList indexing is markedly slower, and indices
-			// are small (markers are elements, often the first child after whitespace stripping).
-			for (; i<ops.length; i+=2, s++) {
-				let node = slots[ops[i]].firstChild;
-				for (let k=ops[i+1]; k>0; k--)
-					node = node.nextSibling;
-				slots[s] = node;
-			}
-			for (let i=0; i<pathLength; i++) {
-				let p = paths[i];
-				let path = p.cloneWithNodes(p.beforeSlot >= 0 ? slots[p.beforeSlot] : null, slots[p.markerSlot]);
-				path.parentNg = this;
-				result[i] = path;
+				runResolveOps(slots, ops, 0, 1);
 			}
+			this.clonePathsFromSlots(shell, slots);
 		}
-		else
+		else {
+			let paths = shell.paths;
+			let pathLength = paths.length; // For faster iteration
+			let result = this.paths = new Array(pathLength);
 			for (let i=0; i<pathLength; i++) {
 				let path = paths[i].clone(fragment, startingPathDepth)
 				path.parentNg = this;
 				result[i] = path;
 			}
+		}
+	}
+
+	/**
+	 * Copy the shell's Paths onto this NodeGroup's own nodes, taking each path's marker and
+	 * before-node from the slots the resolve program just filled.
+	 * @param shell {Shell}
+	 * @param slots {Node[]} The shell's shared scratch slots, already resolved.
+	 * @return {Path[]} */
+	clonePathsFromSlots(shell, slots) {
+		let paths = shell.paths;
+		let pathLength = paths.length;
+		let result = this.paths = new Array(pathLength);
+		for (let i=0; i<pathLength; i++) {
+			let p = paths[i];
+			let path = p.cloneWithNodes(p.beforeSlot >= 0 ? slots[p.beforeSlot] : null, slots[p.markerSlot]);
+			path.parentNg = this;
+			result[i] = path;
+		}
+		return result;
 	}
 
 	updateStyles() {
@@ -498,7 +591,7 @@ export default class NodeGroup {
 			for (let [style, oldText] of this.styles) {
 				let newText = style.textContent;
 				if (oldText !== newText)
-					Util.bindStyles(style, this.getRootNodeGroup().root);
+					Util.bindStyles(style, this.rootNg.rootEl);
 			}
 	}
 
@@ -508,16 +601,14 @@ export default class NodeGroup {
 	 * @param pathOffset {int} */
 	activateEmbeds(root, shell, pathOffset=0) {
 
-		let rootEl = this.rootNg.root;
+		let rootEl = this.rootNg.rootEl;
 		if (rootEl) {
-			let options = this.rootNg.options;
+			let options = this.rootNg.renderOptions;
 
 			// ids
 			if (options?.ids !== false) {
 				for (let path of shell.ids) {
-					if (pathOffset)
-						path = path.slice(0, -pathOffset);
-					let el = Path.resolve(root, path);
+					let el = Path.resolve(root, path, pathOffset);
 					Util.bindId(rootEl, el);
 				}
 			}
@@ -527,11 +618,8 @@ export default class NodeGroup {
 				if (shell.styles.length)
 					this.styles = new Map();
 				for (let path of shell.styles) {
-					if (pathOffset)
-						path = path.slice(0, -pathOffset);
-
 					/** @type {HTMLStyleElement} */
-					let style = Path.resolve(root, path);
+					let style = Path.resolve(root, path, pathOffset);
 					if (rootEl.nodeType === 1) {
 						Util.bindStyles(style, rootEl);
 						this.styles.set(style, style.textContent);
@@ -542,9 +630,7 @@ export default class NodeGroup {
 			// scripts
 			if (options?.scripts !== false) {
 				for (let path of shell.scripts) {
-					if (pathOffset)
-						path = path.slice(0, -pathOffset);
-					let script = Path.resolve(root, path);
+					let script = Path.resolve(root, path, pathOffset);
 					// Indirect eval runs in global scope (correct for a <script> tag) and, unlike a direct
 					// eval, doesn't force terser to keep every top-level name in the bundle unmangled.
 					(0, eval)(script.textContent)
@@ -553,7 +639,7 @@ export default class NodeGroup {
 		}
 	}
 
-	//#IFDEV
+	//#IFDEBUG
 	getParentNode() {
 		return this.startNode?.parentNode
 	}