solarite 0.2.3 → 0.3.0

package/src/solarite/ExprPath.js

@@ -6,6 +6,10 @@ import Template from "./Template.js";
 import Globals from "./Globals.js";
 import MultiValueMap from "../util/MultiValueMap.js";
 import udomdiff from "./udomdiff.js";
+//import {ArraySpliceOp} from "./watch.js";
+//#IFDEV
+var exprPathId = 0;
+//#ENDIF
 
 /**
  * Path to where an expression should be evaluated within a Shell or NodeGroup.
@@ -13,8 +17,12 @@ import udomdiff from "./udomdiff.js";
  * TODO: Make this based on parent and node instead of path? */
 export default class ExprPath {
 
+	//#IFDEV
+	eid = exprPathId++;
+	//#ENDIF
+
 	/**
-	 * @type {PathType} */
+	 * @type {ExprPathType} */
 	type;
 
 	// Used for attributes:
@@ -30,8 +38,6 @@ export default class ExprPath {
 	 * @type {Set<string>} Used for type=AttribType.Multiple to remember the attributes that were added. */
 	attrNames;
 
-
-
 	/**
 	 * @type {Node} Node that occurs before this ExprPath's first Node.
 	 * This is necessary because udomdiff() can steal nodes from another ExprPath.
@@ -73,13 +79,23 @@ export default class ExprPath {
 	nodeMarkerPath;
 
 
+	/** @type {?function} A function called by renderWatched() to update the value of this expression. */
+	watchFunction
+
+	/**
+	 * @type {?function} The most recent callback passed to a .map() function in this ExprPath.
+	 * TODO: What if one ExprPath has two .map() calls?  Maybe we just won't support that. */
+	mapCallback
+
+	isHtmlProperty = undefined;
+
 	/**
 	 * @param nodeBefore {Node}
 	 * @param nodeMarker {?Node}
-	 * @param type {PathType}
+	 * @param type {ExprPathType}
 	 * @param attrName {?string}
 	 * @param attrValue {string[]} */
-	constructor(nodeBefore, nodeMarker, type=PathType.Content, attrName=null, attrValue=null) {
+	constructor(nodeBefore, nodeMarker, type=ExprPathType.Content, attrName=null, attrValue=null) {
 
 		// If path is a node.
 		this.nodeBefore = nodeBefore;
@@ -87,7 +103,7 @@ export default class ExprPath {
 		this.type = type;
 		this.attrName = attrName;
 		this.attrValue = attrValue;
-		if (type === PathType.Multiple)
+		if (type === ExprPathType.AttribMultiple)
 			this.attrNames = new Set();
 	}
 
@@ -101,36 +117,27 @@ export default class ExprPath {
 	 * We should modify path.applyValueAttrib so it stores the procssed parts and then only calls
 	 * setAttribute() once all the pieces are in place.
 	 *
-	 * @param expr {Expr}
 	 * @param exprs {Expr[]}
-	 * @param exprIndex {int}
-	 * @param componentExprs {object}
-	 * @returns {int} */
-	apply(expr, exprs=null, exprIndex=0, componentExprs={}) {
+	 * @param freeNodeGroups {boolean} */
+	apply(exprs, freeNodeGroups=true) {
 		switch (this.type) {
 			case 1: // PathType.Content:
-				this.applyNodes(expr);
+				this.applyNodes(exprs[0], freeNodeGroups);
 				break;
 			case 2: // PathType.Multiple:
-				this.applyMultipleAttribs(this.nodeMarker, expr);
+				this.applyMultipleAttribs(this.nodeMarker, exprs[0]);
 				break;
 			case 5: // PathType.Comment:
 				// Expressions inside Html comments.  Deliberately empty because we won't waste time updating them.
 				break;
 			case 6: // PathType.Event:
-				this.applyEventAttrib(this.nodeMarker, expr, this.parentNg.rootNg.root);
+				this.applyEventAttrib(this.nodeMarker, exprs[0], this.parentNg.rootNg.root);
 				break;
-			default:
-				if (this.type === 4 /*PathType.Component*/ && this.nodeMarker !== this.parentNg.rootNg.root)
-					componentExprs[this.attrName] = expr;
-				else {
-					// One attribute value may have multiple expressions.  Here we apply them all at once.
-					exprIndex = this.applyValueAttrib(this.nodeMarker, exprs || [expr], exprIndex);
-				}
+			default: // TODO: Is this still used?  Lots of tests fail without it.
+				// One attribute value may have multiple expressions.  Here we apply them all at once.
+				this.applyValueAttrib(this.nodeMarker, exprs);
 				break;
 		}
-
-		return exprIndex;
 	}
 
 	/**
@@ -138,10 +145,17 @@ export default class ExprPath {
 	 * Called by applyExprs()
 	 * This function is recursive, as the functions it calls also call it.
 	 * @param expr {Expr}
+	 * @param freeNodeGroups {boolean}
 	 * @return {Node[]} New Nodes created. */
-	applyNodes(expr) {
+	applyNodes(expr, freeNodeGroups=true) {
 		let path = this;
 
+		// This can be done at the beginning or the end of this function.
+		// If at the end, we may get rendering done faster.
+		// But when at the beginning, it leaves all the nodes in-use so we can do a renderWatched().
+		if (freeNodeGroups)
+			path.freeNodeGroups();
+
 		/*#IFDEV*/path.verify();/*#ENDIF*/
 
 		/** @type {(Node|NodeGroup|Expr)[]} */
@@ -150,10 +164,10 @@ export default class ExprPath {
 		/*#IFDEV*/assert(!oldNodeGroups.includes(null))/*#ENDIF*/
 		let secondPass = []; // indices
 
-		path.nodeGroups = []; // Reset before applyExact and the code below rebuilds it.
-		path.applyExact(expr, newNodes, secondPass);
+		path.nodeGroups = []; // Reset before applyExactNodes and the code below rebuilds it.
+		path.applyExactNodes(expr, newNodes, secondPass);
 
-		this.existingTextNodes = null;
+		//this.existingTextNodes = null;
 
 		// TODO: Create an array of old vs Nodes and NodeGroups together.
 		// If they're all the same, skip the next steps.
@@ -206,26 +220,162 @@ export default class ExprPath {
 				// Rearrange nodes.
 				udomdiff(path.nodeMarker.parentNode, oldNodes, newNodes, path.nodeMarker)
 
-			Util.saveOrphans(oldNodeGroups, oldNodes);
+			// TODO: Put this in a remove() function of NodeGroup.
+			// Then only run it on the old nodeGroups that were actually removed.
+			//Util.saveOrphans(oldNodeGroups, oldNodes);
+
+			for (let ng of oldNodeGroups)
+				if (!ng.startNode.parentNode)
+					ng.removeAndSaveOrphans();
 		}
 
-		// Must happen after second pass.
-		path.freeNodeGroups();
 
 		/*#IFDEV*/path.verify();/*#ENDIF*/
 	}
 
+	/**
+	 * Used by watch() for inserting/removing/replacing individual loop items.
+	 * @param op {ArraySpliceOp} */
+	applyArrayOp(op) {
+
+		// Replace NodeGroups
+		let replaceCount = Math.min(op.deleteCount, op.items.length);
+		let deleteCount = op.deleteCount - replaceCount;
+		for (let i=0; i<replaceCount; i++) {
+			let oldNg = this.nodeGroups[op.index + i]; // TODO: One expr can create multiple nodegroups.
+
+			// Try to find an exact match
+			let func = this.mapCallback || this.watchFunction;
+			let expr = func(op.items[i]);
+
+			// If the result of func isn't a template, conver it to one or more templates.
+			this.exprToTemplates(expr, template => { // TODO: An expr can create multiple NodeGroups.  I need a way to group them.
+
+				let ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
+				if (ng && ng === oldNg) {
+					// It's an exact match, so replace nothing.
+					// TODO: What if the found NodeGroup as at a differnet place?
+				} else {
+
+					// Find a close match or create a new node group
+					if (!ng)
+						ng = this.getNodeGroup(template, false); // adds back to nodeGroupsRendered()
+					this.nodeGroups[op.index + i] = ng; // TODO: Remove old one to nodeGroupsDetached?
+
+					// Splice in the new nodes.
+					let insertBefore = oldNg.startNode;
+					for (let node of ng.getNodes())
+						insertBefore.parentNode.insertBefore(node, insertBefore);
+
+					// Remove the old nodes.
+					if (ng !== oldNg)
+						oldNg.removeAndSaveOrphans();
+				}
+			});
+		}
 
+		// Delete extra at the end.
+		if (deleteCount > 0) {
+			for (let i=0; i<deleteCount; i++) {
+				let oldNg = this.nodeGroups[op.index + replaceCount +  i];
+				oldNg.removeAndSaveOrphans();
+			}
+			this.nodeGroups.splice(op.index + replaceCount, deleteCount);
+		}
+
+		// Add extra at the end.
+		else {
+			let newItems = op.items.slice(replaceCount);
+
+			let insertBefore = this.nodeGroups[op.index + replaceCount]?.startNode || this.nodeMarker;
+			for (let i = 0; i < newItems.length; i++) { // We use nodeMarker if the subequent (or all) nodeGroups have been removed.
+
+
+				// Try to find exact match
+				let template = this.mapCallback(newItems[i]);
+				let ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
+				if (!ng) 	// Find a close match or create a new node group
+					ng = this.getNodeGroup(template, false); // adds back to nodeGroupsRendered()
+
+				this.nodeGroups.push(ng);
+
+				// Splice in the new nodes.
+				for (let node of ng.getNodes())
+					insertBefore.parentNode.insertBefore(node, insertBefore);
+			}
+		}
+
+		//#IFDEV
+		assert(this.nodeGroups.length === op.array.length);
+		//#ENDIF
+
+		// TODO: update or invalidate the nodes cache?
+		this.nodesCache = null;
+	}
 
 	/**
-	 * Apply Nodes that are an exact match.
+	 * Recursively traverse expr.
+	 * If a value is a function, evaluate it.
+	 * If a value is an array, recurse on each item.
+	 * If it's a primitive, convert it to a Template.
+	 * Otherwise pass the item (which is now either a Template or a Node) to callback.
+	 * @param expr
+	 * @param callback {function(Node|Template)}
+	 *
+	 * TODO: have applyExactNodes() use this function. */
+	exprToTemplates(expr, callback) {
+		if (Array.isArray(expr))
+			for (let subExpr of expr)
+				this.exprToTemplates(subExpr, callback);
+
+		else if (typeof expr === 'function') {
+			// TODO: One ExprPath can have multiple expr functions.
+			// But if using it as a watch, it should only have one at the top level.
+			// So maybe this is ok.
+			Globals.currentExprPath = this; // Used by watch()
+
+			this.watchFunction = expr; // TODO: Only do this if it's a top level function.
+			expr = expr(); // As expr accesses watched variables, watch() uses Globals.currentExprPath to mark where those watched variables are being used.
+			Globals.currentExprPath = null;
+
+			this.exprToTemplates(expr, callback);
+		}
+
+		// String/Number/Date/Boolean
+		else if (!(expr instanceof Template) && !(expr instanceof Node)){
+			// Convert expression to a string.
+			if (expr === undefined || expr === false || expr === null) // Util.isFalsy() inlined
+				expr = '';
+			else if (typeof expr !== 'string')
+				expr += '';
+
+			// Get the same Template for the same string each time.
+			// let template = Globals.stringTemplates[expr];
+			// if (!template) {
+				let template = new Template([expr], []);
+			//	Globals.stringTemplates[expr] = template;
+			//}
+
+			// Recurse.
+			this.exprToTemplates(template, callback);
+		}
+		else
+			callback(expr);
+	}
+
+
+	/**
+	 * Try to apply Nodes that are an exact match, by finding existing nodes from the last render
+	 * that have the same value as created by the expr.
+	 * This is called from ExprPath.applyNodes().
+	 *
 	 * @param expr {Template|Node|Array|function|*}
-	 * @param newNodes {(Node|Template)[]}
-	 * @param secondPass {Array} Locations within newNodes to evaluate later. */
-	applyExact(expr, newNodes, secondPass) {
+	 * @param newNodes {(Node|Template)[]} An inout parameter; we add the nodes here as we go.
+	 * @param secondPass {[int, int][]} Locations within newNodes for ExprPath.applyNodes() to evaluate later,
+	 *   when it tries to find partial matches. */
+	applyExactNodes(expr, newNodes, secondPass) {
 
 		if (expr instanceof Template) {
-
 			let ng = this.getNodeGroup(expr, true);
 			if (ng) {
 
@@ -243,7 +393,7 @@ export default class ExprPath {
 			}
 		}
 
-		// Node created by an expression.
+		// Node(s) created by an expression.
 		else if (expr instanceof Node) {
 
 			// DocumentFragment created by an expression.
@@ -256,49 +406,54 @@ export default class ExprPath {
 		// Arrays and functions.
 		// I tried iterating over the result of a generator function to avoid this recursion and simplify the code,
 		// but that consistently made the js-framework-benchmarks a few percentage points slower.
-		else if (Array.isArray(expr))
+		else {
+			this.exprToTemplates(expr, template => {
+				this.applyExactNodes(template, newNodes, secondPass);
+			})
+
+		}
+
+		// Old version
+		/*else if (Array.isArray(expr))
 			for (let subExpr of expr)
-				this.applyExact(subExpr, newNodes, secondPass);
+				this.applyExactNodes(subExpr, newNodes, secondPass);
 
 		else if (typeof expr === 'function') {
-			Globals.currentExprPath = [this, expr]; // Used by watch3()
-			let result = expr();
+			// TODO: One ExprPath can have multiple expr functions.
+			// But if using it as a watch, it should only have one at the top level.
+			// So maybe this is ok.
+			Globals.currentExprPath = this; // Used by watch()
+
+			this.watchFunction = expr; // TODO: Only do this if it's a top level function.
+			let result = expr(); // As expr accesses watched variables, watch() uses Globals.currentExprPath to mark where those watched variables are being used.
 			Globals.currentExprPath = null;
 
-			this.applyExact(result, newNodes, secondPass);
+			this.applyExactNodes(result, newNodes, secondPass);
 		}
 
-		// Text
+		// String
 		else {
-			// Convert falsy values (but not 0) to empty string.
-			// Convert numbers to string so they compare the same.
-			let text = (expr === undefined || expr === false || expr === null) ? '' : (expr + '');
-
-			// Fast path for updating the text of a single text node.
-			let first = this.nodeBefore.nextSibling;
-			if (first.nodeType === 3 && first.nextSibling === this.nodeMarker && !newNodes.includes(first)) {
-				if (first.textContent !== text)
-					first.textContent = text;
-
-				newNodes.push(first);
+			// Convert expression to a string.
+			let stringExpr = expr;
+			if (expr === undefined || expr === false || expr === null) // Util.isFalsy()
+				stringExpr = '';
+			else if (typeof expr !== 'string')
+				stringExpr = expr + '';
+
+			// Get the same Template for the same string each time.
+			let template = Globals.stringTemplates[stringExpr];
+			if (!template) {
+			template = new Template([stringExpr], []);
+				Globals.stringTemplates[stringExpr] = template;
 			}
 
-			else {
-				// TODO: Optimize this into a Set or Map or something?
-				if (!this.existingTextNodes)
-					this.existingTextNodes = this.getNodes().filter(n => n.nodeType === 3);
-
-				let idx = this.existingTextNodes.findIndex(n => n.textContent === text);
-				if (idx !== -1)
-					newNodes.push(...this.existingTextNodes.splice(idx, 1))
-				else
-					newNodes.push(this.nodeMarker.ownerDocument.createTextNode(text));
-			}
-		}
+			// Recurse.
+			this.applyExactNodes(template, newNodes, secondPass);
+		}*/
 	}
 
 	applyMultipleAttribs(node, expr) {
-		/*#IFDEV*/assert(this.type === PathType.Multiple);/*#ENDIF*/
+		/*#IFDEV*/assert(this.type === ExprPathType.AttribMultiple);/*#ENDIF*/
 
 		if (Array.isArray(expr))
 			expr = expr.flat().join(' ');  // flat and join so we can accept arrays of arrays of strings.
@@ -307,6 +462,13 @@ export default class ExprPath {
 		let oldNames = this.attrNames;
 		this.attrNames = new Set();
 		if (expr) {
+			if (typeof expr === 'function') {
+				Globals.currentExprPath = this; // Used by watch()
+				this.watchFunction = expr; // used by renderWatched()
+				expr = expr();
+				Globals.currentExprPath = null;
+			}
+
 			let attrs = (expr +'') // Split string into multiple attributes.
 				.split(/([\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s]+))/g)
 				.map(text => text.trim())
@@ -337,49 +499,60 @@ export default class ExprPath {
 	 * @param root */
 	applyEventAttrib(node, expr, root) {
 		/*#IFDEV*/
-		assert(this.type === PathType.Event/* || this.type === PathType.Component*/);
+		assert(this.type === ExprPathType.Event/* || this.type === PathType.Component*/);
 		assert(root instanceof HTMLElement);
 		/*#ENDIF*/
 
 		let eventName = this.attrName.slice(2); // remove "on-" prefix.
 		let func;
-
-		// Convert array to function.
 		let args = [];
-		if (Array.isArray(expr)) {
 
-			// oninput=${[this.doSomething, 'meow']}
-			if (typeof expr[0] === 'function') {
-				func = expr[0];
-				args = expr.slice(1);
-			}
-
-			// Undocumented.
-			// oninput=${[this, 'value']}
-			else {
-				func = setValue;
-				args = [expr[0], expr.slice(1), node]
-				node.value = delve(expr[0], expr.slice(1));
-				// root.render(); // TODO: This causes infinite recursion.
-			}
+		// Convert array to function.
+		// oninput=${[this.doSomething, 'meow']}
+		if (Array.isArray(expr) && typeof expr[0] === 'function') {
+			func = expr[0];
+			args = expr.slice(1);
 		}
-		else
+		else if (typeof expr === 'function')
 			func = expr;
+		else
+			throw new Error(`Invalid event binding: <${node.tagName.toLowerCase()} ${this.attrName}=\${${JSON.stringify(expr)}}>`);
+
+		this.bindEvent(node, root, eventName, eventName, func, args);
+	}
+
 
+	/**
+	 * Call function when eventName is triggerd on node.
+	 * @param node {HTMLElement}
+	 * @param root {HTMLElement}
+	 * @param key {string}
+	 * @param eventName {string}
+	 * @param func {function}
+	 * @param args {array}
+	 * @param capture {boolean} */
+	bindEvent(node, root, key, eventName, func, args, capture=false) {
 		let nodeEvents = Globals.nodeEvents.get(node);
 		if (!nodeEvents) {
-			nodeEvents = {[eventName]: new Array(3)};
+			nodeEvents = {[key]: new Array(3)};
 			Globals.nodeEvents.set(node, nodeEvents);
 		}
-		let nodeEvent = nodeEvents[eventName];
-
+		let nodeEvent = nodeEvents[key];
+		if (!nodeEvent)
+			nodeEvents[key] = nodeEvent = new Array(3);
 
+		if (typeof func !== 'function')
+			throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${${func}}> because it's not a function.`);
 
 		// If function has changed, remove and rebind the event.
 		if (nodeEvent[0] !== func) {
+
+			// TODO: We should be removing event listeners when calling getNodeGroup(),
+			// when we get the node from the list of nodeGroupsAttached/nodeGroupsDetached,
+			// instead of only when we rebind an event.
 			let [existing, existingBound, _] = nodeEvent;
 			if (existing)
-				node.removeEventListener(eventName, existingBound);
+				node.removeEventListener(eventName, existingBound, capture);
 
 			let originalFunc = func;
 
@@ -395,74 +568,155 @@ export default class ExprPath {
 			nodeEvent[0] = originalFunc;
 			nodeEvent[1] = boundFunc;
 
-			node.addEventListener(eventName, boundFunc);
+			node.addEventListener(eventName, boundFunc, capture);
 
 			// TODO: classic event attribs?
-			//el[attr.name] = e => // e.g. el.onclick = ...
-			//	(new Function('event', 'el', attr.value)).bind(this.manager.rootEl)(e, el) // put "event", "el", and "this" in scope for the event code.
+			//el[attr.name] = e => // e.g. el.onclick = ... // put "event", "el", and "this" in scope for the event code.
+			//	(new Function('event', 'el', attr.value)).bind(this.manager.rootEl)(e, el)
 		}
 
 		//  Otherwise just update the args to the function.
-		nodeEvents[eventName][2] = args;
+		nodeEvents[key][2] = args;
 	}
 
-	applyValueAttrib(node, exprs, exprIndex) {
-		let expr = exprs[exprIndex];
-
-		// Values to toggle an attribute
-		if (!this.attrValue && (expr === false || expr === null || expr === undefined))
-			node.removeAttribute(this.attrName);
-
-		else if (!this.attrValue && expr === true)
-			node.setAttribute(this.attrName, '');
+	/**
+	 * Handle values, including two-way binding.
+	 * @param node
+	 * @param exprs */
+	// TODO: node is always this.nodeMarker?
+	applyValueAttrib(node, exprs) {
+		let expr = exprs[0];
 
+		// Two-way binding between attributes
 		// Passing a path to the value attribute.
+		// Copies the attribute to the property when the input event fires.
+		// value=${[this, 'value]'}
+		// checked=${[this, 'isAgree']}
 		// This same logic is in NodeGroup.createNewComponent() for components.
-		else if ((this.attrName === 'value' || this.attrName === 'data-value') && Util.isPath(expr)) {
+		if (Util.isPath(expr)) {
 			let [obj, path] = [expr[0], expr.slice(1)];
-			node.value = delve(obj, path);
-			node.addEventListener('input', () => {
-				delve(obj, path, Util.getInputValue(node));
-			}, true); // We use capture so we update the values before other events added by the user.
+
+			if (!obj)
+				throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${[${expr.map(item => item ? `'${item}'` : item+'').join(', ')}]}>.`);
+
+			let value = delve(obj, path);
+
+			// Special case to allow setting select-multiple value from an array
+			if (this.attrName === 'value' && node.type === 'select-multiple' && Array.isArray(value)) {
+				// Set the .selected property on the options having a value within value.
+				let strValues = value.map(v => v + '');
+				for (let option of node.options)
+					option.selected = strValues.includes(option.value)
+			}
+			else {
+				// TODO: should we remove isFalsy, since these are always props?
+				let strValue = Util.isFalsy(value) ? '' : value;
+
+				// If we don't have this condition, when we call render(), the browser will scroll to the currently
+				// selected item in a <select> and mess up manually scrolling to a different value.
+				if (strValue !== node[this.attrName])
+					node[this.attrName] = strValue;
+			}
+
+			// TODO: We need to remove any old listeners, like in bindEventAttribute.
+			// Does bindEvent() now handle that?
+			let func = () => {
+				let value = (this.attrName === 'value')
+					? Util.getInputValue(node)
+					: node[this.attrName];
+				delve(obj, path, value);
+			}
+
+			// We use capture so we update the values before other events added by the user.
+			// TODO: Bind to scroll events also?
+			// What about resize events and width/height?
+			this.bindEvent(node, path[0], this.attrName, 'input', func, [], true);
 		}
 
 		// Regular attribute
 		else {
-			let value = [];
-
-			// We go backward because NodeGroup.applyExprs() calls this function, and it goes backward through the exprs.
-			if (this.attrValue) {
-				for (let i=this.attrValue.length-1; i>=0; i--) {
-					value.unshift(this.attrValue[i]);
-					if (i > 0) {
-						let val = exprs[exprIndex];
-						if (val !== false && val !== null && val !== undefined)
-							value.unshift(val);
-						exprIndex--;
+			// TODO: Cache this on ExprPath.isProp when Shell creates the props.  Have ExprPath.clone() copy .isProp
+			// Or make it a new PathType.
+			//if (this.attrName === 'disabled')
+			//	debugger;
+
+			// hasOwnProperty() checks only the object, not the parents
+			// this.attrName in node checks the node and the parents.
+			// This version checks the html element it extends from, to see if has a setter set:
+			//     Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), this.attrName)?.set
+			//let isProp = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), this.attrName)?.set;
+			let isProp = this.isHtmlProperty;
+			if (isProp === undefined)
+				isProp = this.isHtmlProperty = Util.isHtmlProp(node, this.attrName);
+
+			// Values to toggle an attribute
+			let multiple = this.attrValue;
+			if (!multiple) {
+				Globals.currentExprPath = this; // Used by watch()
+				if (typeof expr === 'function') {
+					if (this.type === 4) { // Don't evaluate functions before passing them to components
+						return
 					}
+					this.watchFunction = expr; // The function that gets the expression, used for renderWatched()
+					expr = expr();
 				}
-				exprIndex ++;
+				else
+					expr = Util.makePrimitive(expr);
+				Globals.currentExprPath = null;
+			}
+			if (!multiple && (expr === undefined || expr === false || expr === null)) { // Util.isFalsy() inlined.
+				if (isProp)
+					node[this.attrName] = false;
+				node.removeAttribute(this.attrName);
+			}
+			else if (!multiple && expr === true) {
+				if (isProp)
+					node[this.attrName] = true;
+				node.setAttribute(this.attrName, '');
 			}
-			else
-				value.unshift(expr);
 
-			let joinedValue = value.join('')
+			// A non-toggled attribute
+			else {
 
-			// Only update attributes if the value has changed.
-			// The .value property is special.  If it changes we don't update the attribute.
-			let oldVal = this.attrName === 'value' ? node.value : node.getAttribute(this.attrName);
-			if (oldVal !== joinedValue) {
-				node.setAttribute(this.attrName, joinedValue);
-			}
+				// If it's a series of expressions among strings, join them together.
+				let joinedValue;
+				if (multiple) {
+					let value = [];
+					for (let i = 0; i < this.attrValue.length; i++) {
+						value.push(this.attrValue[i]);
+						if (i < this.attrValue.length - 1) {
+							Globals.currentExprPath = this; // Used by watch()
+							let val = Util.makePrimitive(exprs[i]);
+							Globals.currentExprPath = null;
+							if (!Util.isFalsy(val))
+								value.push(val);
+						}
+					}
+					joinedValue = value.join('')
+				}
 
-			// This is needed for setting input.value, .checked, option.selected, etc.
-			// But in some cases setting the attribute is enough.  such as div.setAttribute('title') updates div.title.
-			// TODO: How to tell which is which?
-			if (this.attrName in node)
-				node[this.attrName] = joinedValue;
+				// If the attribute is one expression with no strings:
+				else
+					joinedValue = expr;
+
+				// Only update attributes if the value has changed.
+				// This is needed for setting input.value, .checked, option.selected, etc.
+
+				let oldVal = isProp
+					? node[this.attrName]
+					: node.getAttribute(this.attrName);
+				if (oldVal !== joinedValue) {
+
+					// <textarea value=${expr}></textarea>
+					// Without this branch we have no way to set the value of a textarea,
+					// since we also prohibit expressions that are a child of textarea.
+					if (isProp)
+						node[this.attrName] = joinedValue;
+					// TODO: Putting an 'else' here would be more performant
+					node.setAttribute(this.attrName, joinedValue);
+				}
+			}
 		}
-
-		return exprIndex;
 	}
 
 
@@ -478,7 +732,8 @@ export default class ExprPath {
 		let nodeMarker, nodeBefore;
 		let root = newRoot;
 		let path = pathOffset ? this.nodeMarkerPath.slice(0, -pathOffset) : this.nodeMarkerPath;
-		for (let i=path.length-1; i>0; i--) // Resolve the path.
+		let length = path.length-1;
+		for (let i=length; i>0; i--) // Resolve the path.
 			root = root.childNodes[path[i]];
 		let childNodes = root.childNodes;
 
@@ -522,7 +777,7 @@ export default class ExprPath {
 			for (let ng of path.nodeGroups) {
 				if (ng) // Can be null from apply()'s push(null) call.
 					for (let path2 of ng.paths) {
-						if (path2.type === PathType.Content && path2.parentNode === parentNode) {
+						if (path2.type === ExprPathType.Content && path2.parentNode === parentNode) {
 							path2.nodesCache = null;
 							clearChildNodeCache(path2);
 						}
@@ -537,7 +792,7 @@ export default class ExprPath {
 
 	/**
 	 * Attempt to remove all of this ExprPath's nodes from the DOM, if it can be done using a special fast method.
-	 * @returns {boolean} Returns false if Nodes werne't removed, and they should instead be removed manually. */
+	 * @returns {boolean} Returns false if Nodes weren't removed, and they should instead be removed manually. */
 	fastClear() {
 		let parent = this.nodeBefore.parentNode;
 		if (this.nodeBefore === parent.firstChild && this.nodeMarker === parent.lastChild) {
@@ -573,6 +828,10 @@ export default class ExprPath {
 		// 	result2.push(...ng.getNodes())
 		// return result2;
 
+		if (this.type === ExprPathType.AttribValue || this.type === ExprPathType.AttribMultiple || this.type === ExprPathType.ComponentAttribValue) {
+			return [this.nodeMarker];
+		}
+
 
 		let result
 
@@ -599,7 +858,8 @@ export default class ExprPath {
 		return result;
 	}
 
-	getParentNode() { // Same as this.parentNode
+	/** @return {HTMLElement|ParentNode} */
+	getParentNode() {
 		return this.nodeMarker.parentNode
 	}
 
@@ -616,27 +876,39 @@ export default class ExprPath {
 	 *         or createa  new NodeGroup from the template.
 	 * @return {NodeGroup} */
 	getNodeGroup(template, exact=true) {
-		//if (exact && this.nodeGroupsFree.isEmpty())
-		//	return null;
 
 		let result;
+		let collection = this.nodeGroupsAttachedAvailable;
+
+		// TODO: Would it be faster to maintain a separate list of detached nodegroups?
+		if (exact) { // [below] parentElement will be null if the parent is a DocumentFragment
+			result = collection.deleteAny(template.getExactKey());
+			if (!result) { // try searching detached
+				collection = this.nodeGroupsDetachedAvailable;
+				result = collection.deleteAny(template.getExactKey());
+			}
 
-		if (exact) {
-			result = this.nodeGroupsFree.delete(template.getExactKey());
 			if (result) // also delete the matching close key.
-				this.nodeGroupsFree.delete(template.getCloseKey(), result);
-			else
+				collection.deleteSpecific(template.getCloseKey(), result);
+			else {
 				return null;
+			}
 		}
 
 		// Find a close match.
 		// This is a match that has matching html, but different expressions applied.
 		// We can then apply the expressions to make it an exact match.
-		else {
-			result = this.nodeGroupsFree.delete(template.getCloseKey())
+		// If the template has no expressions, the key is the html, and we've already searched for an exact match.  There won't be an inexact match.
+		else if (template.exprs.length) {
+			result = collection.deleteAny(template.getCloseKey());
+			if (!result) { // try searching detached
+				collection = this.nodeGroupsDetachedAvailable;
+				result = collection.deleteAny(template.getCloseKey());
+			}
+
 			if (result) {
 				/*#IFDEV*/assert(result.exactKey);/*#ENDIF*/
-				this.nodeGroupsFree.delete(result.exactKey, result);
+				collection.deleteSpecific(result.exactKey, result);
 
 				// Update this close match with the new expression values.
 				result.applyExprs(template.exprs);
@@ -648,58 +920,70 @@ export default class ExprPath {
 			result = new NodeGroup(template, this);
 
 		// old:
-		this.nodeGroupsInUse.push(result);
-
-		// new:
-		// let ngiu = this.nodeGroupsInUse;
-		// ngiu.add(result.exactKey, result);
-		// ngiu.add(result.closeKey, result);
+		this.nodeGroupsRendered.push(result);
 
 		/*#IFDEV*/assert(result.parentPath);/*#ENDIF*/
 		return result;
 	}
 
+	isComponent() {
+		// Events won't have type===Component.
+		// TODO: Have a special flag for components instead of it being on the type?
+		return this.type === ExprPathType.ComponentAttribValue || (this.attrName && this.nodeMarker.tagName && this.nodeMarker.tagName.includes('-'));
+	}
 
 	/**
+	 * TODO: Rename this to nodeGroupsInUse, nodeGroupsAvialableAttached and nodeGroupsAvailableDetached?
+	 * Nodes that have been used during the current render().
 	 * Used with getNodeGroup() and freeNodeGroups().
 	 * TODO: Use an array of WeakRef so the gc can collect them?
 	 * TODO: Put items back in nodeGroupsInUse after applyExpr() is called, not before.
 	 * @type {NodeGroup[]} */
-	nodeGroupsInUse = [];
-
-	/** @type {MultiValueMap<key:string, value:NodeGroup>} */
-	//nodeGroupsInUse = new MultiValueMap();
+	nodeGroupsRendered = [];
 
 	/**
+	 * Nodes that were added to the web component during the last render(), but are available to be used again.
 	 * Used with getNodeGroup() and freeNodeGroups().
 	 * Each NodeGroup is here twice, once under an exact key, and once under the close key.
 	 * @type {MultiValueMap<key:string, value:NodeGroup>} */
-	nodeGroupsFree = new MultiValueMap();
+	nodeGroupsAttachedAvailable = new MultiValueMap();
+
+	/**
+	 * Nodes that were not added to the web component during the last render(), and available to be used again.
+	 * @type {MultiValueMap} */
+	nodeGroupsDetachedAvailable = new MultiValueMap();
 
 
 	/**
-	 * Move everything from this.nodeGroupsInUse to this.nodeGroupsFree.
+	 * Move everything from this.nodeGroupsRendered to this.nodeGroupsAttached and nodeGroupsDetached.
+	 * Called at the beginning of applyNodes() so it can have NodeGroups to use.
 	 * TODO: this could run as needed in getNodeGroup? */
 	freeNodeGroups() {
-		// old:
-		let ngf = this.nodeGroupsFree;
-		for (let ng of this.nodeGroupsInUse) {
-			ngf.add(ng.exactKey, ng);
-			ngf.add(ng.closeKey, ng);
+		// Add nodes that weren't used during render() to nodeGroupsDetached
+		let previouslyAttached = this.nodeGroupsAttachedAvailable.data;
+		let detached = this.nodeGroupsDetachedAvailable.data;
+		for (let key in previouslyAttached) {
+			let set = detached[key];
+			if (!set)
+				detached[key] = previouslyAttached[key]
+			else
+				for (let ng of previouslyAttached[key])
+					set.add(ng);
+		}
+
+		// Add nodes that were used during render() to nodeGroupsRendered.
+		this.nodeGroupsAttachedAvailable = new MultiValueMap();
+		let nga = this.nodeGroupsAttachedAvailable;
+		for (let ng of this.nodeGroupsRendered) {
+			nga.add(ng.exactKey, ng);
+			nga.add(ng.closeKey, ng);
 		}
-		this.nodeGroupsInUse = [];
-
-		// new:
-		// for (let key in this.nodeGroupsFree.data)
-		// 	for (let item of this.nodeGroupsFree.data[key])
-		// 		this.nodeGroupsInUse.add(key, item);
-		//
-		// this.nodeGroupsFree = this.nodeGroupsInUse;
-		// this.nodeGroupsInUse = new MultiValueMap();
+
+		this.nodeGroupsRendered = [];
 	}
 
 	//#IFDEV
-	
+
 	get debug() {
 		return [
 			`parentNode: ${this.nodeBefore.parentNode?.tagName?.toLowerCase()}`,
@@ -712,7 +996,7 @@ export default class ExprPath {
 			}), 1).flat()
 		]
 	}
-	
+
 	get debugNodes() {
 		// Clear nodesCache so that getNodes() manually gets the nodes.
 		let nc = this.nodesCache;
@@ -721,13 +1005,13 @@ export default class ExprPath {
 		this.nodesCache = nc;
 		return result;
 	}
-	
+
 	verify() {
 		if (!window.verify)
 			return;
 
-		assert(this.type!==PathType.Content || this.nodeBefore)
-		assert(this.type!==PathType.Content || this.nodeBefore.parentNode)
+		assert(this.type!==ExprPathType.Content || this.nodeBefore)
+		assert(this.type!==ExprPathType.Content || this.nodeBefore.parentNode)
 
 		// Need either nodeMarker or parentNode
 		assert(this.nodeMarker)
@@ -736,10 +1020,10 @@ export default class ExprPath {
 		assert(!this.nodeMarker || this.nodeMarker.parentNode)
 
 		// nodeBefore and nodeMarker must have same parent.
-		assert(this.type!==PathType.Content || this.nodeBefore.parentNode === this.nodeMarker.parentNode)
+		assert(this.type!==ExprPathType.Content || this.nodeBefore.parentNode === this.nodeMarker.parentNode)
 
 		assert(this.nodeBefore !== this.nodeMarker)
-		assert(this.type!==PathType.Content|| !this.nodeBefore.parentNode || this.nodeBefore.compareDocumentPosition(this.nodeMarker) === Node.DOCUMENT_POSITION_FOLLOWING)
+		assert(this.type!==ExprPathType.Content|| !this.nodeBefore.parentNode || this.nodeBefore.compareDocumentPosition(this.nodeMarker) === Node.DOCUMENT_POSITION_FOLLOWING)
 
 		// Detect cyclic parent and grandparent references.
 		assert(this.parentNg?.parentPath !== this)
@@ -752,10 +1036,10 @@ export default class ExprPath {
 		// Make sure the nodesCache matches the nodes.
 		this.checkNodesCache();
 	}
-	
+
 	checkNodesCache() {
 		return;
-		
+
 		// Make sure cache is accurate.
 		// If this is invalid, then perhaps another component append()'d one of our nodes to itself.
 		// Or perhaps one of our nodes is used in an expression more than once.
@@ -770,14 +1054,15 @@ export default class ExprPath {
 				nodes.push(current)
 				current = current.nextSibling
 			}
+
+			if (!arraySame(this.nodesCache, nodes))
+				console.log(this.nodesCache, nodes)
 			assert(arraySame(this.nodesCache, nodes) === true);
 		}
 	}
 	//#ENDIF
 }
 
-
-
 /**
  *
  * @param root
@@ -793,19 +1078,19 @@ function setValue(root, path, node) {
 }
 
 /** @enum {int} */
-export const PathType = {
+export const ExprPathType = {
 	/** Child of a node */
 	Content: 1,
-	
+
 	/** One or more whole attributes */
-	Multiple: 2,
-	
+	AttribMultiple: 2,
+
 	/** Value of an attribute. */
-	Value: 3,
-	
+	AttribValue: 3,
+
 	/** Value of an attribute being passed to a component. */
-	Component: 4,
-	
+	ComponentAttribValue: 4,
+
 	/** Expressions inside Html comments. */
 	Comment: 5,
 
@@ -831,11 +1116,9 @@ export function getNodePath(node) {
  * Note that the path is backward, with the outermost element at the end.
  * @param root {HTMLElement|Document|DocumentFragment|ParentNode}
  * @param path {int[]}
- * @returns {Node|HTMLElement} */
+ * @returns {Node|HTMLElement|HTMLStyleElement} */
 export function resolveNodePath(root, path) {
 	for (let i=path.length-1; i>=0; i--)
 		root = root.childNodes[path[i]];
 	return root;
 }
-
-