npm - solarite - Versions diffs - 0.1.1 → 0.2.0 - Mend

solarite 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/benchmarks/naive/Solarite.min.js +4 -0
package/benchmarks/naive/index.html +14 -0
package/benchmarks/naive/main.js +339 -0
package/benchmarks/naive/package-lock.json +13 -0
package/benchmarks/naive/package.json +23 -0
package/benchmarks/readme.md +48 -0
package/build/build.bat +2 -2
package/build/build.js +1 -1
package/dist/Solarite-debug.js +1344 -1532
package/dist/Solarite.js +1298 -1334
package/dist/Solarite.min.js +3 -3
package/dist/udomdiff-license.txt +18 -0
package/docs/index.md +440 -130
package/docs/js/Playground.js +1 -1
package/docs/js/codemirror/codemirror6.js +3683 -3206
package/docs/js/codemirror/themeSolarIce.js +1 -1
package/docs/js/documentation.js +1 -1
package/docs/js/ui/CodeEditor.js +183 -45
package/docs/js/ui/FlexResizer.js +14 -3
package/docs/js/util/Errors.js +11 -0
package/docs/media/documentation.css +6 -3
package/index.html +449 -30
package/package.json +1 -1
package/readme.md +1 -1
package/src/solarite/ExprPath.js +349 -151
package/src/solarite/Globals.js +43 -1
package/src/solarite/NodeGroup.js +275 -293
package/src/solarite/Shell.js +26 -28
package/src/solarite/Solarite.js +12 -0
package/src/solarite/Template.js +55 -128
package/src/solarite/Util.js +131 -7
package/src/solarite/createSolarite.js +14 -19
package/src/solarite/getArg.js +1 -1
package/src/solarite/hash.js +18 -35
package/src/solarite/r.js +127 -127
package/src/solarite/watch3.js +18 -11
package/src/{solarite → unused}/NodeGroupManager.js +81 -109
package/src/{solarite → unused}/watch.js +1 -1
package/src/{solarite → unused}/watch2.js +1 -2
package/src/{solarite → util}/MultiValueMap.js +18 -11
package/src/util/WeakArray.js +33 -0
package/tests/Solarite.test.js +862 -167
package/tests/index.html +4 -2
package/tests/run.bat +1 -1
package/deno.lock +0 -176

package/dist/Solarite.js CHANGED Viewed

@@ -128,7 +128,7 @@ let delveDontCreate = {};
 /**
  * There are three ways to create an instance of a Solarite Component:
  * 1.  new ComponentName();                                         // direct class instantiation
- * 2.  this.html = r`<div><component-name></component-name></div>;  // as a child of another RedComponent.
+ * 2.  this.html = r`<div><component-name></component-name></div>;  // as a child of another Component.
  * 3.  <body><component-name></component-name></body>               // in the Document html.
  *
  * When created via #3, Solarite has no way to pass attributes as arguments to the constructor.  So to make
@@ -226,22 +226,14 @@ let objectIds = new WeakMap();
 /**
  * @param obj {Object|string|Node}
- * @param prefix
  * @returns {string} */
-function getObjectId(obj, prefix=null) {
-	prefix = prefix || '~\f';
+function getObjectId(obj) {
 	// if (typeof obj === 'function')
-	// 	return obj.toString();
+	// 	return obj.toString(); // This fails to detect when a function's bound variables changes.
 	let result = objectIds.get(obj);
 	if (!result) { // convert to string, store in result, then add 1 to lastObjectId.
-		result = prefix+(lastObjectId++); // We use a unique prefix to ensure it doesn't collide w/ strings not from getObjectId()
+		result = (lastObjectId++); // We use a unique prefix to ensure it doesn't collide w/ strings not from getObjectId()
 		objectIds.set(obj, result);
 	}
 	return result;
@@ -254,12 +246,20 @@ function getObjectId(obj, prefix=null) {
  * Adding a toJSON method globally on these object prototypes doesn't incur that performance penalty. */
 let isHashing = true;
 function toJSON() {
-	//return (isHashing && !Array.isArray(this)) ? getObjectId(this) : this
 	return isHashing ? getObjectId(this) : this
 }
 // Node.prototype.toJSON = toJSON;
 // Function.prototype.toJSON = toJSON;
+// Sometimes these get unassigned by Chrome and Brave 119, as well as Firefox, seemingly randomly!
+// The same tests sometimes pass, sometimes fail, even after browser and OS restarts.
+// So we check the assignments on every run of getObjectHash()
+if (Node.prototype.toJSON !== toJSON) {
+	Node.prototype.toJSON = toJSON;
+	if (Function.prototype.toJSON !== toJSON) // Will it only unmap one but not the other?
+		Function.prototype.toJSON = toJSON;
+}
 /**
  * Get a string that uniquely maps to the values of the given object.
@@ -268,25 +268,18 @@ function toJSON() {
  *
  * Relies on the Node and Function prototypes being overridden above.
  *
+ * Note that passing an integer may collide with the number we get from hashing an object.
+ * But we don't handle that case because we need max performance and Solarite never passes integers to this function.
+ *
  * @param obj {*}
  * @returns {string} */
 function getObjectHash(obj) {
-	// Sometimes these get unassigned by Chrome and Brave 119, as well as Firefox, seemingly randomly!
-	// The same tests sometimes pass, sometimes fail, even after browser and OS restarts.
-	// So we check the assignments on every run of getObjectHash()
-	if (Node.prototype.toJSON !== toJSON) {
-		Node.prototype.toJSON = toJSON;
-		if (Function.prototype.toJSON !== toJSON) // Will it only unmap one but not the other?
-			Function.prototype.toJSON = toJSON;
-	}
 	let result;
 	isHashing = true;
 	try {
 		result = JSON.stringify(obj);
 	}
-	catch(e){
+	catch(e) {
 		result = getObjectHashCircular(obj);
 	}
 	isHashing = false;
@@ -294,7 +287,7 @@ function getObjectHash(obj) {
 }
 /**
- * Having this separate might help the optimzer for getObjectHash() ?
+ * Slower hashing method that supports.
  * @param obj
  * @returns {string} */
 function getObjectHashCircular(obj) {
@@ -313,77 +306,59 @@ function getObjectHashCircular(obj) {
 	});
 }
-class MultiValueMap {
+var Globals = {
-	/** @type {Object<string, Set>} */
-	data = {};
+	/**
+	 * Used by NodeGroup.applyComponentExprs() */
+	componentHash: new WeakMap(),
-	// Set a new value for a key
-	add(key, value) {
-		let data = this.data;
-		let set = data[key];
-		if (!set) {
-			set = new Set();
-			data[key] = set;
-		}
-		set.add(value);
-	}
+	/**
+	 * Store which instances of Solarite have already been added to the DOM.
+	 * @type {WeakSet<HTMLElement>} */
+	connected: new WeakSet(),
-	// Get all values for a key
-	getAll(key) {
-		return this.data[key] || [];
-	}
+	/**
+	 * Elements that have been rendered to by r() at least once.
+	 * This is used by the Solarite class to know when to call onFirstConnect()
+	 * @type {WeakSet<HTMLElement>} */
+	rendered: new WeakSet(),
 	/**
-	 * Remove one value from a key, and return it.
-	 * @param key {string}
-	 * @param val If specified, make sure we delete this specific value, if a key exists more than once.
-	 * @returns {*} */
-	delete(key, val=undefined) {
-		// if (key === '["Html2",[[["Html3",["F1","A"]],["Html3",["F1","B"]]]]]')
-		// 	debugger;
-		let data = this.data;
-		// The partialUpdate benchmark shows having this check first makes the function slightly faster.
-		// if (!data.hasOwnProperty(key))
-		// 	return undefined;
+	 * Used by watch3 to see which expressions are being accessed. */
+	currentExprPath: [],
-		// Delete a specific value.
-		let result;
-		let set = data[key];
-		if (!set) // slower than pre-check.
-		 	return undefined;
+	/**
+	 * @type {Object<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
+	elementClasses: {},
-		if (val !== undefined) {
-			set.delete(val);
-			result = val;
-		}
+	/**
+	 * Used by ExprPath.applyEventAttrib()
+	 * @type {WeakMap<Node, Object<eventName:string, [original:function, bound:function, args:*[]]>>} */
+	nodeEvents: new WeakMap(),
-		// Delete any value.
-		else {
-			result = set.values().next().value;
-			// [result] = set; // Does the same as above. is about the same speed?
-			set.delete(result);
-		}
+	/**
+	 * Get the RootNodeGroup for an element.
+	 * @type {WeakMap<HTMLElement, RootNodeGroup>} */
+	nodeGroups: new WeakMap(),
-		// TODO: Will this make it slower?
-		if (set.size === 0)
-			delete data[key];
-		return result;
-	}
+	/**
+	 * Used by r() path 9. */
+	objToEl: new WeakMap(),
-	hasValue(val) {
-		let data = this.data;
-		let names = [];
-		for (let name in data)
-			if (data[name].has(val)) // TODO: iterate twice to pre-size array?
-				names.push(name);
-		return names;
-	}
-}
+	pendingChildren: [],
+	/**
+	 * Elements that are currently rendering via the r() function.
+	 * @type {WeakSet<HTMLElement>} */
+	rendering: new WeakSet(),
+	/**
+	 * Map from array of Html strings to a Shell created from them.
+	 * @type {WeakMap<string[], Shell>} */
+	shells: new WeakMap()
+};
 let Util = {
@@ -408,9 +383,133 @@ let Util = {
 					child.textContent = newText;
 			}
 		}
-	}
+	},
+	/**
+	 * A generator function that recursively traverses and flattens a value.
+	 *
+	 * - If the input is an array, it recursively traverses and flattens the array.
+	 * - If the input is a function, it calls the function, replaces the function
+	 *   with its result, and flattens the result if necessary. It will recursively
+	 *   call functions that return other functions.
+	 * - Otherwise it yields the value as is.
+	 *
+	 * This function does not create a new array for the flattened values. Instead,
+	 * it lazily yields each item as it is encountered. This can be more memory-efficient
+	 * for large or deeply nested structures.
+	 *
+	 * @param {any} value - The value to flatten. Can be an array, object, function, or primitive.
+	 * @yields {any} - The next item in the flattened structure.
+	 *
+	 * @example
+	 * const complexArray = [
+	 *     1,
+	 *     [2, () => 3, [4, () => [5, 6]], { a: 'object' }],
+	 *     () => () => 7,
+	 *     () => [() => 8, 9],
+	 * ];	 *
+	 * for (const item of flatten(complexArray))
+	 *     console.log(item);  // Outputs: 1, 2, 3, 4, 5, 6, { a: 'object' }, 7, 8, 9
+	 */
+	*flatten(value) {
+		if (Array.isArray(value)) {
+			for (const item of value) {
+				yield* Util.flatten(item);  // Recursively flatten arrays
+			}
+		} else if (typeof value === 'function') {
+			const result = value();
+			yield* Util.flatten(result);  // Recursively flatten the result of a function
+		} else
+			yield value;  // Yield primitive values as is
+	},
+	/**
+	 * Get the value of an input as the most appropriate JavaScript type.
+	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLDivElement}
+	 * @return {string|string[]|number|[]|File[]|Date|boolean} */
+	getInputValue(node) {
+		if (node.type === 'checkbox' || node.type === 'radio')
+			return node.checked; // Boolean
+		if (node.type === 'file')
+			return [...node.files]; // FileList
+		if (node.type === 'number' || node.type === 'range')
+			return node.valueAsNumber; // Number
+		if (node.type === 'date' || node.type === 'time' || node.type === 'datetime-local')
+			return node.valueAsDate; // Date Object
+		if (node.type === 'select-multiple') // <select multiple>
+			return [...node.selectedOptions].map(option => option.value); // Array of Strings
+		return node.value; // String
+	},
+	/**
+	 * Is it an array and a path that can be evaluated by delve() ?
+	 * @param arr {Array|*}
+	 * @returns {boolean} */
+	isPath(arr) {
+		return Array.isArray(arr) && typeof arr[0] === 'object' && !arr.slice(1).find(p => typeof p !== 'string' && typeof p !== 'number');
+	},
+	/**
+	 * Find NodeGroups that had their nodes removed and add those nodes to a Fragment so
+	 * they're not lost forever and the NodeGroup's internal structure is still consistent.
+	 * This saves all of a NodeGroup's nodes in order, so that nextChildNode still works.
+	 * This is necessary because a NodeGroup normally only stores the first and last node.
+	 * Called from ExprPath.apply().
+	 * @param oldNodeGroups {NodeGroup[]}
+	 * @param oldNodes {Node[]} */
+	saveOrphans(oldNodeGroups, oldNodes) {
+		let oldNgMap = new Map();
+		for (let ng of oldNodeGroups) {
+			oldNgMap.set(ng.startNode, ng);
+			// TODO: Is this necessary?
+			// if (ng.parentPath)
+			// 	ng.parentPath.clearNodesCache();
+		}
+		for (let i=0, node; node = oldNodes[i]; i++) {
+			let ng;
+			if (!node.parentNode && (ng = oldNgMap.get(node))) {
+				//ng.nodesCache = [];
+				let fragment = document.createDocumentFragment();
+				let endNode = ng.endNode;
+				while (node !== endNode) {
+					fragment.append(node);
+					//ng.nodesCache.push(node);
+					i++;
+					node = oldNodes[i];
+				}
+				fragment.append(endNode);
+				//ng.nodesCache.push(endNode);
+			}
+		}
+	},
+	/**
+	 * Remove nodes from the beginning and end that are not:
+	 * 1.  Elements.
+	 * 2.  Non-whitespace text nodes.
+	 * @param nodes {Node[]|NodeList}
+	 * @returns {Node[]} */
+	trimEmptyNodes(nodes) {
+		const shouldTrimNode = node =>
+			node.nodeType !== Node.ELEMENT_NODE &&
+			(node.nodeType !== Node.TEXT_NODE || node.textContent.trim() === '');
+		// Convert nodeList to an array for easier manipulation
+		const result = [...nodes];
+		// Trim from the start
+		while (result.length > 0 && shouldTrimNode(result[0]))
+			result.shift();
+		// Trim from the end
+		while (result.length > 0 && shouldTrimNode(result[result.length - 1]))
+			result.pop();
+		return result;
+	}
 };
@@ -455,15 +554,15 @@ function camelToDashes(str) {
  * Returns false if they're the same.  Or the first index where they differ.
  * @param a
  * @param b
- * @returns {int|false} */
-function findArrayDiff(a, b) {
-	if (a.length !== b.length)
-		return -1;
+ * @returns {boolean} */
+function arraySame(a, b) {
 	let aLength = a.length;
+	if (aLength !== b.length)
+		return false;
 	for (let i=0; i<aLength; i++)
 		if (a[i] !== b[i])
-			return i;
-	return false; // the same.
+			return false;
+	return true; // the same.
 }
@@ -546,193 +645,275 @@ let state = {...defaultState};
 // For debugging only
-/**
- * The html strings and evaluated expressions from an html tagged template.
- * A unique Template is created for each item in a loop.
- * Although the reference to the html strings is shared among templates. */
-class Template {
+class MultiValueMap {
-	/** @type {(Template|string|function)|(Template|string|function)[]} Evaulated expressions.  */
-	exprs = []
+	/** @type {Object<string, Set>} */
+	data = {};
-	/** @type {string[]} */
-	html = [];
+	// Set a new value for a key
+	add(key, value) {
+		let data = this.data;
+		let set = data[key];
+		if (!set) {
+			set = new Set();
+			data[key] = set;
+		}
+		set.add(value);
+	}
-	/**
-	 * If true, use this template to replace an existing element, instead of appending children to it.
-	 * @type {?boolean} */
-	replaceMode;
+	isEmpty() {
+		for (let key in this.data)
+			return true;
+		return false;
+	}
-	/** Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
-	hashedFields;
+	// Get all values for a key
+	getAll(key) {
+		return this.data[key] || [];
+	}
 	/**
-    * @deprecated
-    * @type {ExprPath} Used with forEach() from watch.js
-	 * Set in ExprPath.apply() */
-	parentPath;
-	/** @type {NodeGroup} */
-	nodeGroup;
-	/**
-	 * @type {string[][]} */
-	paths = [];
+	 * Remove one value from a key, and return it.
+	 * @param key {string}
+	 * @param val If specified, make sure we delete this specific value, if a key exists more than once.
+	 * @returns {*} */
+	delete(key, val=undefined) {
+		// if (key === '["Html2",[[["Html3",["F1","A"]],["Html3",["F1","B"]]]]]')
+		// 	debugger;
-	/**
-	 *
-	 * @param htmlStrings {string[]}
-	 * @param exprs {*[]} */
-	constructor(htmlStrings, exprs) {
-		this.html = htmlStrings;
-		this.exprs = exprs;
-		//this.trace = new Error().stack.split(/\n/g)
+		let data = this.data;
-		// Multiple templates can share the same htmlStrings array.
-		//this.hashedFields = [getObjectId(htmlStrings), exprs]
+		// if (!data.hasOwnProperty(key))
+		// 	return undefined;
+		// Delete a specific value.
+		let result;
+		let set = data[key];
+		if (!set) // slower than pre-check.
+			return undefined;
+		// Delete any value.
+		if (val === undefined) {
+			//result = set.values().next().value; // get first item from set.
+			[result] = set; // Does the same as above and seems to be about the same speed.
+			set.delete(result);
+		}
+		// Delete a specific value.
+		else {
+			set.delete(val);
+			result = val;
+		}
+		// TODO: Will this make it slower?
+		if (set.size === 0)
+			delete data[key];
+		return result;
 	}
-	/**
-	 * Called by JSON.serialize when it encounters a Template.
-	 * This prevents the hashed version from being too large. */
-	toJSON() {
-		if (!this.hashedFields)
-			this.hashedFields = [getObjectId(this.html, 'Html'), this.exprs];
-		return this.hashedFields
+	hasValue(val) {
+		let data = this.data;
+		let names = [];
+		for (let name in data)
+			if (data[name].has(val)) // TODO: iterate twice to pre-size array?
+				names.push(name);
+		return names;
 	}
+}
+/**
+ * ISC License
+ *
+ * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+ * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+ * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+ * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ */
-	/**
-	 * Render the main template, which may indirectly call renderTemplate() to create children.
-	 * @param el {HTMLElement}
-	 * @param options {RenderOptions}
-	 * @return {?DocumentFragment|HTMLElement} */
-	render(el=null, options={}) {
+/**
+ * @param {Node} parentNode The container where children live
+ * @param {Node[]} a The list of current/live children
+ * @param {Node[]} b The list of future children
+ * @param {(entry: Node, action: number) => Node} get
+ * The callback invoked per each entry related DOM operation.
+ * @param {Node} [before] The optional node used as anchor to insert before.
+ * @returns {Node[]} The same list of future children.
+ */
+const udomdiff = (parentNode, a, b, before) => {
-		let ng;
-		if (!el) {
-			ng = new NodeGroup(this);
-			el = ng.getParentNode();
+	const bLength = b.length;
+	let aEnd = a.length;
+	let bEnd = bLength;
+	let aStart = 0;
+	let bStart = 0;
+	let map = null;
+	while (aStart < aEnd || bStart < bEnd) {
+		// append head, tail, or nodes in between: fast path
+		if (aEnd === aStart) {
+			// we could be in a situation where the rest of nodes that
+			// need to be added are not at the end, and in such case
+			// the node to `insertBefore`, if the index is more than 0
+			// must be retrieved, otherwise it's gonna be the first item.
+			const node = bEnd < bLength
+				? (bStart
+					? (b[bStart - 1].nextSibling)
+					: b[bEnd - bStart])
+				: before;
+			while (bStart < bEnd) {
+				let bNode = b[bStart++];
+				parentNode.insertBefore(bNode, node);
+			}
+		}
+		// remove head or tail: fast path
+		else if (bEnd === bStart) {
+			while (aStart < aEnd) {
+				// remove the node only if it's unknown or not live
+				let aNode = a[aStart];
+				if (!map || !map.has(aNode)) {
+					parentNode.removeChild(aNode);
+				}
+				aStart++;
+			}
+		}
+		// same node: fast path
+		else if (a[aStart] === b[bStart]) {
+			aStart++;
+			bStart++;
 		}
+		// same tail: fast path
+		else if (a[aEnd - 1] === b[bEnd - 1]) {
+			aEnd--;
+			bEnd--;
+		}
+			// The once here single last swap "fast path" has been removed in v1.1.0
+			// https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
+		// reverse swap: also fast path
+		else if (
+			a[aStart] === b[bEnd - 1] &&
+			b[bStart] === a[aEnd - 1]
+		) {
+			// this is a "shrink" operation that could happen in these cases:
+			// [1, 2, 3, 4, 5]
+			// [1, 4, 3, 2, 5]
+			// or asymmetric too
+			// [1, 2, 3, 4, 5]
+			// [1, 2, 3, 5, 6, 4]
+			const node = a[--aEnd].nextSibling;
-		let ngm = NodeGroupManager.get(el);
-		if (ng)
-			ng.manager = ngm;
+			let a2 = b[bStart++];
+			let b2 = a[aStart++];
+			parentNode.insertBefore(
+				a2,
+				b2.nextSibling
+			);
-		ngm.options = options;
-		ngm.clearSubscribers = false; // Used for deprecated watch() path?
-		ngm.mutationWatcherEnabled = false;
+			let bNode = b[--bEnd];
+			parentNode.insertBefore(bNode, node);
-		// Fast path for empty component.
-		if (this.html?.length === 1 && !this.html[0]) {
-			el.innerHTML = '';
+			// mark the future index as identical (yeah, it's dirty, but cheap 👍)
+			// The main reason to do this, is that when a[aEnd] will be reached,
+			// the loop will likely be on the fast path, as identical to b[bEnd].
+			// In the best case scenario, the next loop will skip the tail,
+			// but in the worst one, this node will be considered as already
+			// processed, bailing out pretty quickly from the map index check
+			a[aEnd] = b[bEnd];
 		}
+		// map based fallback, "slow" path
 		else {
-			// Find or create a NodeGroup for the template.
-			// This updates all nodes from the template.
-			let close;
-			let exact = ngm.getNodeGroup(this, true);
-			if (!exact) {
-				close = ngm.getNodeGroup(this, false);
+			// the map requires an O(bEnd - bStart) operation once
+			// to store all future nodes indexes for later purposes.
+			// In the worst case scenario, this is a full O(N) cost,
+			// and such scenario happens at least when all nodes are different,
+			// but also if both first and last items of the lists are different
+			if (!map) {
+				map = new Map;
+				let i = bStart;
+				while (i < bEnd)
+					map.set(b[i], i++);
 			}
+			// if it's a future node, hence it needs some handling
+			if (map.has(a[aStart])) {
+				// grab the index of such node, 'cause it might have been processed
+				const index = map.get(a[aStart]);
+				// if it's not already processed, look on demand for the next LCS
+				if (bStart < index && index < bEnd) {
+					let i = aStart;
+					// counts the amount of nodes that are the same in the future
+					let sequence = 1;
+					while (++i < aEnd && i < bEnd && map.get(a[i]) === (index + sequence))
+						sequence++;
+					// effort decision here: if the sequence is longer than replaces
+					// needed to reach such sequence, which would brings again this loop
+					// to the fast path, prepend the difference before a sequence,
+					// and move only the future list index forward, so that aStart
+					// and bStart will be aligned again, hence on the fast path.
+					// An example considering aStart and bStart are both 0:
+					// a: [1, 2, 3, 4]
+					// b: [7, 1, 2, 3, 6]
+					// this would place 7 before 1 and, from that time on, 1, 2, and 3
+					// will be processed at zero cost
+					if (sequence > (index - bStart)) {
+						const node = a[aStart];
+						while (bStart < index) {
+							let bNode = b[bStart++];
+							parentNode.insertBefore(bNode, node);
-			let firstTime = !ngm.rootNg;
-			ngm.rootNg = exact || close;
-			// Reparent NodeGroup
-			// TODO: Move this to NodeGroup?
-			let parent = ngm.rootNg.getParentNode();
-			// If this is the first time rendering this element.
-			if (firstTime) {
-				// Save slot children
-				let fragment;
-				if (el.childNodes.length) {
-					fragment = document.createDocumentFragment();
-					fragment.append(...el.childNodes);
-				}
+						}
+					}
+						// if the effort wasn't good enough, fallback to a replace,
+						// moving both source and target indexes forward, hoping that some
+					// similar node will be found later on, to go back to the fast path
+					else {
+						let aNode = a[aStart++];
+						let bNode = b[bStart++];
+						parentNode.replaceChild(
+							bNode,
+							aNode
+						);
-				// Add rendered elements.
-				if (parent instanceof DocumentFragment)
-					el.append(parent);
-				else if (parent)
-					el.append(...parent.childNodes);
-				// Apply slot children
-				if (fragment) {
-					for (let slot of el.querySelectorAll('slot[name]')) {
-						let name = slot.getAttribute('name');
-						if (name)
-							slot.append(...fragment.querySelectorAll(`[slot='${name}']`));
 					}
-					let unamedSlot = el.querySelector('slot:not([name])');
-					if (unamedSlot)
-						unamedSlot.append(fragment);
 				}
+				// otherwise move the source forward, 'cause there's nothing to do
+				else
+					aStart++;
 			}
+				// this node has no meaning in the future list, so it's more than safe
+				// to remove it, and check the next live node out instead, meaning
+			// that only the live list index should be forwarded
+			else {
+				let aNode = a[aStart++];
+				parentNode.removeChild(aNode);
-			ngm.rootEl = el;
-			// this.rootNg was rendered as childrenOnly=true
-			// Apply attributes from a root element to the real root element.
-			let ng = ngm.rootNg;
-			if (ng.pseudoRoot && ng.pseudoRoot !== el) {
-				// Remove old attributes
-				// for (let attrib of this.rootEl.attributes)
-				// 	if (attrib.name !== 'is' && attrib.name !== 'data-style' && !ng.pseudoRoot.hasAttribute(attrib.name))
-				// 		this.rootEl.removeAttribute(attrib.name)
-				// Add/set new attributes
-				if (firstTime)
-					for (let attrib of ng.pseudoRoot.attributes)
-						if (!el.hasAttribute(attrib.name))
-							el.setAttribute(attrib.name, attrib.value);
-				// ng.startNode = ng.endNode = this.rootEl;
-				// ng.nodesCache = [ng.startNode]
-				// for (let path of ng.paths) {
-				// 	if (path.nodeMarker === ng.rootEl)
-				// 		path.nodeMarker = this.rootEl;
-				// 	path.nodesCache = null;
-				//
-				// }
-				//
-				// ng.rootEl = this.rootEl;
 			}
-			ngm.reset(); // Mark all NodeGroups as available, for next render.
-			window.ngm = ngm;
 		}
-		ngm.mutationWatcherEnabled = true;
-		return el;
-	}
-	getCloseKey() {
-		// Use the joined html when debugging?
-		//return '@'+this.html.join('|')
-		return '@'+this.hashedFields[0];
 	}
-}
+	return b;
+};
 /**
- * Path to where an expression should be evaluated within a Shell.
+ * Path to where an expression should be evaluated within a Shell or NodeGroup.
  * Path is only valid until the expressions before it are evaluated.
  * TODO: Make this based on parent and node instead of path? */
 class ExprPath {
@@ -771,14 +952,9 @@ class ExprPath {
 	 * @type {Node|HTMLElement} */
 	nodeMarker;
-	/** @deprecated */
-	get parentNode() {
-		return this.nodeMarker.parentNode;
-	}
 	// These are set after an expression is assigned:
 	/** @type {NodeGroup} */
 	parentNg;
@@ -786,8 +962,6 @@ class ExprPath {
 	nodeGroups = [];
 	// Caches to make things faster
 	/**
@@ -795,26 +969,23 @@ class ExprPath {
 	 * @type {Node[]} Cached result of getNodes() */
 	nodesCache;
-	// What are these?
+	/**
+	 * @type {int} Index of nodeBefore among its parentNode's children. */
 	nodeBeforeIndex;
-	nodeMarkerPath;
-    // TODO: Keep this cached?
-    expr;
+	/**
+	 * @type {int[]} Path to the node marker, in reverse for performance reasons. */
+	nodeMarkerPath;
-    // for debugging
 	/**
 	 * @param nodeBefore {Node}
 	 * @param nodeMarker {?Node}
-	 * @param type {string}
+	 * @param type {PathType}
 	 * @param attrName {?string}
 	 * @param attrValue {string[]} */
 	constructor(nodeBefore, nodeMarker, type=PathType.Content, attrName=null, attrValue=null) {
 		// If path is a node.
 		this.nodeBefore = nodeBefore;
 		this.nodeMarker = nodeMarker;
@@ -826,21 +997,142 @@ class ExprPath {
 	}
 	/**
+	 * Apply any type of expression.
+	 * This calls other apply functions.
 	 *
-	 * @param expr {Template|Node|Array|function|*}
-	 * @param newNodes {(Node|Template)[]}
-	 * @param secondPass {Array} Locations within newNodes to evaluate later.  */
-	apply(expr, newNodes, secondPass) {
+	 * One very messy part of this function is that it may apply multiple expressions if they're all part
+	 * of the same attribute value.
+	 *
+	 * 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={}) {
+		switch (this.type) {
+			case 1: // PathType.Content:
+				this.applyNodes(expr);
+				break;
+			case 2: // PathType.Multiple:
+				this.applyMultipleAttribs(this.nodeMarker, expr);
+				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);
+				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);
+				}
+				break;
+		}
-		if (expr instanceof Template) {
-			expr.nodegroup = this.parentNg; // All tests pass w/o this.
+		return exprIndex;
+	}
-			let ng = this.parentNg.manager.getNodeGroup(expr, true);
+	/**
+	 * Insert/replace the nodes created by a single expression.
+	 * Called by applyExprs()
+	 * This function is recursive, as the functions it calls also call it.
+	 * @param expr {Expr}
+	 * @return {Node[]} New Nodes created. */
+	applyNodes(expr) {
+		let path = this;
+		/** @type {(Node|NodeGroup|Expr)[]} */
+		let newNodes = [];
+		let oldNodeGroups = path.nodeGroups;
+		let secondPass = []; // indices
+		path.nodeGroups = []; // Reset before applyExact and the code below rebuilds it.
+		path.applyExact(expr, newNodes, secondPass);
+		this.existingTextNodes = null;
+		// TODO: Create an array of old vs Nodes and NodeGroups together.
+		// If they're all the same, skip the next steps.
+		// Or calculate it in the loop above as we go?  Have a path.lastNodeGroups property?
+		// Second pass to find close-match NodeGroups.
+		let flatten = false;
+		if (secondPass.length) {
+			for (let [nodesIndex, ngIndex] of secondPass) {
+				let ng = path.getNodeGroup(newNodes[nodesIndex], false);
+				let ngNodes = ng.getNodes();
-			if (ng) {
+				if (ngNodes.length === 1) // flatten manually so we can skip flattening below.
+					newNodes[nodesIndex] = ngNodes[0];
+				else {
+					newNodes[nodesIndex] = ngNodes;
+					flatten = true;
+				}
+				path.nodeGroups[ngIndex] = ng;
+			}
+			if (flatten)
+				newNodes = newNodes.flat(); // Only if second pass happens.
+		}
+		let oldNodes = path.getNodes();
+		// This pre-check makes it a few percent faster?
+		let same = arraySame(oldNodes, newNodes);
+		if (!same) {
+			path.nodesCache = newNodes; // Replaces value set by path.getNodes()
+			if (this.parentNg.parentPath)
+				this.parentNg.parentPath.clearNodesCache();
+			// Fast clear method
+			let isNowEmpty = oldNodes.length && !newNodes.length;
+			if (!isNowEmpty || !path.fastClear())
+				// Rearrange nodes.
+				udomdiff(path.nodeMarker.parentNode, oldNodes, newNodes, path.nodeMarker);
+			Util.saveOrphans(oldNodeGroups, oldNodes);
+		}
+		// Must happen after second pass.
+		path.freeNodeGroups();
+	}
+	/**
+	 * Apply Nodes that are an exact match.
+	 * @param expr {Template|Node|Array|function|*}
+	 * @param newNodes {(Node|Template)[]}
+	 * @param secondPass {Array} Locations within newNodes to evaluate later. */
+	applyExact(expr, newNodes, secondPass) {
+		if (expr instanceof Template) {
+			let ng = this.getNodeGroup(expr, true);
+			if (ng) {
 				// TODO: Track ranges of changed nodes and only pass those to udomdiff?
 				// But will that break the swap benchmark?
@@ -848,7 +1140,7 @@ class ExprPath {
 				this.nodeGroups.push(ng);
 			}
-			// If expression, evaluate later to find partial match.
+			// If expression, mark it to be evaluated later in ExprPath.apply() to find partial match.
 			else {
 				secondPass.push([newNodes.length, this.nodeGroups.length]);
 				newNodes.push(expr);
@@ -866,21 +1158,26 @@ class ExprPath {
 				newNodes.push(expr);
 		}
+		// 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))
 			for (let subExpr of expr)
-				this.apply(subExpr, newNodes, secondPass);
+				this.applyExact(subExpr, newNodes, secondPass);
 		else if (typeof expr === 'function') {
+			Globals.currentExprPath = [this, expr]; // Used by watch3()
 			let result = expr();
+			Globals.currentExprPath = null;
-			this.apply(result, newNodes, secondPass);
+			this.applyExact(result, newNodes, secondPass);
 		}
 		// Text
 		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 + '';
+			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;
@@ -900,7 +1197,7 @@ class ExprPath {
 				if (idx !== -1)
 					newNodes.push(...this.existingTextNodes.splice(idx, 1));
 				else
-					newNodes.push(this.parentNode.ownerDocument.createTextNode(text));
+					newNodes.push(this.nodeMarker.ownerDocument.createTextNode(text));
 			}
 		}
 	}
@@ -937,7 +1234,7 @@ class ExprPath {
 	/**
 	 * Handle attributes for event binding, such as:
 	 * onclick=${(e, el) => this.doSomething(el, 'meow')}
-	 * onclick=${[this.doSomething, 'meow']}
+	 * oninput=${[this.doSomething, 'meow']}
 	 * onclick=${[this, 'doSomething', 'meow']}
 	 *
 	 * @param node
@@ -946,77 +1243,91 @@ class ExprPath {
 	applyEventAttrib(node, expr, root) {
-		let eventName = this.attrName.slice(2);
+		let eventName = this.attrName.slice(2); // remove "on-" prefix.
 		let func;
 		// Convert array to function.
-		// TODO: This doesn't work for [this, 'doSomething', 'meow']
 		let args = [];
 		if (Array.isArray(expr)) {
-			for (let i=0; i<expr.length; i++)
-				if (typeof expr[i] === 'function') {
-					func = expr[i];
-					args = expr.slice(i+1);
-					break;
-				}
+			// oninput=${[this.doSomething, 'meow']}
+			if (typeof expr[0] === 'function') {
+				func = expr[0];
+				args = expr.slice(1);
+			}
+			// Undocumented.
 			// oninput=${[this, 'value']}
-			if (!func) {
+			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.
 			}
 		}
 		else
 			func = expr;
-		let eventKey = getObjectId(node) + eventName;
-		let [existing, existingBound] = nodeEvents[eventKey] || [];
-		nodeEventArgs[eventKey] = args; // TODO: Put this in nodeEvents[]
+		let nodeEvents = Globals.nodeEvents.get(node);
+		if (!nodeEvents) {
+			nodeEvents = {[eventName]: new Array(3)};
+			Globals.nodeEvents.set(node, nodeEvents);
+		}
+		let nodeEvent = nodeEvents[eventName];
-		if (existing !== func) {
+		// If function has changed, remove and rebind the event.
+		if (nodeEvent[0] !== func) {
+			let [existing, existingBound, _] = nodeEvent;
 			if (existing)
 				node.removeEventListener(eventName, existingBound);
 			let originalFunc = func;
 			// BoundFunc sets the "this" variable to be the current Solarite component.
-			let boundFunc = event => originalFunc.call(root, ...args, event, node);
+			let boundFunc = (event) => {
+				let args = nodeEvent[2];
+				return originalFunc.call(root, ...args, event, node);
+			};
 			// Save both the original and bound functions.
 			// Original so we can compare it against a newly assigned function.
 			// Bound so we can use it with removeEventListner().
-			nodeEvents[eventKey] = [originalFunc, boundFunc];
+			nodeEvent[0] = originalFunc;
+			nodeEvent[1] = boundFunc;
 			node.addEventListener(eventName, boundFunc);
-			// TODO: classic event attribs:
+			// 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.
 		}
+		//  Otherwise just update the args to the function.
+		nodeEvents[eventName][2] = args;
 	}
 	applyValueAttrib(node, exprs, exprIndex) {
 		let expr = exprs[exprIndex];
-		// Array for form element data binding.
-		// TODO: This never worked, and was moved to applyEventAttrib.
-		// let isArrayValue = Array.isArray(expr);
-		// if (isArrayValue && expr.length >= 2 && !expr.slice(1).find(v => !['string', 'number'].includes(typeof v))) {
-		// 	node.value = delve(expr[0], expr.slice(1));
-		// 	node.addEventListener('input', e => {
-		// 		delve(expr[0], expr.slice(1), node.value) // TODO: support other properties like checked
-		// 	});
-		// }
 		// 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, '');
+		// Passing a path to the value attribute.
+		// This same logic is in NodeGroup.createNewComponent() for components.
+		else if ((this.attrName === 'value' || this.attrName === 'data-value') && 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.
+		}
 		// Regular attribute
 		else {
 			let value = [];
@@ -1032,21 +1343,25 @@ class ExprPath {
 						exprIndex--;
 					}
 				}
 				exprIndex ++;
 			}
 			else
 				value.unshift(expr);
 			let joinedValue = value.join('');
-			node.setAttribute(this.attrName, joinedValue);
+			// 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);
+			}
 			// 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;
 		}
 		return exprIndex;
@@ -1056,20 +1371,22 @@ class ExprPath {
 	/**
 	 *
 	 * @param newRoot {HTMLElement}
+	 * @param pathOffset {int}
 	 * @return {ExprPath} */
-	clone(newRoot) {
+	clone(newRoot, pathOffset=0) {
-        // Resolve node paths.
+		// Resolve node paths.
 		let nodeMarker, nodeBefore;
-        let root = newRoot;
-        let path = this.nodeMarkerPath;
-        for (let i=path.length-1; i>0; i--)
-            root = root.childNodes[path[i]];
+		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.
+			root = root.childNodes[path[i]];
 		let childNodes = root.childNodes;
-        nodeMarker = childNodes[path[0]];
-        if (this.nodeBefore)
-            nodeBefore = childNodes[this.nodeBeforeIndex];
+		nodeMarker = path.length ? childNodes[path[0]] : newRoot;
+		if (this.nodeBefore)
+			nodeBefore = childNodes[this.nodeBeforeIndex];
 		let result = new ExprPath(nodeBefore, nodeMarker, this.type, this.attrName, this.attrValue);
@@ -1077,7 +1394,7 @@ class ExprPath {
 		return result;
 	}
 	/**
 	 * Clear the nodeCache of this ExprPath, as well as all parent and child ExprPaths that
 	 * share the same DOM parent node.
@@ -1085,32 +1402,19 @@ class ExprPath {
 	 * TODO: Is recursive clearing ever necessary? */
 	clearNodesCache() {
 		let path = this;
 		// Clear cache parent ExprPaths that have the same parentNode
-		let parentNode = this.parentNode;
-		while (path && path.parentNode === parentNode) {
+		let parentNode = this.nodeMarker.parentNode;
+		while (path && path.nodeMarker.parentNode === parentNode) {
 			path.nodesCache = null;
 			path = path.parentNg?.parentPath;
 			// If stuck in an infinite loop here, the problem is likely due to Template hash colisions.
 			// Which cause one path to be the descendant of itself, creating a cycle.
 		}
-		function clearChildNodeCache(path) {
-			// Clear cache of child ExprPaths that have the same parentNode
-			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) {
-							path2.nodesCache = null;
-							clearChildNodeCache(path2);
-						}
-					}
-			}
-		}
-		clearChildNodeCache(this);
+		// Commented out on Sep 30, 2024 b/c it was making the benchmark never finish when adding 10k rows.
+		//clearChildNodeCache(this);
 	}
@@ -1123,44 +1427,46 @@ class ExprPath {
 			// If parent is the only child of the grandparent, replace the whole parent.
 			// And if it has no siblings, it's not created by a NodeGroup/path.
-			let grandparent = parent.parentNode;
-			if (grandparent && parent === grandparent.firstChild && parent === grandparent.lastChild && !parent.hasAttribute('id')) {
-				let replacement = document.createElement(parent.tagName);
-				replacement.append(this.nodeBefore, this.nodeMarker);
-				for (let attrib of parent.attributes)
-					replacement.setAttribute(attrib.name, attrib.value);
-				parent.replaceWith(replacement);
-			}
-			else {
+			// Commented out because this will break any references.
+			// And because I don't see much performance difference.
+			// let grandparent = parent.parentNode
+			// if (grandparent && parent === grandparent.firstChild && parent === grandparent.lastChild && !parent.hasAttribute('id')) {
+			// 	let replacement = document.createElement(parent.tagName)
+			// 	replacement.append(this.nodeBefore, this.nodeMarker)
+			// 	for (let attrib of parent.attributes)
+			// 		replacement.setAttribute(attrib.name, attrib.value)
+			// 	parent.replaceWith(replacement)
+			// }
+			// else {
 				parent.innerHTML = ''; // Faster than calling .removeChild() a thousand times.
 				parent.append(this.nodeBefore, this.nodeMarker);
-			}
+			//}
 			return true;
 		}
 		return false;
 	}
 	/**
 	 * @return {(Node|HTMLElement)[]} */
 	getNodes() {
 		// Why doesn't this work?
 		// let result2 = [];
 		// for (let ng of this.nodeGroups)
 		// 	result2.push(...ng.getNodes())
 		// return result2;
 		let result;
 		// This shaves about 5ms off the partialUpdate benchmark.
-		/*result = this.nodesCache;
+		result = this.nodesCache;
 		if (result) {
 			return result
-		}*/
+		}
 		result = [];
 		let current = this.nodeBefore.nextSibling;
@@ -1170,20 +1476,107 @@ class ExprPath {
 			current = current.nextSibling;
 		}
-		this.nodesCache = result;
+		this.nodesCache = result;
+		return result;
+	}
+	getParentNode() { // Same as this.parentNode
+		return this.nodeMarker.parentNode
+	}
+	/**
+	 * Get an unused NodeGroup that matches the template's html and expressions (exact=true)
+	 * or at least the html (exact=false).
+	 * Remove it from nodeGroupsFree if it exists, or create it if not.
+	 * Then add it to nodeGroupsInUse.
+	 *
+	 * @param template {Template}
+	 * @param exact {boolean}
+	 *     If true, return an exact match, or null.
+	 *     If false, either find a match for the template's html and then apply the template's expressions,
+	 *         or createa  new NodeGroup from the template.
+	 * @return {NodeGroup} */
+	getNodeGroup(template, exact=true) {
+		//if (exact && this.nodeGroupsFree.isEmpty())
+		//	return null;
+		let result;
+		if (exact) {
+			result = this.nodeGroupsFree.delete(template.getExactKey());
+			if (result) // also delete the matching close key.
+				this.nodeGroupsFree.delete(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 (result) {
+				this.nodeGroupsFree.delete(result.exactKey, result);
+				// Update this close match with the new expression values.
+				result.applyExprs(template.exprs);
+				result.exactKey = template.getExactKey(); // TODO: Should this be set elsewhere?
+			}
+		}
+		if (!result)
+			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);
 		return result;
 	}
-	getParentNode() { // Same as this.parentNode
-		return this.nodeMarker.parentNode
-	}
-	removeNodeGroup(ng) {
-		let idx = this.nodeGroups.indexOf(ng);
-		this.nodeGroups.splice(idx);
-		ng.parentPath = null;
-		this.clearNodesCache();
+	/**
+	 * 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();
+	/**
+	 * 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();
+	/**
+	 * Move everything from this.nodeGroupsInUse to this.nodeGroupsFree.
+	 * 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);
+		}
+		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();
 	}
@@ -1203,26 +1596,27 @@ function setValue(root, path, node) {
 		val = parseFloat(val);
 	delve(root, path, val);
-	//this.render();
 }
-/** @enum {string} */
+/** @enum {int} */
 const PathType = {
 	/** Child of a node */
-	Content: 'content',
+	Content: 1,
 	/** One or more whole attributes */
-	Multiple: 'attrName',
+	Multiple: 2,
 	/** Value of an attribute. */
-	Value: 'attrValue',
+	Value: 3,
 	/** Value of an attribute being passed to a component. */
-	Component: 'component',
+	Component: 4,
 	/** Expressions inside Html comments. */
-	Comment: 'comment',
+	Comment: 5,
+	/** Value of an attribute. */
+	Event: 6,
 };
@@ -1248,28 +1642,24 @@ function resolveNodePath(root, path) {
 	for (let i=path.length-1; i>=0; i--)
 		root = root.childNodes[path[i]];
 	return root;
-}
-// TODO: Memory from this is never freed.  Use a WeakMap<Node, Object<eventName:string, function[]>>
-let nodeEvents = {};
-let nodeEventArgs = {};
+}
 /**
  * A Shell is created from a tagged template expression instantiated as Nodes,
- * but without any expressions filled in. */
+ * but without any expressions filled in.
+ * Only one Shell is created for all the items in a loop.
+ *
+ * When a NodeGroup is created from a Template's html strings,
+ * the NodeGroup then clones the Shell's fragmentn to be its nodes. */
 class Shell {
 	/**
-	 * @type {DocumentFragment} Parent of the shell nodes. */
+	 * @type {DocumentFragment} DOM parent of the shell nodes. */
 	fragment;
 	/** @type {ExprPath[]} Paths to where expressions should go. */
 	paths = [];
-	/** @type {?Template} Template that created this element. */
-	template;
 	// Embeds and ids
 	events = [];
@@ -1281,6 +1671,7 @@ class Shell {
 	staticComponents = [];
 	/**
 	 * Create the nodes but without filling in the expressions.
 	 * This is useful because the expression-less nodes created by a template can be cached.
@@ -1372,7 +1763,9 @@ class Shell {
 						let parts = attr.value.split(/[\ue000-\uf8ff]/g);
 						if (parts.length > 1) {
 							let nonEmptyParts = (parts.length === 2 && !parts[0].length && !parts[1].length) ? null : parts;
-							this.paths.push(new ExprPath(null, node, PathType.Value, attr.name, nonEmptyParts));
+							let type = isEvent(attr.name) ? PathType.Event : PathType.Value;
+							this.paths.push(new ExprPath(null, node, type, attr.name, nonEmptyParts));
 							node.setAttribute(attr.name, parts.join(''));
 						}
 					}
@@ -1384,7 +1777,7 @@ class Shell {
 				// Get or create nodeBefore.
 				let nodeBefore = node.previousSibling; // Can be the same as another Path's nodeMarker.
 				if (!nodeBefore) {
-					nodeBefore = document.createComment('PathStart:'+this.paths.length);
+					nodeBefore = document.createComment('ExprPath:'+this.paths.length);
 					node.parentNode.insertBefore(nodeBefore, node);
 				}
@@ -1400,14 +1793,14 @@ class Shell {
 				// Re-use existing comment placeholder.
 				else {
 					nodeMarker = node;
-					nodeMarker.textContent = 'PathEnd:'+ this.paths.length;
+					nodeMarker.textContent = 'ExprPathEnd:'+ this.paths.length;
 				}
 				let path = new ExprPath(nodeBefore, nodeMarker, PathType.Content);
 				this.paths.push(path);
 			}
@@ -1421,7 +1814,6 @@ class Shell {
 				for (let i=0; i<parts.length-1; i++) {
 					let path = new ExprPath(node.previousSibling, node);
 					path.type = PathType.Comment;
 					this.paths.push(path);
 				}
 			}
@@ -1441,7 +1833,6 @@ class Shell {
 					for (let i=0, node; node=placeholders[i]; i++) {
 						let path = new ExprPath(node.previousSibling, node, PathType.Content);
 						this.paths.push(path);
@@ -1472,22 +1863,25 @@ class Shell {
 			path.nodeMarkerPath = getNodePath(path.nodeMarker);
 			// Cache so we don't have to calculate this later inside NodeGroup.applyExprs()
-			if (path.type === PathType.Value && path.nodeMarker.nodeType === 1 &&
+			if (path.type === PathType.Value && path.nodeMarker.nodeType === 1 && /*path.nodeMarker !== template.content.children[0] &&*/
 				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
 				path.type = PathType.Component;
 			}
 		}
 		this.findEmbeds();
 	} // end constructor
 	/**
 	 * We find the path to every embed here once in the Shell, instead of every time a NodeGroup is instantiated.
-	 * When a Nodegroup is created, it calls NodeGroup.activateEmbeds() that uses these paths. */
+	 * When a Nodegroup is created, it calls NodeGroup.activateEmbeds() that uses these paths.
+	 * Populates:
+	 * this.scripts
+	 * this.styles
+	 * this.ids
+	 * this.staticComponents */
 	findEmbeds() {
 		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('scripts'), el => getNodePath(el));
 		this.styles = Array.prototype.map.call(this.fragment.querySelectorAll('style'), el => getNodePath(el));
@@ -1499,7 +1893,7 @@ class Shell {
 		for (let el of idEls) {
 			let id = el.getAttribute('data-id') || el.getAttribute('id');
 			if (div.hasOwnProperty(id))
-				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement property.`)
+				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement id property.`)
 		}
@@ -1511,228 +1905,36 @@ class Shell {
 				if (isEvent(attrib.name))
 					this.events.push([attrib.name, getNodePath(el)]);
-			if (el.tagName.includes('-') || el.hasAttribute('_is'))
-				// Dynamic components have attributes with expression values.
-				// They are created from applyExprs()
-				// But static components are created in a separate path inside the NodeGroup constructor.
-				if (!this.paths.find(path => path.nodeMarker === el))
-					this.staticComponents.push(getNodePath(el));
-		}
-	}
-	/**
-	 * Get the shell for the html strings.
-	 * @param htmlStrings {string[]}
-	 * @returns {Shell} */
-	static get(htmlStrings) {
-		let result = shells.get(htmlStrings);
-		if (!result) {
-			result = new Shell(htmlStrings);
-			shells.set(htmlStrings, result); // cache
-		}
-		return result;
-	}
-}
-let shells = new WeakMap();
-/**
- * ISC License
- *
- * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
- *
- * Permission to use, copy, modify, and/or distribute this software for any
- * purpose with or without fee is hereby granted, provided that the above
- * copyright notice and this permission notice appear in all copies.
- *
- * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
- * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
- * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
- * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
- * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
- * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
- * PERFORMANCE OF THIS SOFTWARE.
- */
-/**
- * @param {Node} parentNode The container where children live
- * @param {Node[]} a The list of current/live children
- * @param {Node[]} b The list of future children
- * @param {(entry: Node, action: number) => Node} get
- * The callback invoked per each entry related DOM operation.
- * @param {Node} [before] The optional node used as anchor to insert before.
- * @returns {Node[]} The same list of future children.
- */
-const udomdiff = (parentNode, a, b, before) => {
-	const bLength = b.length;
-	let aEnd = a.length;
-	let bEnd = bLength;
-	let aStart = 0;
-	let bStart = 0;
-	let map = null;
-	while (aStart < aEnd || bStart < bEnd) {
-		// append head, tail, or nodes in between: fast path
-		if (aEnd === aStart) {
-			// we could be in a situation where the rest of nodes that
-			// need to be added are not at the end, and in such case
-			// the node to `insertBefore`, if the index is more than 0
-			// must be retrieved, otherwise it's gonna be the first item.
-			const node = bEnd < bLength
-				? (bStart
-					? (b[bStart - 1].nextSibling)
-					: b[bEnd - bStart])
-				: before;
-			while (bStart < bEnd) {
-				let bNode = b[bStart++];
-				parentNode.insertBefore(bNode, node);
-			}
-		}
-		// remove head or tail: fast path
-		else if (bEnd === bStart) {
-			while (aStart < aEnd) {
-				// remove the node only if it's unknown or not live
-				let aNode = a[aStart];
-				if (!map || !map.has(aNode)) {
-					parentNode.removeChild(aNode);
-				}
-				aStart++;
-			}
-		}
-		// same node: fast path
-		else if (a[aStart] === b[bStart]) {
-			aStart++;
-			bStart++;
-		}
-		// same tail: fast path
-		else if (a[aEnd - 1] === b[bEnd - 1]) {
-			aEnd--;
-			bEnd--;
-		}
-			// The once here single last swap "fast path" has been removed in v1.1.0
-			// https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
-		// reverse swap: also fast path
-		else if (
-			a[aStart] === b[bEnd - 1] &&
-			b[bStart] === a[aEnd - 1]
-		) {
-			// this is a "shrink" operation that could happen in these cases:
-			// [1, 2, 3, 4, 5]
-			// [1, 4, 3, 2, 5]
-			// or asymmetric too
-			// [1, 2, 3, 4, 5]
-			// [1, 2, 3, 5, 6, 4]
-			const node = a[--aEnd].nextSibling;
-			let a2 = b[bStart++];
-			let b2 = a[aStart++];
-			parentNode.insertBefore(
-				a2,
-				b2.nextSibling
-			);
-			let bNode = b[--bEnd];
-			parentNode.insertBefore(bNode, node);
-			// mark the future index as identical (yeah, it's dirty, but cheap 👍)
-			// The main reason to do this, is that when a[aEnd] will be reached,
-			// the loop will likely be on the fast path, as identical to b[bEnd].
-			// In the best case scenario, the next loop will skip the tail,
-			// but in the worst one, this node will be considered as already
-			// processed, bailing out pretty quickly from the map index check
-			a[aEnd] = b[bEnd];
-		}
-		// map based fallback, "slow" path
-		else {
-			// the map requires an O(bEnd - bStart) operation once
-			// to store all future nodes indexes for later purposes.
-			// In the worst case scenario, this is a full O(N) cost,
-			// and such scenario happens at least when all nodes are different,
-			// but also if both first and last items of the lists are different
-			if (!map) {
-				map = new Map;
-				let i = bStart;
-				while (i < bEnd)
-					map.set(b[i], i++);
-			}
-			// if it's a future node, hence it needs some handling
-			if (map.has(a[aStart])) {
-				// grab the index of such node, 'cause it might have been processed
-				const index = map.get(a[aStart]);
-				// if it's not already processed, look on demand for the next LCS
-				if (bStart < index && index < bEnd) {
-					let i = aStart;
-					// counts the amount of nodes that are the same in the future
-					let sequence = 1;
-					while (++i < aEnd && i < bEnd && map.get(a[i]) === (index + sequence))
-						sequence++;
-					// effort decision here: if the sequence is longer than replaces
-					// needed to reach such sequence, which would brings again this loop
-					// to the fast path, prepend the difference before a sequence,
-					// and move only the future list index forward, so that aStart
-					// and bStart will be aligned again, hence on the fast path.
-					// An example considering aStart and bStart are both 0:
-					// a: [1, 2, 3, 4]
-					// b: [7, 1, 2, 3, 6]
-					// this would place 7 before 1 and, from that time on, 1, 2, and 3
-					// will be processed at zero cost
-					if (sequence > (index - bStart)) {
-						const node = a[aStart];
-						while (bStart < index) {
-							let bNode = b[bStart++];
-							parentNode.insertBefore(bNode, node);
-						}
-					}
-						// if the effort wasn't good enough, fallback to a replace,
-						// moving both source and target indexes forward, hoping that some
-					// similar node will be found later on, to go back to the fast path
-					else {
-						let aNode = a[aStart++];
-						let bNode = b[bStart++];
-						parentNode.replaceChild(
-							bNode,
-							aNode
-						);
-					}
-				}
-				// otherwise move the source forward, 'cause there's nothing to do
-				else
-					aStart++;
-			}
-				// this node has no meaning in the future list, so it's more than safe
-				// to remove it, and check the next live node out instead, meaning
-			// that only the live list index should be forwarded
-			else {
-				let aNode = a[aStart++];
-				parentNode.removeChild(aNode);
-			}
+			if (el.tagName.includes('-') || el.hasAttribute('_is'))
+				// Dynamic components have attributes with expression values.
+				// They are created from applyExprs()
+				// But static components are created in a separate path inside the NodeGroup constructor.
+				if (!this.paths.find(path => path.nodeMarker === el))
+					this.staticComponents.push(getNodePath(el));
 		}
 	}
-	return b;
-};
+	/**
+	 * Get the shell for the html strings.
+	 * @param htmlStrings {string[]} Typically comes from a Template.
+	 * @returns {Shell} */
+	static get(htmlStrings) {
+		let result = Globals.shells.get(htmlStrings);
+		if (!result) {
+			result = new Shell(htmlStrings);
+			Globals.shells.set(htmlStrings, result); // cache
+		}
+		return result;
+	}
+}
-/** @typedef {boolean|string|number|function|Object|Array|Date|Node} Expr */
+/** @typedef {boolean|string|number|function|Object|Array|Date|Node|Template} Expr */
 /**
  * A group of Nodes instantiated from a Shell, with Expr's filled in.
@@ -1745,16 +1947,17 @@ const udomdiff = (parentNode, a, b, before) => {
  * */
 class NodeGroup {
-	/** @Type {NodeGroupManager} */
-	manager;
+	/**
+	 * @Type {RootNodeGroup} */
+	rootNg;
 	/** @type {ExprPath} */
 	parentPath;
-	/** @type {Node} First node of NodeGroup. Should never be null. */
+	/** @type {Node|HTMLElement} First node of NodeGroup. Should never be null. */
 	startNode;
-	/** @type {Node} A node that never changes that this NodeGroup should always insert its nodes before.
+	/** @type {Node|HTMLElement} A node that never changes that this NodeGroup should always insert its nodes before.
 	 * An empty text node will be created to insertBefore if there's no other NodeMarker and this isn't at the last position.*/
 	endNode;
@@ -1764,13 +1967,9 @@ class NodeGroup {
 	/** @type {string} Key that matches the template and the expressions. */
 	exactKey;
-	/** @type {string} Key that only matches the template.  */
+	/** @type {string} Key that only matches the template. */
 	closeKey;
-	/** @type {boolean} Used by NodeGroupManager. */
-	inUse;
 	/**
 	 * @internal
 	 * @type {Node[]} Cached result of getNodes() used only for improving performance.*/
@@ -1780,133 +1979,58 @@ class NodeGroup {
 	 * @type {?Map<HTMLStyleElement, string>} */
 	styles;
-	/**
-	 * If rendering a Template with replaceMode=true, pseudoRoot points to the element where the attributes are rendered.
-	 * But pseudoRoot is outside of this.getNodes().
-	 * NodeGroupManager.render() copies the attributes from pseudoRoot to the actual web component root element.
-	 * @type {?HTMLElement} */
-	pseudoRoot;
 	currentComponentProps = {};
 	/**
 	 * Create an "instantiated" NodeGroup from a Template and add it to an element.
 	 * @param template {Template}  Create it from the html strings and expressions in this template.
-	 * @param manager {?NodeGroupManager}
-	 * @returns {NodeGroup} */
-	constructor(template, manager=null) {
-		/** @type {Template} */
-		this.template = template;
-		/** @type {NodeGroupManager} */
-		this.manager = manager;
-		// new!
-		template.nodeGroup = this;
-		// Get a cached version of the parsed and instantiated html, and ExprPaths.
-		let shell = Shell.get(template.html);
-		let fragment = shell.fragment.cloneNode(true);
-		// Figure out value of replaceMode option if it isn't set,
-		// Assume replaceMode if there's only one child element and its tagname matches the root el.
-		let replaceMode = typeof template.replaceMode === 'boolean'
-			? template.replaceMode
-			: fragment.children.length===1 &&
-				fragment.firstElementChild?.tagName.replace(/-SOLARITE-PLACEHOLDER$/, '')
-				=== manager?.rootEl?.tagName;
-		if (replaceMode) {
-			this.pseudoRoot = fragment.firstElementChild;
-			// if (!manager.rootEl)
-			// 	manager.rootEl = this.pseudoRoot;
-		}
-		let childNodes = replaceMode
-			? fragment.firstElementChild.childNodes
-			: fragment.childNodes;
+	 * @param parentPath {?ExprPath} */
+	constructor(template, parentPath=null) {
+		if (!(this instanceof RootNodeGroup)) {
+			let [fragment, shell] = this.init(template, parentPath);
+			this.updatePaths(fragment, shell.paths);
-		this.startNode = childNodes[0];
-		this.endNode = childNodes[childNodes.length - 1];
+			this.activateEmbeds(fragment, shell);
-		// Update paths
-		for (let oldPath of shell.paths) {
-			let path = oldPath.clone(fragment);
-			path.parentNg = this;
-			this.paths.push(path);
+			// Apply exprs
+			this.applyExprs(template.exprs);
 		}
-		// Update web component placeholders.
-		// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-		// Is this list needed at all?
-		//for (let component of shell.components)
-		//	this.components.push(resolveNodePath(this.startNode.parentNode, getNodePath(component)))
-		this.activateEmbeds(fragment, shell);
-		// Apply exprs
-		this.applyExprs(template.exprs);
 	}
-	activateEmbeds(root, shell) {
-		// static components
-		// Must happen before ids.
-		for (let path of shell.staticComponents) {
-			let el = resolveNodePath(root, path);
+	/**
+	 * Common init shared by RootNodeGroup and NodeGroup constructors.
+	 * But in a separate function because they need to do this at a different step.
+	 * @param template {Template}  Create it from the html strings and expressions in this template.
+	 * @param parentPath {?ExprPath}
+	 * @param exactKey {?string} Optional, if already calculated.
+	 * @param closeKey {?string}
+	 * @returns {[DocumentFragment, Shell]} */
+	init(template, parentPath=null, exactKey=null, closeKey=null) {
+		this.exactKey = exactKey || template.getExactKey();
+		this.closeKey = closeKey || template.getCloseKey();
-			// Shell doesn't know if a web component is the pseudoRoot so we have to detect it here.
-			if (el.tagName !== this.pseudoRoot?.tagName)
-				this.createNewComponent(el);
-		}
+		this.parentPath = parentPath;
+		this.rootNg = parentPath?.parentNg?.rootNg || this;
-		if (this.manager?.rootEl) {
-			// ids
-			if (this.manager.options.ids !== false)
-				for (let path of shell.ids) {
-					let el = resolveNodePath(root, path);
-					let id = el.getAttribute('data-id') || el.getAttribute('id');
+		/** @type {Template} */
+		this.template = template;
-					// Don't allow overwriting existing class properties if they already have a non-Node value.
-					if (this.manager.rootEl[id] && !(this.manager.rootEl[id] instanceof Node))
-						throw new Error(`${this.manager.rootEl.constructor.name}.${id} already has a value.  `+
-							`Can't set it as a reference to <${el.tagName.toLowerCase()} id="${id}">`);
+		// new!  Is this needed?
+		template.nodeGroup = this;
-					this.manager.rootEl[id] = el;
-				}
+		// Get a cached version of the parsed and instantiated html, and ExprPaths.
+		let shell = Shell.get(template.html);
+		let fragment = shell.fragment.cloneNode(true);
-			// styles
-			if (this.manager.options.styles !== false) {
-				if (shell.styles.length)
-					this.styles = new Map();
-				for (let path of shell.styles) {
-					let style = resolveNodePath(root, path);
-					Util.bindStyles(style, this.manager.rootEl);
-					this.styles.set(style, style.textContent);
-				}
+		let childNodes = fragment.childNodes;
+		this.startNode = childNodes[0];
+		this.endNode = childNodes[childNodes.length - 1];
-			}
-			// scripts
-			if (this.manager.options.scripts !== false) {
-				for (let path of shell.scripts) {
-					let script = resolveNodePath(root, path);
-					eval(script.textContent);
-				}
-			}
-		}
+		return [fragment, shell];
 	}
 	/**
@@ -1916,8 +2040,9 @@ class NodeGroup {
 	 * @param paths {?ExprPath[]} Optional.  */
 	applyExprs(exprs, paths=null) {
 		paths = paths || this.paths;
 		// Update exprs at paths.
 		let exprIndex = exprs.length-1, expr, lastNode;
@@ -1927,54 +2052,24 @@ class NodeGroup {
 			expr = exprs[exprIndex];
 			// Nodes
-			if (path.type === PathType.Content) {
-				this.applyNodeExpr(path, expr);
-			}
-			// Attributes
-			else {
-				let node = path.nodeMarker;
-				let el = (this.manager?.rootEl && node === this.pseudoRoot) ? this.manager.rootEl : node;
-				// This is necessary both here and below.
-				if (lastNode && lastNode !== this.pseudoRoot && lastNode !== node && Object.keys(this.currentComponentProps).length) {
-					this.applyComponentExprs(lastNode, this.currentComponentProps);
-					this.currentComponentProps = {};
-				}
-				if (path.type === PathType.Multiple)
-					path.applyMultipleAttribs(el, expr);
-				// Capture attribute expressions to later send to the constructor of a web component.
-				// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-				else if (path.nodeMarker !== this.pseudoRoot && path.type === PathType.Component)
-					this.currentComponentProps[path.attrName] = expr;
-				else if (path.type === PathType.Comment) ;
-				else {
+			// This is necessary both here and below.
+			if (lastNode && lastNode !== this.rootNg.root && lastNode !== path.nodeMarker && Object.keys(this.currentComponentProps).length) {
+				this.applyComponentExprs(lastNode, this.currentComponentProps);
+				this.currentComponentProps = {};
+			}
-					// Event attribute value
-					if (path.attrValue===null && (typeof expr === 'function' || Array.isArray(expr)) && isEvent(path.attrName)) {
-						let root = this.manager?.rootEl || this.startNode.parentNode;  // latter is used when constructing a whole element.
-						path.applyEventAttrib(el, expr, root);
-					}
+			exprIndex = path.apply(expr, exprs, exprIndex, this.currentComponentProps);
-					// Regular attribute value.
-					else // One node value may have multiple expressions.  Here we apply them all at once.
-						exprIndex = path.applyValueAttrib(el, exprs, exprIndex);
-				}
+			lastNode = path.nodeMarker;
-				lastNode = path.nodeMarker;
-			}
 			exprIndex--;
 		} // end for(path of this.paths)
 		// Check again after we iterate through all paths to apply to a component.
-		if (lastNode && lastNode !== this.pseudoRoot && Object.keys(this.currentComponentProps).length) {
+		if (lastNode && lastNode !== this.rootNg.root && Object.keys(this.currentComponentProps).length) {
 			this.applyComponentExprs(lastNode, this.currentComponentProps);
 			this.currentComponentProps = {};
 		}
@@ -1990,125 +2085,10 @@ class NodeGroup {
-	}
-	applyExpr(path, expr) {
-		// TODO: Use this if I can figure out how to adapt applyValueAttrib() to it.
-	}
-	/**
-	 * Insert/replace the nodes created by a single expression.
-	 * Called by applyExprs()
-	 * This function is recursive, as the functions it calls also call it.
-	 * TODO: Move this to ExprPath?
-	 * @param path {ExprPath}
-	 * @param expr {Expr}
-	 * @return {Node[]} New Nodes created. */
-	applyNodeExpr(path, expr) {
-		/** @type {(Node|NodeGroup|Expr)[]} */
-		let newNodes = [];
-		let oldNodeGroups = path.nodeGroups;
-		let secondPass = []; // indices
-		// First Pass
-		//for (let ng of path.nodeGroups) // TODO: Is this necessary?
-		//	ng.parentPath = null;
-		path.nodeGroups = [];
-		path.apply(expr, newNodes, secondPass);
-		this.existingTextNodes = null;
-		// TODO: Create an array of old vs Nodes and NodeGroups together.
-		// If they're all the same, skip the next steps.
-		// Or calculate it in the loop above as we go?  Have a path.lastNodeGroups property?
-		// Second pass to find close-match NodeGroups.
-		let flatten = false;
-		if (secondPass.length) {
-			for (let [nodesIndex, ngIndex] of secondPass) {
-				let ng = this.manager.getNodeGroup(newNodes[nodesIndex], false);
-				ng.parentPath = path;
-				let ngNodes = ng.getNodes();
-				if (ngNodes.length === 1)
-					newNodes[nodesIndex] = ngNodes[0];
-				else {
-					newNodes[nodesIndex] = ngNodes;
-					flatten = true;
-				}
-				path.nodeGroups[ngIndex] = ng;
-			}
-			if (flatten)
-				newNodes = newNodes.flat(); // TODO: Only if second pass happens?
-		}
-		let oldNodes = path.getNodes();
-		path.nodesCache = newNodes; // Replaces value set by path.getNodes()
-		// This pre-check makes it a few percent faster?
-		let diff = findArrayDiff(oldNodes, newNodes);
-		if (diff !== false) {
-			if (this.parentPath)
-				this.parentPath.clearNodesCache();
-			// Fast clear method
-			let isNowEmpty = oldNodes.length && !newNodes.length;
-			if (!isNowEmpty || !path.fastClear(oldNodes, newNodes))
-				// Rearrange nodes.
-				udomdiff(path.parentNode, oldNodes, newNodes, path.nodeMarker);
-			this.saveOrphans(oldNodeGroups, oldNodes);
-		}
-	}
-	/**
-	 * Find NodeGroups that had their nodes removed and add those nodes to a Fragment so
-	 * they're not lost forever and the NodeGroup's internal structure is still consistent.
-	 * Called from NodeGroup.applyNodeExpr().
-	 * @param oldNodeGroups {NodeGroup[]}
-	 * @param oldNodes {Node[]} */
-	saveOrphans(oldNodeGroups, oldNodes) {
-		let oldNgMap = new Map();
-		for (let ng of oldNodeGroups) {
-			oldNgMap.set(ng.startNode, ng);
-			// TODO: Is this necessary?
-			// if (ng.parentPath)
-			// 	ng.parentPath.clearNodesCache();
-		}
-		for (let i=0, node; node = oldNodes[i]; i++) {
-			let ng;
-			if (!node.parentNode && (ng = oldNgMap.get(node))) {
-				let fragment = document.createDocumentFragment();
-				let endNode = ng.endNode;
-				while (node !== endNode) {
-					fragment.append(node);
-					i++;
-					node = oldNodes[i];
-				}
-				fragment.append(endNode);
-			}
-		}
 	}
 	/**
-	 * Create a nested RedComponent or call render with the new props.
+	 * Create a nested Component or call render with the new props.
 	 * @param el {Solarite:HTMLElement}
 	 * @param props {Object} */
 	applyComponentExprs(el, props) {
@@ -2126,14 +2106,14 @@ class NodeGroup {
 		if (isPreHtmlElement || isPreIsElement)
 			el = this.createNewComponent(el, isPreHtmlElement, props);
-		// Update params of placeholder.
+		// Call render() with the same params that would've been passed to the constructor.
 		else if (el.render) {
-			let oldHash = componentHash.get(el);
+			let oldHash = Globals.componentHash.get(el);
 			if (oldHash !== newHash)
 				el.render(props); // Pass new values of props to render so it can decide how it wants to respond.
 		}
-		componentHash.set(el, newHash);
+		Globals.componentHash.set(el, newHash);
 	}
 	/**
@@ -2176,33 +2156,43 @@ class NodeGroup {
 		// We pass the childNodes to the constructor so it can know about them,
 		// instead of only afterward when they're appended to the slot below.
 		// This is useful for a custom selectbox, for example.
-		// NodeGroupManager.pendingChildren stores the childen so the super construtor call to Solarite's constructor
+		// Globals.pendingChildren stores the childen so the super construtor call to Solarite's constructor
 		// can add them as children before the rest of the constructor code executes.
 		let ch = [... el.childNodes];
-		NodeGroupManager.pendingChildren.push(ch);  // pop() is called in Solarite constructor.
+		Globals.pendingChildren.push(ch);  // pop() is called in Solarite constructor.
 		let newEl = new Constructor(props, ch);
 		if (!isPreHtmlElement)
 			newEl.setAttribute('is', el.getAttribute('is').toLowerCase());
 		el.replaceWith(newEl);
 		// Set children / slot children
 		// TODO: Match named slots.
 		// TODO: This only appends to slot if render() is called in the constructor.
 		//let slot = newEl.querySelector('slot') || newEl;
 		//slot.append(...el.childNodes);
 		// Copy over event attributes.
 		for (let propName in props) {
 			let val = props[propName];
 			if (propName.startsWith('on') && typeof val === 'function')
 				newEl.addEventListener(propName.slice(2), e => val(e, newEl));
+			// Bind array based event attributes on value.
+			// This same logic is in ExprPath.applyValueAttrib() for non-components.
+			if ((propName === 'value' || propName === 'data-value') && Util.isPath(val)) {
+				let [obj, path] = [val[0], val.slice(1)];
+				newEl.value = delve(obj, path);
+				newEl.addEventListener('input', e => {
+					delve(obj, path, Util.getInputValue(newEl));
+				}, true); // We use capture so we update the values before other events added by the user.
+			}
 		}
 		// If an id pointed at the placeholder, update it to point to the new element.
 		let id = el.getAttribute('data-id') || el.getAttribute('id');
 		if (id)
-			this.manager.rootEl[id] = newEl;
+			delve(this.getRootNode(), id.split(/\./g), newEl);
 		// Update paths to use replaced element.
@@ -2267,373 +2257,347 @@ class NodeGroup {
 		return result;
 	}
-	getParentNode() {
-		return this.startNode?.parentNode
-	}
-	updateStyles() {
-		if (this.styles)
-			for (let [style, oldText] of this.styles) {
-				let newText = style.textContent;
-				if (oldText !== newText)
-					Util.bindStyles(style, this.manager.rootEl);
-			}
-	}
-}
-let componentHash = new WeakMap();
-/**
- * Tools for watch variables and performing precise renders.
- */
-function serializePath(path) {
-	// Convert any array indices to strings, so serialized comparisons work.
-	return JSON.stringify([getObjectId(path[0]), ...path.slice(1).map(item => item+'')])
-}
-/**
- * @typedef {Object} RenderOptions
- * @property {boolean=} styles - Indicates whether the Courage component is present.
- * @property {boolean=} scripts - Indicates whether the Power component is present.
- * @property {boolean=} ids *
- * @property {?boolean} render
- * 	   Used only when options are given to a class super constructor inheriting from Solarite.
- *     True to call render() immediately in super constructor.
- *     False to automatically call render() at all.
- *     Undefined (default) to call render() when added to the DOM, unless already rendered.
- */
-/**
- * Manage all the NodeGroups for a single WebComponent or root HTMLElement
- * There's one NodeGroup for the root of the WebComponent, and one for every ${...} expression that creates Node children.
- * And each NodeGroup manages the one or more nodes created by the expression.
- *
- * An instance of this class exists for each element that r() renders to. */
-class NodeGroupManager {
-	/** @type {HTMLElement|DocumentFragment} */
-	rootEl;
-	/** @type {NodeGroup} */
-	rootNg;
-	/** @type {Change[]} */
-	changes = [];
+	getParentNode() {
+		return this.startNode?.parentNode
+	}
+	/**
+	 * Get the root element of the NodeGroup's RootNodeGroup.
+	 * @returns {HTMLElement|DocumentFragment} */
+	getRootNode() {
+		return this.rootNg.root;
+	}
 	/**
-	 * A map from the html strings and exprs that created a node group, to the NodeGroup.
-	 * Also stores a map from just the html strings to the NodeGroup, so we can still find a similar match if the exprs changed.
-	 *
-	 * @type {MultiValueMap<string, (string|Template)[], NodeGroup>} */
-	nodeGroupsAvailable = new MultiValueMap();
-	nodeGroupsInUse = [];
+	 * @returns {RootNodeGroup} */
+	getRootNodeGroup() {
+		return this.rootNg;
+	}
-	/** @type {RenderOptions} */
-	options = {};
+	updatePaths(fragment, paths, offset) {
+		// Update paths to point to the fragment.
+		this.paths.length = paths.length;
+		for (let i=0; i<paths.length; i++) {
+			let path = paths[i].clone(fragment, offset);
+			path.parentNg = this;
+			this.paths[i] = path;
+		}
+	}
+	updateStyles() {
+		if (this.styles)
+			for (let [style, oldText] of this.styles) {
+				let newText = style.textContent;
+				if (oldText !== newText)
+					Util.bindStyles(style, this.getRootNodeGroup().root);
+			}
+	}
 	/**
-	 * @param rootEl {HTMLElement|DocumentFragment} If not specified, the first element of the html will be the rootEl. */
-	constructor(rootEl=null) {
-		this.rootEl = rootEl;
+	 * @param root {HTMLElement}
+	 * @param shell {Shell}
+	 * @param pathOffset {int} */
+	activateEmbeds(root, shell, pathOffset=0) {
-		/*
-		*/
-	}
+		// static components.  These are WebComponents not created by an expression.
+		// Must happen before ids.
+		for (let path of shell.staticComponents) {
+			if (pathOffset)
+				path = path.slice(0, -pathOffset);
+			let el = resolveNodePath(root, path);
+			// Shell doesn't know if a web component is the pseudoRoot so we have to detect it here.
+			if (root !== el/* && !isReplaceEl(root, el)*/) // TODO: is isReplaceEl necessary?
+				this.createNewComponent(el);
+		}
-	/**
-	 *
-	 * 1.  Delete a NodeGroup from this.nodeGroupsAvailable that matches this exactKey.
-	 * 2.  Then delete all of that NodeGroup's parents' exactKey entries
-	 *     We don't move them to in-use because we plucked the NodeGroup from them, they no longer match their exactKeys.
-	 * 3.  Then we move all the NodeGroup's exact+close keyed children to inUse because we don't want future calls
-	 *     to getNodeGroup() to borrow the children now that the whole NodeGroup is in-use.
-	 *
-	 * TODO: Have NodeGroups keep track of whether they're inUse.
-	 * That way when we go up or down we don't have to remove those with .inUse===true
-	 *
-	 * @param exactKey
-	 * @param goUp
-	 * @param child
-	 * @returns {?NodeGroup} */
-	findAndDeleteExact(exactKey, goUp=true, child=undefined) {
-		let ng = this.nodeGroupsAvailable.delete(exactKey, child);
-		if (ng) {
-			// Mark close-key version as in-use.
-			let closeNg = this.nodeGroupsAvailable.delete(ng.closeKey, ng);
+		let rootEl = this.rootNg.root;
+		if (rootEl) {
-			// Mark our self as in-use.
-			this.nodeGroupsInUse.push(ng);
-			ng.inUse = true;
-			closeNg.inUse = true;
-			// Mark all parents that have this NodeGroup as a child as in-use.
-			// So that way we don't use this parent again
-			if (goUp) {
-				let ng2 = ng;
-				while (ng2 = ng2?.parentPath?.parentNg) {
-					if (!ng2.inUse) {
-						ng2.inUse = true;
-						let success = this.nodeGroupsAvailable.delete(ng2.exactKey, ng2);
-						// assert(success);
-						let success2 = this.nodeGroupsAvailable.delete(ng2.closeKey, ng2);
-						// assert(success);
+			// ids
+			if (this.options?.ids !== false)
+				for (let path of shell.ids) {
+					if (pathOffset)
+						path = path.slice(0, -pathOffset);
+					let el = resolveNodePath(root, path);
+					let id = el.getAttribute('data-id') || el.getAttribute('id');
+					if (id) { // If something hasn't removed the id.
-						// console.log(getHtml(ng2))
-						if (success) {
-							this.nodeGroupsInUse.push(ng2);
-						}
+						// Don't allow overwriting existing class properties if they already have a non-Node value.
+						if (rootEl[id] && !(rootEl[id] instanceof Node))
+							throw new Error(`${rootEl.constructor.name}.${id} already has a value.  ` +
+								`Can't set it as a reference to <${el.tagName.toLowerCase()} id="${id}">`);
+						delve(rootEl, id.split(/\./g), el);
 					}
 				}
-			}
-			// Recurse to mark all child NodeGroups as in-use.
-			for (let path of ng.paths)
-				for (let childNg of path.nodeGroups) {
-					if (!childNg.inUse)
-						this.findAndDeleteExact(childNg.exactKey, false, childNg);
-					childNg.inUse = true;
+			// styles
+			if (this.options?.styles !== false) {
+				if (shell.styles.length)
+					this.styles = new Map();
+				for (let path of shell.styles) {
+					if (pathOffset)
+						path = path.slice(0, -pathOffset);
+					let style = resolveNodePath(root, path);
+					Util.bindStyles(style, rootEl);
+					this.styles.set(style, style.textContent);
 				}
-			if (ng.parentPath) ;
-			return ng;
-		}
-		return null;
-	}
-	/**
-	 * @param closeKey {string}
-	 * @param exactKey {string}
-	 * @param goUp {boolean}
-	 * @returns {NodeGroup} */
-	findAndDeleteClose(closeKey, exactKey, goUp=true) {
-		let ng = this.nodeGroupsAvailable.delete(closeKey);
-		if (ng) {
-			// We matched on a new key, so delete the old exactKey.
-			let exactNg = this.nodeGroupsAvailable.delete(ng.exactKey, ng);
-			ng.inUse = true;
-			if (goUp) {
-				let ng2 = ng;
-				// We borrowed a node from another node group so make sure its parent isn't still an exact match.
-				while (ng2 = ng2?.parentPath?.parentNg) {
-					if (!ng2.inUse) {
-						ng2.inUse = true; // Might speed it up slightly?
-						let success = this.nodeGroupsAvailable.delete(ng2.exactKey, ng2);
-						// But it can still be a close match, so we don't use this code.
-						success = this.nodeGroupsAvailable.delete(ng2.closeKey, ng2);
-						this.nodeGroupsInUse.push(ng2);
-					}
+			}
+			// scripts
+			if (this.options?.scripts !== false) {
+				for (let path of shell.scripts) {
+					if (pathOffset)
+						path = path.slice(0, -pathOffset);
+					let script = resolveNodePath(root, path);
+					eval(script.textContent);
 				}
 			}
+		}
+	}
+}
-			// Recursively mark all child NodeGroups as in-use.
-			// We actually DON't want to do this becuse applyExprs is going to swap out the child NodeGroups
-			// and mark them as in-use as it goes.
-			// that's probably why uncommenting this causes tests to fail.
-			// for (let path of ng.paths)
-			// 	for (let childNg of path.nodeGroups)
-			// 		this.findAndDeleteExact(childNg.exactKey, false, childNg);
+class RootNodeGroup extends NodeGroup {
-			ng.exactKey = exactKey;
-			ng.closeKey = closeKey;
-			this.nodeGroupsInUse.push(ng);
-			if (ng.parentPath) ;
-		}
-		return ng;
-	}
+	/**
+	 * Root node at the top of the hierarchy.
+	 * @type {HTMLElement} */
+	root;
 	/**
-	 * Get an existing or create a new NodeGroup that matches the template,
-	 * but don't reparent it if it's somewhere else.
-	 * @param template {Template}
-	 * @param exact {?boolean}
-	 * @param createForWatch Deprecated.
-	 * @return {?NodeGroup} */
-	getNodeGroup(template, exact=null, createForWatch=false) {
+	 *
+	 * @param template
+	 * @param el
+	 * @param options {?object}
+	 */
+	constructor(template, el, options) {
+		super(template);
-		let exactKey = getObjectHash(template);
+		this.options = options;
-		// 1. Try to find an exact match.
-		let ng;
-		if (exact === true) {
-			ng = this.findAndDeleteExact(exactKey);
+		this.rootNg = this;
+		let [fragment, shell] = this.init(template);
-			if (!ng) {
-				return null;
+		// If adding NodeGroup to an element.
+		let offset = 0;
+		let root = fragment; // TODO: Rename so it's not confused with this.root.
+		if (el) {
+			// Save slot children
+			let slotFragment;
+			if (el.childNodes.length) {
+				slotFragment = document.createDocumentFragment();
+				slotFragment.append(...el.childNodes);
 			}
-		}
-		// 2.  Try to find a close match.
-		else {
-			// We don't need to delete the exact match bc it's already been deleted in the prev pass.
-			let closeKey = template.getCloseKey();
-			ng = createForWatch ? null : this.findAndDeleteClose(closeKey, exactKey);
+			this.root = el;
-			// 2. Update expression values if they've changed.
-			if (ng) {
-				// Temporary for debugging:
-				if (window.debug && !window.ng)
-					window.ng = ng;
-				ng.applyExprs(template.exprs);
+			// If el should replace the root node of the fragment.
+			if (isReplaceEl(fragment, el)) {
+				el.append(...fragment.children[0].childNodes);
-			}
+				// Copy attributes
+				for (let attrib of fragment.children[0].attributes)
+					if (!el.hasAttribute(attrib.name))
+						el.setAttribute(attrib.name, attrib.value);
-			// 3. Or if not found, create a new NodeGroup
+				// Go one level deeper into all of shell's paths.
+				offset = 1;
+			}
 			else {
-				ng = new NodeGroup(template, this);
+				let isEmpty = fragment.childNodes.length === 1 && fragment.childNodes[0].nodeType === 3 && fragment.childNodes[0].textContent === '';
+				if (!isEmpty)
+					el.append(...fragment.childNodes);
+			}
-				// 4. Mark NodeGroup as being in-use.
-				// TODO: Moving from one group to another thrashes the gc.  Is there a faster way?
-				// Could I have just a single WeakSet of those in use?
-				// Perhaps also result could cache its last exprKey and then we'd use only one map?
-				ng.exactKey = exactKey;
-				ng.closeKey = closeKey;
-				if (createForWatch)
-					this.nodeGroupsAvailable.add(ng.exactKey, ng);
+			// Setup slots
+			if (slotFragment) {
+				for (let slot of el.querySelectorAll('slot[name]')) {
+					let name = slot.getAttribute('name');
+					if (name) {
+						let slotChildren = slotFragment.querySelectorAll(`[slot='${name}']`);
+						slot.append(...slotChildren);
+					}
+				}
+				let unamedSlot = el.querySelector('slot:not([name])');
+				if (unamedSlot)
+					unamedSlot.append(slotFragment);
 				else
-					this.nodeGroupsInUse.push(ng);
+					el.append(slotFragment);
 			}
+			root = el;
+			this.startNode = el;
+			this.endNode = el;
 		}
-		// New!
-		// We clear the parent PathExpr's nodesCache when we remove ourselves from it.
-		// Benchmarking shows this doesn't slow down the partialUpdate benchmark.
-		if (ng.parentPath) {
-			// ng.parentPath.clearNodesCache(); // Makes partialUpdate benchmark 10x slower!
-		 	ng.parentPath = null;
+		else {
+			let singleEl = getSingleEl(fragment);
+			this.root = singleEl || fragment; // We return the whole fragment when calling r() with a collection of nodes.
+			if (singleEl) {
+				root = singleEl;
+				offset = 1;
+			}
 		}
+		this.updatePaths(root, shell.paths, offset);
-		return ng;
+		this.activateEmbeds(root, shell, offset);
+		// Apply exprs
+		this.applyExprs(template.exprs);
 	}
+}
-	reset() {
-		//this.changes = [];
-		let available = this.nodeGroupsAvailable;
-		for (let ng of this.nodeGroupsInUse) {
-			ng.inUse = false;
-			available.add(ng.exactKey, ng);
-			available.add(ng.closeKey, ng);
+function getSingleEl(fragment) {
+	let nonempty = [];
+	for (let n of fragment.childNodes) {
+		if (n.nodeType === 1 || n.nodeType === 3 && n.textContent.trim().length) {
+			if (nonempty.length)
+				return null;
+			nonempty.push(n);
 		}
-		this.nodeGroupsInUse = [];
+	}
+	return nonempty[0];
+}
+/**
+ * Does the fragment have one child that's an element matching the tagname of el?
+ * @param fragment {DocumentFragment}
+ * @param el {HTMLElement}
+ * @returns {boolean} */
+function isReplaceEl(fragment, el) {
+	return el.tagName.includes('-')
+		&& fragment.children.length===1
+		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
+}
+/**
+ * The html strings and evaluated expressions from an html tagged template.
+ * A unique Template is created for each item in a loop.
+ * Although the reference to the html strings is shared among templates. */
+class Template {
-		// Used for watches
-		this.changes = [];
+	/** @type {(Template|string|function)|(Template|string|function)[]} Evaulated expressions.  */
+	exprs = []
-		// TODO: free the memory from any nodeGroupsAvailable() after render is done, since they weren't used?
-	}
+	/** @type {string[]} */
+	html = [];
+	/** @type {Array} Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
+	hashedFields;
-	// deprecated
-	//pathToLoopInfo = new MultiValueMap(); // uses a Set() for each value.
-	clearSubscribers = false;
+	/**
+    * @deprecated
+    * @type {ExprPath} Used with forEach() from watch.js
+	 * Set in ExprPath.apply() */
+	parentPath;
+	/** @type {NodeGroup} */
+	nodeGroup;
 	/**
-	 * @deprecated
-	 * Store the functions used to create items for each loop.
-	 * TODO: Can this be combined with pathToTemplates?
-	 * @type {MultiValueMap<string, Subscriber>} */
-	pathToLoopInfo = new MultiValueMap();
+	 * @type {string[][]} */
+	paths = [];
 	/**
-	 * Maps variable paths to the templates used to create NodeGroups
-	 * @type {MultiValueMap<string, Subscriber>} */
-	subscribers = new MultiValueMap();
-	clearSubscribersIfNeeded() {
-		if (this.clearSubscribers) {
-			this.pathToLoopInfo = new MultiValueMap();
-			this.subscribers = new MultiValueMap();
-			this.clearSubscribers = false;
-		}
+	 *
+	 * @param htmlStrings {string[]}
+	 * @param exprs {*[]} */
+	constructor(htmlStrings, exprs) {
+		this.html = htmlStrings;
+		this.exprs = exprs;
+		//this.trace = new Error().stack.split(/\n/g)
+		// Multiple templates can share the same htmlStrings array.
+		//this.hashedFields = [getObjectId(htmlStrings), exprs]
 	}
 	/**
-	 * Get the NodeGroupManager for a Web Component.
-	 * @param rootEl {Solarite|HTMLElement}
-	 * @return {NodeGroupManager} */
-	static get(rootEl=null) {
-		if (!rootEl)
-			return new NodeGroupManager();
+	 * Called by JSON.serialize when it encounters a Template.
+	 * This prevents the hashed version from being too large. */
+	toJSON() {
+		if (!this.hashedFields)
+			this.hashedFields = [getObjectId(this.html), this.exprs];
+		return this.hashedFields
+	}
+	/**
+	 * Render the main template, which may indirectly call renderTemplate() to create children.
+	 * @param el {HTMLElement}
+	 * @param options {RenderOptions}
+	 * @return {?DocumentFragment|HTMLElement} */
+	render(el=null, options={}) {
+		let ng;
+		let standalone = !el;
+		let firstTime = false;
+		// Rendering a standalone element.
+		// TODO: figure out when to not use RootNodeGroup
+		if (standalone) {
+			ng = new RootNodeGroup(this, null, options);
+			el = ng.getRootNode();
+			Globals.nodeGroups.set(el, ng);
+			firstTime = true;
+		}
+		else {
+			ng = Globals.nodeGroups.get(el);
+			if (!ng) {
+				ng = new RootNodeGroup(this, el, options);
+				Globals.nodeGroups.set(el, ng);
+				firstTime = true;
+			}
+		}
-		let ngm = nodeGroupManagers.get(rootEl);
-		if (!ngm) {
-			ngm = new NodeGroupManager(rootEl);
-			nodeGroupManagers.set(rootEl, ngm);
+		// Creating the root nodegroup also renders it.
+		// If we didn't just create it, we need to render it.
+		if (!firstTime) {
+			if (this.html?.length === 1 && !this.html[0])
+				el.innerHTML = ''; // Fast path for empty component.
+			else
+				ng.applyExprs(this.exprs);
 		}
-		return ngm;
+		return el;
+	}
+	getExactKey() {
+		if (!this.exactKey)
+			this.exactKey = getObjectHash(this); // calls this.toJSON().
+		return this.exactKey;
 	}
+	getCloseKey() {
+		if (!this.closeKey)
+			this.closeKey = '@'+this.toJSON()[0];
+		// Use the joined html when debugging?  But it breaks some tests.
+		//return '@'+this.html.join('|')
+		return this.closeKey;
+	}
 }
-NodeGroupManager.pendingChildren = [];
 /**
- * Each Element that has Expr children has an associated NodeGroupManager here.
- * @type {WeakMap<HTMLElement, NodeGroupManager>} */
-let nodeGroupManagers = new WeakMap();
+ * @typedef {Object} RenderOptions
+ * @property {boolean=} styles - Replace :host in style tags to scope them locally.
+ * @property {boolean=} scripts - Execute script tags.
+ * @property {boolean=} ids - Create references to elements with id or data-id attributes.
+ * @property {?boolean} render - Deprecated.
+ * 	 Used only when options are given to a class super constructor inheriting from Solarite.
+ *     True to call render() immediately in super constructor.
+ *     False to automatically call render() at all.
+ *     Undefined (default) to call render() when added to the DOM, unless already rendered.
+ */
 /**
  * Convert strings to HTMLNodes.
@@ -2648,142 +2612,142 @@ let nodeGroupManagers = new WeakMap();
  * 5. TODO:  list more
  *
  * Currently supported:
- * 1. r`<b>Hello${'World'}!`           // Create Template that can later be used to create nodes.
+ * 1. r(el, options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
+ * 2. r(el, template, ?options)        // Render the Template created by #1 to element.
  *
- * 2. r(el, template, ?options)        // Render the template created by #1 to element.
- * 3. r(el, options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
+ * 3. r`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
  *
  * 4. r('Hello');                      // Create single text node.
  * 5. r('<b>Hello</b>');               // Create single HTMLElement
  * 6. r('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
- * 7. r()`Hello<b>${'World'}!</b>`     // Same as 4-6, but evaluates the string as a Solarite template, which includes properly handling nested components and r`` sub-expressions.
+ * 7. r()`Hello<b>${'World'}!</b>`     // Same as 4-6, but evaluates the string as a Solarite template, which
+ *                                     // includes properly handling nested components and r`` sub-expressions.
  * 8. r(template)                      // Render Template created by #1.
- * 9. r(() => r`<b>Hello</b>`, {...}); // Create dynamic element that has a render() function.
  *
- * @param htmlStrings {?HTMLElement|string|string[]|function():Template}
+ * 9. r({render(){...}})              // Pass an object with a render method, and optionally other props/methods.
+ *
+ * @param htmlStrings {?HTMLElement|string|string[]|function():Template|{render:function()}}
  * @param exprs {*[]|string|Template|Object}
  * @return {Node|HTMLElement|Template} */
 function r(htmlStrings=undefined, ...exprs) {
-    // 1. Path if used as a template tag.
-    if (Array.isArray(htmlStrings)) {
-        return new Template(htmlStrings, exprs);
-    }
-    else if (htmlStrings instanceof Node) {
-        let parent = htmlStrings, template = exprs[0];
-        // 2. Render template created by #4 to element.
-        if (exprs[0] instanceof Template) {
-            let options = exprs[1];
-            template.render(parent, options);
-            // Append on the first go.
-            if (!parent.childNodes.length && this) {
-                // TODO: Is htis ever executed?
-                debugger;
-                parent.append(this.rootNg.getParentNode());
-            }
-        }
-        // 3
-        else if (!exprs.length || exprs[0]) {
-            if (parent.shadowRoot)
-                parent.innerHTML = ''; // Remove shadowroot.  TODO: This could mess up paths?
-            let options = exprs[0];
-            return (htmlStrings, ...exprs) => {
-                rendered.add(parent);
-                let template = r(htmlStrings, ...exprs);
-                return template.render(parent, options);
-            }
-        }
-        // null for expr[0], remove whole element.
-           // This path never happens?
-        else {
-            throw new Error('unsupported');
-            //let ngm = NodeGroupManager.get(parent);
-            //ngm.render(null, exprs[1])
-        }
-    }
-    else if (typeof htmlStrings === 'string' || htmlStrings instanceof String) {
-        // If it starts with a string, trim both ends.
-        // TODO: Also trim if it ends with whitespace?
-        if (htmlStrings.match(/^\s^</))
-            htmlStrings = htmlStrings.trim();
-        // We create a new one each time because otherwise
-        // the returned fragment will have its content replaced by a subsequent call.
-        let templateEl = document.createElement('template');
-        templateEl.innerHTML = htmlStrings;
-        // 4+5. Return Node if there's one child.
-        if (templateEl.content.childNodes.length === 1)
-            return templateEl.content.firstChild;
-        // 6. Otherwise return DocumentFragment.
-        return templateEl.content;
-    }
-    // 7. Create a static element
-    else if (htmlStrings === undefined) {
-        return (htmlStrings, ...exprs) => {
-            //rendered.add(parent)
-            let template = r(htmlStrings, ...exprs);
-            return template.render();
-        }
-    }
-    // 8.
-    else if (htmlStrings instanceof Template) {
-        return htmlStrings.render();
-    }
-    // 9. Create dynamic element with render() function.
-    else if (typeof htmlStrings === 'function') {
-        let getTemplate = htmlStrings;
-        let template = getTemplate();
-        if (typeof template === 'string')
-            throw new Error(`Please add the "r" prefix before the string "${template}"`)
-        template.replaceMode = true;
-        let el = template.render();
-        // Create the render() function from the function we were given.
-        el.render = (function() {
-            template = getTemplate();
-            template.render(el);
-        }).bind(el);
-        // The second argument was an object of additional properties to add.
-        let props = exprs[0];
-        for (let name in props)
-            if (typeof props[name] === 'function')
-                el[name] = props[name].bind(el);
-            else
-                el[name] = props[name];
-        return el;
-    }
-    else
-        throw new Error('Unsupported arguments.')
-}
+	// TODO: Make this a more flat if/else and call other functions for the logic.
+	if (htmlStrings instanceof Node) {
+		let parent = htmlStrings, template = exprs[0];
+		// 1
+		if (!(exprs[0] instanceof Template)) {
+			if (parent.shadowRoot)
+				parent.innerHTML = ''; // Remove shadowroot.  TODO: This could mess up paths?
+			let options = exprs[0];
+			// Return a tagged template function that applies the tagged themplate to parent.
+			let taggedTemplate = (htmlStrings, ...exprs) => {
+				Globals.rendered.add(parent);
+				let template = new Template(htmlStrings, exprs);
+				return template.render(parent, options);
+			};
+			return taggedTemplate;
+		}
+		// 2. Render template created by #4 to element.
+		else if (exprs[0] instanceof Template) {
+			let options = exprs[1];
+			template.render(parent, options);
+			// Append on the first go.
+			if (!parent.childNodes.length && this) {
+				// TODO: Is this ever executed?
+				debugger;
+				parent.append(this.rootNg.getParentNode());
+			}
+		}
-/**
- * Elements that have been rendered to by r() at least once.
- * @type {WeakSet<HTMLElement>} */
-let rendered = new WeakSet();
+		// null for expr[0], remove whole element.
+		   // This path never happens?
+		else {
+			throw new Error('unsupported');
+			//let ngm = NodeGroupManager.get(parent);
+			//ngm.render(null, exprs[1])
+		}
+	}
+	// 3. Path if used as a template tag.
+	else if (Array.isArray(htmlStrings)) {
+		return new Template(htmlStrings, exprs);
+	}
+	else if (typeof htmlStrings === 'string' || htmlStrings instanceof String) {
+		// If it starts with a string, trim both ends.
+		// TODO: Also trim if it ends with whitespace?
+		if (htmlStrings.match(/^\s^</))
+			htmlStrings = htmlStrings.trim();
+		// We create a new one each time because otherwise
+		// the returned fragment will have its content replaced by a subsequent call.
+		let templateEl = document.createElement('template');
+		templateEl.innerHTML = htmlStrings;
+		// 4+5. Return Node if there's one child.
+		let relevantNodes = Util.trimEmptyNodes(templateEl.content.childNodes);
+		if (relevantNodes.length === 1)
+			return relevantNodes[0];
+		// 6. Otherwise return DocumentFragment.
+		return templateEl.content;
+	}
+	// 7. Create a static element
+	else if (htmlStrings === undefined) {
+		return (htmlStrings, ...exprs) => {
+			//Globals.rendered.add(parent)
+			let template = r(htmlStrings, ...exprs);
+			return template.render();
+		}
+	}
+	// 8.
+	else if (htmlStrings instanceof Template) {
+		return htmlStrings.render();
+	}
+	// 9. Create dynamic element with render() function.
+	else if (typeof htmlStrings === 'object') {
+		let obj = htmlStrings;
+		// Special rebound render path, called by normal path.
+		if (Globals.objToEl.has(obj)) {
+			return function(...args) {
+			   let template = r(...args);
+			   let el = template.render();
+				Globals.objToEl.set(obj, el);
+			}.bind(obj);
+		}
+		// Normal path
+		else {
+			Globals.objToEl.set(obj, null);
+			obj.render(); // Calls the Special rebound render path above, when the render function calls r(this)
+			let el = Globals.objToEl.get(obj);
+			Globals.objToEl.delete(obj);
+			for (let name in obj)
+				if (typeof obj[name] === 'function')
+					el[name] = obj[name].bind(el);
+				else
+					el[name] = obj[name];
+			return el;
+		}
+	}
+	else
+		throw new Error('Unsupported arguments.')
+}
 //import {watchGet, watchSet} from "./watch.js";
@@ -2803,14 +2767,9 @@ function defineClass(Class, tagName, extendsTag) {
 	}
 }
-/**
- * @type {Object<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
-let elementClasses = {};
-/**
- * Store which instances of Solarite have already been added to the DOM. * @type {WeakSet<HTMLElement>}
- */
-let connected = new WeakSet();
 /**
  * Create a version of the Solarite class that extends from the given tag name.
@@ -2822,6 +2781,7 @@ let connected = new WeakSet();
  * 5.  We have the onConnect, onFirstConnect, and onDisconnect methods.
  *     Can't figure out how to have these work standalone though, and still be synchronous.
  * 6.  Can we extend from other element types like TR?
+ * 7.  Shows default text if render() function isn't defined.
  *
  * Advantages to inheriting from HTMLElement
  * 1.  Minimization won't break when it renames the Class and we call customElements.define() on the wrong name.
@@ -2836,10 +2796,10 @@ function createSolarite(extendsTag=null) {
 	if (extendsTag && !extendsTag.includes('-')) {
 		extendsTag = extendsTag.toLowerCase();
-		BaseClass = elementClasses[extendsTag];
+		BaseClass = Globals.elementClasses[extendsTag];
 		if (!BaseClass) { // TODO: Use Cache
 			BaseClass = document.createElement(extendsTag).constructor;
-			elementClasses[extendsTag] = BaseClass;
+			Globals.elementClasses[extendsTag] = BaseClass;
 		}
 	}
@@ -2875,26 +2835,24 @@ function createSolarite(extendsTag=null) {
 		constructor(options={}) {
 			super();
 			// TODO: Is options.render ever used?
 			if (options.render===true)
 				this.render();
 			else if (options.render===false)
-				rendered.add(this); // Don't render on connectedCallback()
+				Globals.rendered.add(this); // Don't render on connectedCallback()
 			// Add children before constructor code executes.
 			// PendingChildren is setup in NodeGroup.createNewComponent()
 			// TODO: Match named slots.
-			let ch = NodeGroupManager.pendingChildren.pop();
+			let ch = Globals.pendingChildren.pop();
 			if (ch)
 				(this.querySelector('slot') || this).append(...ch);
 			/** @deprecated */
 			Object.defineProperty(this, 'html', {
 				set(html) {
-					rendered.add(this);
+					Globals.rendered.add(this);
 					if (typeof html === 'string') {
 						console.warn("Assigning to this.html without the r template prefix.");
 						this.innerHTML = html;
@@ -2917,7 +2875,7 @@ function createSolarite(extendsTag=null) {
 		/**
 		 * Call render() only if it hasn't already been called.	 */
 		renderFirstTime() {
-			if (!rendered.has(this) && this.render)
+			if (!Globals.rendered.has(this) && this.render)
 				this.render();
 		}
@@ -2925,8 +2883,8 @@ function createSolarite(extendsTag=null) {
 		 * Called automatically by the browser. */
 		connectedCallback() {
 			this.renderFirstTime();
-			if (!connected.has(this)) {
-				connected.add(this);
+			if (!Globals.connected.has(this)) {
+				Globals.connected.add(this);
 				this.onFirstConnect();
 			}
 			this.onConnect();
@@ -2945,6 +2903,12 @@ function createSolarite(extendsTag=null) {
 	}
 }
+/**
+ * Solarite JavasCript UI library.
+ * MIT License
+ * https://vorticode.github.io/solarite/
+ */
 /**
  * TODO: The Proxy and the multiple base classes mess up 'instanceof Solarite'
  * @type {Node|Class<HTMLElement>|function(tagName:string):Node|Class<HTMLElement>} */
@@ -2953,10 +2917,10 @@ let Solarite = new Proxy(createSolarite(), {
 		return createSolarite(...args)
 	}
 });
+let getInputValue = Util.getInputValue;
 //Experimental:
 //export {forEach, watchGet, watchSet} from './watch.js' // old, unfinished
 //export {watch} from './watch2.js'; // unfinished
-export { ArgType, Solarite, Template, getArg, r };
+export { ArgType, Globals, Solarite, Template, delve, getArg, getInputValue, r };