solarite 0.1.0 → 0.1.1

package/dist/Solarite.js

@@ -81,8 +81,6 @@ var Util$1 = {
 
 };
 
-
-
 /**
  * Follow a path into an object.
  * @param obj {object}
@@ -180,19 +178,19 @@ function getArg(el, name, val=null, type=ArgType.String) {
 		case ArgType.Float:
 			return parseFloat(val);
 		case ArgType.String:
-			return val || '';
+			return [undefined, null, false].includes(val) ? '' : val+'';
 		case ArgType.JSON:
-			try {
-				return JSON.parse(val);
-			} catch (e) {
-				return val;
-			}
 		case ArgType.Eval:
-			try {
-				return eval(`(${val})`);
-			} catch (e) {
-				return val;
-			}
+			if (typeof val === 'string' && val.length)
+				try {
+					if (type === ArgType.JSON)
+						return JSON.parse(val);
+					else
+						return eval(`(${val})`);
+				} catch (e) {
+					return val;
+				}
+			else return val;
 		default:
 			return val;
 	}
@@ -336,7 +334,11 @@ class MultiValueMap {
 		return this.data[key] || [];
 	}
 
-	// Remove one value from a key, and return it
+	/**
+	 * 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;
@@ -381,6 +383,8 @@ class MultiValueMap {
 	}
 }
 
+
+
 let Util = {
 
 	bindStyles(style, root) {
@@ -542,6 +546,191 @@ 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 {
+
+	/** @type {(Template|string|function)|(Template|string|function)[]} Evaulated expressions.  */
+	exprs = []
+
+	/** @type {string[]} */
+	html = [];
+
+	/**
+	 * If true, use this template to replace an existing element, instead of appending children to it.
+	 * @type {?boolean} */
+	replaceMode;
+
+	/** Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
+	hashedFields;
+
+	/**
+    * @deprecated
+    * @type {ExprPath} Used with forEach() from watch.js
+	 * Set in ExprPath.apply() */
+	parentPath;
+	
+	/** @type {NodeGroup} */
+	nodeGroup;
+	
+	/**
+	 * @type {string[][]} */
+	paths = [];
+
+	/**
+	 *
+	 * @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]
+
+		
+	}
+
+	/**
+	 * 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
+	}
+
+	/**
+	 * 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;
+		if (!el) {
+			ng = new NodeGroup(this);
+			el = ng.getParentNode();
+		}
+
+		let ngm = NodeGroupManager.get(el);
+		if (ng)
+			ng.manager = ngm;
+
+		
+
+		ngm.options = options;
+		ngm.clearSubscribers = false; // Used for deprecated watch() path?
+		ngm.mutationWatcherEnabled = false;
+
+		// Fast path for empty component.
+		if (this.html?.length === 1 && !this.html[0]) {
+			el.innerHTML = '';
+		}
+		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);
+			}
+
+			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);
+				}
+
+				// 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);
+				}
+			}
+
+			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];
+	}
+}
+
 /**
  * Path to where an expression should be evaluated within a Shell.
  * Path is only valid until the expressions before it are evaluated.
@@ -636,6 +825,86 @@ class ExprPath {
 			this.attrNames = new Set();
 	}
 
+	/**
+	 *
+	 * @param expr {Template|Node|Array|function|*}
+	 * @param newNodes {(Node|Template)[]}
+	 * @param secondPass {Array} Locations within newNodes to evaluate later.  */
+	apply(expr, newNodes, secondPass) {
+
+		if (expr instanceof Template) {
+			expr.nodegroup = this.parentNg; // All tests pass w/o this.
+
+			let ng = this.parentNg.manager.getNodeGroup(expr, true);
+
+
+			if (ng) {
+				
+
+
+				// TODO: Track ranges of changed nodes and only pass those to udomdiff?
+				// But will that break the swap benchmark?
+				newNodes.push(...ng.getNodes());
+				this.nodeGroups.push(ng);
+			}
+
+			// If expression, evaluate later to find partial match.
+			else {
+				secondPass.push([newNodes.length, this.nodeGroups.length]);
+				newNodes.push(expr);
+				this.nodeGroups.push(null); // placeholder
+			}
+		}
+
+		// Node created by an expression.
+		else if (expr instanceof Node) {
+
+			// DocumentFragment created by an expression.
+			if (expr instanceof DocumentFragment)
+				newNodes.push(...expr.childNodes);
+			else
+				newNodes.push(expr);
+		}
+
+		else if (Array.isArray(expr))
+			for (let subExpr of expr)
+				this.apply(subExpr, newNodes, secondPass);
+
+		else if (typeof expr === 'function') {
+			let result = expr();
+
+			this.apply(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 + '';
+
+			// Fast path for updating the text of a single text node.
+			let first = this.nodeBefore.nextSibling;
+			if (first.nodeType === 3 && first.nextSibling === this.nodeMarker && !newNodes.includes(first)) {
+				if (first.textContent !== text)
+					first.textContent = text;
+
+				newNodes.push(first);
+			}
+
+			else {
+				// TODO: Optimize this into a Set or Map or something?
+				if (!this.existingTextNodes)
+					this.existingTextNodes = this.getNodes().filter(n => n.nodeType === 3);
+
+				let idx = this.existingTextNodes.findIndex(n => n.textContent === text);
+				if (idx !== -1)
+					newNodes.push(...this.existingTextNodes.splice(idx, 1));
+				else
+					newNodes.push(this.parentNode.ownerDocument.createTextNode(text));
+			}
+		}
+	}
+
 	applyMultipleAttribs(node, expr) {
 		
 
@@ -696,7 +965,6 @@ class ExprPath {
 				func = setValue;
 				args = [expr[0], expr.slice(1), node];
 				node.value = delve(expr[0], expr.slice(1));
-				//debugger;
 			}
 		}
 		else
@@ -814,8 +1082,7 @@ class ExprPath {
 	 * Clear the nodeCache of this ExprPath, as well as all parent and child ExprPaths that
 	 * share the same DOM parent node.
 	 *
-	 * TODO: Is recursive clearing ever necessary?
-	 */
+	 * TODO: Is recursive clearing ever necessary? */
 	clearNodesCache() {
 		let path = this;
 		
@@ -833,7 +1100,7 @@ class ExprPath {
 			
 			// Clear cache of child ExprPaths that have the same parentNode
 			for (let ng of path.nodeGroups) {
-				if (ng) // Can be null from applyOneExpr()'s push(null) call.
+				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;
@@ -1039,7 +1306,7 @@ class Shell {
 
 			// Swap out Embedded Solarite Components with ${} attributes.
 			// Later, NodeGroup.render() will search for these and replace them with the real components.
-			// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
+			// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
 			if (context === htmlContext.Attribute) {
 
 				let lastIndex, lastMatch;
@@ -1049,7 +1316,7 @@ class Shell {
 				});
 
 				if (lastMatch) {
-					let newTagName = lastMatch + '-redcomponent-placeholder';
+					let newTagName = lastMatch + '-solarite-placeholder';
 					lastHtml = lastHtml.slice(0, lastIndex) + newTagName + lastHtml.slice(lastIndex + lastMatch.length);
 					componentNames[lastMatch] = newTagName;
 				}
@@ -1066,9 +1333,9 @@ class Shell {
 
 		// 2. Create elements from html with placeholders.
 		let template = document.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
-        let joinedHtml = buffer.join('');
-		
-		// Replace '-redcomponent-placeholder' close tags.
+		let joinedHtml = buffer.join('');
+
+		// Replace '-solarite-placeholder' close tags.
 		// TODO: is there a better way?  What if the close tag is inside a comment?
 		for (let name in componentNames)
 			joinedHtml = joinedHtml.replaceAll(`</${name}>`, `</${componentNames[name]}>`);
@@ -1091,7 +1358,7 @@ class Shell {
 
 			// Replace attributes
 			if (node.nodeType === 1) {
-				for (let attr of node.attributes) {
+				for (let attr of [...node.attributes]) { // Copy the attributes array b/c we remove attributes as we go.
 
 					// Whole attribute
 					let matches = attr.name.match(/^[\ue000-\uf8ff]$/);
@@ -1187,8 +1454,8 @@ class Shell {
 		}
 		toRemove.map(el => el.remove());
 
-		// Handle redcomponent-placeholder's.
-		// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
+		// Handle solarite-placeholder's.
+		// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
 		//if (componentNames.size)
 		//	this.components = [...this.fragment.querySelectorAll([...componentNames].join(','))]
 
@@ -1276,106 +1543,34 @@ class Shell {
 let shells = new WeakMap();
 
 /**
- * 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 {
+ * 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.
+ */
 
-	/** @type {(Template|string|function)|(Template|string|function)[]} Evaulated expressions.  */
-	exprs = []
-
-	/** @type {string[]} */
-	html = [];
-
-	/**
-	 * If true, use this template to replace an existing element, instead of appending children to it.
-	 * @type {?boolean} */
-	replaceMode;
-
-	/** Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
-	hashedFields;
-
-    /**
-     * @deprecated
-     * @type {ExprPath} Used with forEach() from watch.js
-   	 * Set in NodeGroup.applyOneExpr() */
-    parentPath;
-	
-	/** @type {NodeGroup} */
-	nodeGroup;
-	
-	/**
-	 * @type {string[][]} */
-	paths = [];
-
-	/**
-	 *
-	 * @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]
-
-		
-	}
-
-	/**
-	 * 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
-	}
-
-	toNode() {
-		let ngm = new NodeGroupManager();
-		return ngm.render(this);
-	}
-
-	getCloseKey() {
-		// Use the joined html when debugging?
-		//return '@'+this.html.join('|')
-
-		return '@'+this.hashedFields[0];
-	}
-}
-
-/**
- * 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) => {
-	
+/**
+ * @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;
@@ -1534,723 +1729,8 @@ const udomdiff = (parentNode, a, b, before) => {
 			}
 		}
 	}
-	return b;
-};
-
-/**
- * Tools for watch variables and performing precise renders.
- */
-
-
-/**
- * Stores info how to transform a path to a template. */
-class TransformerInfo {
-	constructor(path, transformer, hash) {
-		this.path = path;
-		this.transformer = transformer;
-		this.hash = hash;
-	}
-}
-
-
-/**
- * Maps an object path to the function that converts it to a Template.
- * Once it's convert to a template, we can get the hash of that Tempate.
- * Then that hash tells us what NodeGroups are affected by the object.
- *
- * We store the function to get the Template, instead of the Template itself,
- * so we can call that function again when the object has a new value.
- * @type {MultiValueMap<Object, function(...Object):Template>} */
-let pathToTransformer = new MultiValueMap(); // uses a Set() for each value.
-
-/**
- *
- * @param objectPaths {(*|function)[]}
- * @returns {Template} */
-function watchGet(...objectPaths) {
-	
-	/** @type {function} */
-	let transformer = objectPaths.at(-1);
-	let paths;
-	if (typeof transformer === 'function') {
-		paths = objectPaths.slice(0, -1);
-	}
-
-	// No transformer provided, so we create our own.
-	else if (objectPaths.length === 1) {
-		paths = [objectPaths[0].slice(0, -1)];
-		let prop = objectPaths[0].at(-1);
-		transformer = (...args) => (args[0][prop]);
-	}
-
-	
-	// Save arguments used to call the template, so we can call it again when those args have their values change.
-	let args = [];
-	for (let path of paths) {
-
-
-		let obj = delve(watchSet(path[0]), path.slice(1));
-		args.push(obj);
-	}
-	
-	let template = transformer(...args);
-	
-	// If the result isn't a Template, convert the function to return a Template that wraps the result.
-	// This way NodeGroupManager.findAndDelete() can find a NodeGroup that matches this Template's hash.
-	if (!(template instanceof Template)) {
-		let oldToTemplate = transformer;
-		transformer = function() {
-			return new Template(['', ''], [oldToTemplate(...arguments)]);
-		};
-		template = transformer(...args);
-	}
-	
-	// Map the object paths to the function that creates a template.
-	let hash = getObjectHash(template);
-	for (let path of paths) {
-		let serializedPath = serializePath(path);
-		pathToTransformer.add(serializedPath, new TransformerInfo(path, transformer, hash)); // Uses a Set() to ensure no duplicates.
-	}
-
-	return template;
-}
-
-//let proxyCache = new WeakMap();
-
-
-/**
- * Set the value of a variable in a way that's watched, so later when we call .renderWatched()
- * We can find what NodeGroups to update.*/
-function watchSet(obj) {
-	if (obj?.$isProxy===true)
-		return obj; // It's already a Proxy.
-
-	// This cache doesn't make things faster.
-	// let result = proxyCache.get(obj);
-	// if (!result) {
-	// 	result = new Proxy(obj, new ProxyHandler(obj));
-	// 	proxyCache.set(obj, result);
-	// }
-	// return result;
-	return new Proxy(obj, new ProxyHandler$1(obj));
-}
-
-/**
- * Loop over each item and apply watchGet() to each item.
- * @param arrayPath {*[]}
- * @param callback {function(obj:Object, index:int):Template}
- * @returns {Template} */
-function forEach(arrayPath, callback) {
-	let array = delve(arrayPath[0], arrayPath.slice(1));
-
-	// This is retrieved on the 'insert' path inside renderWatched()
-	let ngm = NodeGroupManager.get(arrayPath[0]);
-	if (ngm.clearSubscribers) {
-		ngm.clearSubscribers = false;
-		ngm.pathToLoopInfo = new MultiValueMap();
-	} // TODO: Move tis into NodeGroupMAnager.get() without breaking things?
-
-
-	let newItems = [...array.map((item, i) => {
-			// TODO: This needs to wrap callback so we can pass it the index also.
-			return watchGet([...arrayPath, i], callback); // calls callback(array[i], i)
-		})
-	];
-
-	// We return a template that wraps the array
-	// So that NodeGroup.applyOneExpr can set the ExprPath and nextSibling on the template.
-	// Then the 'insert' path in renderWatched() uses that data fora dding more nodes.
-	let result = new Template(['', ''], [newItems]);
-
-
-	// We get a unique hash for each foreach template because the [''] array is unique each time.
-	let loopInfo = new LoopInfo(result, callback);
-	ngm.pathToLoopInfo.add(serializePath(arrayPath), loopInfo);
-	return result;
-}
-
-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+'')])
-
-}
-
-
-/**
- * When an object property is accessed, a new Proxy with a new instance of this handler class is created,
- * but it tracks the path from the root to the property.
- * That way when a property is set, it can report the changed path. */
-class ProxyHandler$1 {
-	
-	/**
-	 * @param root An element managed by a NodeGroupManager.  The same as the NodeGroupManager's rootEl.
-	 * @param path {string[]} Used internally. */
-	constructor(root, path=[]) {
-		
-		this.root = root;
-		this.path = path; // path from root to this Proxy.
-	}
-
-	/**
-	 * @param obj {Object}
-	 * @param prop {string} */
-	get(obj, prop) {
-		
-		// Special props.  Currently unused.
-		// if (prop === '$path')
-		// 	return this.path;
-		// if (prop === '$root')
-		// 	return this.root;
-		if (prop === '$isProxy')
-		 	return true;
-		
-		
-		// 1. Array.splice()
-		if (prop === 'splice' && Array.isArray(obj)) {
-			return (index, deleteCount, ...items) => {
-				let ngm = NodeGroupManager.get(this.root);
-
-				if (deleteCount) {
-
-					// Get the hash of each object along the delete range.  The process to get the hash is:
-					// Serialized Path -> transformer -> Template -> hash.
-					let hashes = [];
-					for (let i=index; i<index+deleteCount; i++) {
-						let serializedPath = serializePath([this.root, ...this.path, i+'']);
-
-						let obj = delve(this.root, [...this.path, i]);
-						for (let transformerInfo of pathToTransformer.getAll(serializedPath)) {
-							let template = transformerInfo.transformer(obj);
-							let hash = getObjectHash(template);
-							hashes.push(hash); // Hashes may go to nodes in more than one loop.
-						}
-					}
-
-					ngm.changes.push(new Change('delete', this.root, [...this.path, index+''], hashes));
-				}
-
-				//let oldArray = [...obj];
-				let result = obj.splice(index, deleteCount);
-
-				// Inserting
-				if (items.length) {
-
-					let beforeNgs;
-					for (let loopInfo of ngm.getLoopInfo([this.root, ...this.path])) {
-						let beforeObj = delve(this.root, [...this.path, index]);
-
-						// Find where to insert before.
-						if (beforeObj) {
-							let beforeTemplate = loopInfo.itemTransformer(beforeObj);
-							let beforeHash = getObjectHash(beforeTemplate);
-							beforeNgs = ngm.nodeGroupsAvailable.data[beforeHash];
-
-							if (beforeNgs) {
-								let hash = getObjectHash(loopInfo.template);
-								let loopNgs = ngm.nodeGroupsAvailable.data[hash] || [];
-								for (let loopNg of loopNgs)
-									for (let beforeNg of beforeNgs)
-										if (beforeNg.startNode.parentNode === loopNg.startNode.parentNode)
-											ngm.changes.push(new Change('insert', this.root, [...this.path, index + ''], items, beforeTemplate));
-							}
-						}
-						if (!beforeNgs)
-							ngm.changes.push(new Change('insert', this.root, [...this.path, index + ''], items));
-					}
-					obj.splice(index, 0, ...items);
-				}
-				return result;
-			}
-		}
-		
-
-
-		// 2.  Get property
-		// If we're getting an object or array property, apply watch() to it recursively.
-		let result = Reflect.get(obj, prop);
-		if (result && typeof result === 'object') {
-			let handler = new ProxyHandler$1(this.root, [...this.path, prop]); // same root, one level deeper on the path.
-			return new Proxy(result, handler);
-		}
-
-		return result;
-	}
-
-
-	set(obj, prop, newValue) {
-		let ngm = NodeGroupManager.get(this.root);
-		ngm.changes.push(new Change('set', this.root, [...this.path, prop], newValue));
-		return Reflect.set(obj, prop, newValue)
-	}
-}
-
-
-/**
- *
- */
-class Change {
-	
-	/**
-	 * @param action {string}
-	 * @param root {Object|Array}
-	 * @param path {string[]}
-	 * @param value
-	 *	 If setting a value, this is the new value.
-	 *	 If deleting from an array, this is an array of all the NodeGroups to delete.
-	 *
-	 * @param beforeTemplate
-	 * */
-	constructor(action, root, path, value, beforeTemplate=null) {
-		this.action = action;
-
-		// TODO: Store root as first item of path, to be consistent with code elsewhere.
-		this.root = root;
-		this.path = path;
-		this.value = value;
-		this.beforeTemplate = beforeTemplate;
-
-		/** @type {TransformerInfo[]} */
-		this.transformerInfo = [];
-
-		// Traverse up the path.
-		for (let i=this.path.length; i>0; i--) {
-			let path = this.path.slice(0, i);
-			let fullPath = [this.root, ...path];
-
-			let serializedPath = getObjectHash(fullPath); // TODO: Why not serializedPath() ?
-			this.transformerInfo.push(...pathToTransformer.getAll(serializedPath));
-		}
-	}
-}
-
-let logGets = false;
-let gets = [];
-
-let withinSet = 0;
-
-/**
- * Turn the props on obj into JavasCript properties that return Proxies when accessed.
- * If called more than once, return the already-converted object.
- * @param obj {Object}
- * @param props {string}
- * @returns {*|{$proxyHandler}}
- */
-function watch(obj, ...props) {
-	
-	if (props.length) {
-		let internalProps = {};
-		for (let prop of props) {
-			internalProps[prop] = obj[prop];
-			Object.defineProperty(obj, prop, {
-				get() {
-					return new Proxy(obj, new ProxyHandler(obj, [], internalProps))[prop];
-				},
-				set(value) {
-					return watch(this)[prop] = value;
-				}
-			});
-		}
-		return;
-	}
-	
-	
-	if (obj?.$proxyHandler)
-		return obj; // It's already a Proxy.
-	
-	// This cache doesn't make things faster.
-	// But could it save memory?
-	// let result = proxyCache.get(obj);
-	// if (!result) {
-	// 	result = new Proxy(obj, new ProxyHandler(obj));
-	// 	proxyCache.set(obj, result);
-	// }
-	// return result;
-	
-	return new Proxy(obj, new ProxyHandler(obj));
-}
-
-/**
- * Provides methods used when a Proxied version of a property is accessed on an object returned by watch() */
-class ProxyHandler {
-	
-	serializedPath;
-	
-	/**
-	 * @param root An element managed by a NodeGroupManager.  The same as the NodeGroupManager's rootEl.
-	 * @param path {string[]} Used internally.
-	 * @param props */
-	constructor(root, path=[], props=null) {
-		
-		this.root = root;
-		this.path = path; // path from root to this Proxy.
-		this.props = props;
-	}
-	
-	/**
-	 * Get the full path to this property from the root watched object.
-	 * @param atIndex
-	 * @returns {string} */
-	getSerializedPath(atIndex=null) {
-		if (!this.serializedPath)
-			this.serializedPath = JSON.stringify([getObjectId(this.root), ...this.path.map(item => item + '')]);
-			
-		if (atIndex!== null)
-			return this.serializedPath.slice(0, -1) + ',"' + atIndex + '"]';
-		return this.serializedPath;
-	}
-	
-	/**
-	 * Return a ProxyHandler for a property one level deeper at pathItem.
-	 * @param pathItem {string}
-	 * @returns {ProxyHandler} */
-	extend(pathItem) {
-		pathItem += '';
-		assert(!this.root.$proxyHandler);
-		let result = new ProxyHandler(this.root, [...this.path, pathItem], this.props);
-		if (this.serializedPath)
-			result.serializedPath = this.getSerializedPath(pathItem);
-		
-		return result;
-	}
-	
-	/**
-	 * Called directly by JavaScript when accessing the value of a property.
-	 * @param obj {Object}
-	 * @param prop {string} */
-	get(obj, prop) {
-		
-		// 1.  Special props.
-		if (prop === '$proxyHandler')
-			return this;
-		else if (prop === '$removeProxy')
-			return delve(this.props || this.root, this.path);
-		
-		// 2. Array functions.
-		else if (prop === 'map' && Array.isArray(obj)) {
-			
-			let ngm = NodeGroupManager.get(this.root);
-			ngm.clearSubscribersIfNeeded();
-			
-			return callback => {
-				let loopInfo;
-				
-				let children = [];
-				let transformer = obj => {
-					let templates = [];
-					
-					for (let i = 0; i < obj.length; i++) {
-
-						// Watch obj[i].
-						let handler = this.extend(i);
-						let item = obj[i];
-						if (!item.$proxyHandler)
-							item = new Proxy(item, handler);
-
-						let template = callback(item, i, obj);
-						templates.push(template);
-
-						// If the loop is re-evaluted via Set() then we add duplicate TemplateInfo's
-						//if (!withinSet) {
-							let spath = this.getSerializedPath(i);
-							let subscriber = new Subscriber(callback, template);
-							subscriber.parent = loopInfo;
-							ngm.subscribers.add(spath, subscriber);
-							children.push([spath, subscriber]);
-						//}
-					}
-					
-					// A parent Template that surrounds all the items in the loop.
-					// This lets us get template.nodeGroup.endNode so we can insertBefore().
-					return new Template(['', ''], [templates]);
-				};
-
-				if (!withinSet)
-					loopInfo = new Subscriber(transformer, null, callback);
-				let wholeLoopTemplate = transformer(obj);
-				if (!withinSet) {
-					loopInfo.template = wholeLoopTemplate;
-					loopInfo.children = children;
-					ngm.subscribers.add(this.getSerializedPath(), loopInfo);
-				}
-				return wholeLoopTemplate;
-			}
-		}
-
-		else if ((prop ==='splice' || prop === 'fastSplice') && Array.isArray(obj)) {
-			let ngm = NodeGroupManager.get(this.root);
-			return (index, deleteCount, ...items) => {
-				let diff = items.length - deleteCount;
-                let objLength = obj.length;
-				
-				// Delete
-				if (deleteCount) {
-					for (let i=index; i<index+deleteCount; i++) {
-						
-						// Update pathToTemplates
-						let spath = this.getSerializedPath(i);
-						
-						// Delete nodes of associated NodeGroups.
-						for (let subscriber of ngm.subscribers.data[spath] || []) {
-							let ng = subscriber.template.nodeGroup;
-							for (let node of ng.getNodes())
-								node.remove();
-							
-							// Delete NodeGroup from NodeGroupManager.
-							ngm.nodeGroupsAvailable.delete(ng.exactKey, ng);
-						}
-						
-						delete ngm.subscribers.data[spath]; // Deletes templates associated with every loop where this is used.
-					}
-				}
-				
-				// Update indices of subsequent items.
-				if (diff) {
-					let loopPath = this.getSerializedPath();
-					let loopInfo = [...ngm.subscribers.getAll(loopPath)][0]; // TODO: Handle multiple loops.
-					
-					let move = (oldIndex) => {
-                        let newIndex = oldIndex+diff;
-						let oldPath = this.getSerializedPath(oldIndex);
-						let newPath = this.getSerializedPath(newIndex);
-
-						let subscribers = ngm.subscribers.data[oldPath];
-						delete ngm.subscribers.data[oldPath]; // TODO: Some can be overwritten w/o being deleted?
-						ngm.subscribers.data[newPath] = subscribers;
-
-						
-						// Update associated NodeGroups by passing them newIndex.
-						// This is unnecessary for most loops since they don't use the index.
-						// fastSplice skips this path, it skips updating item indices.
-						if (prop === 'splice') {
-							let array = delve(this.root, this.path);
-							for (let subscriber of subscribers) {
-								let ng = subscriber.template.nodeGroup;
-								
-								let item = array[oldIndex];
-
-								//assert(!item.$proxyHandler)
-								let proxyItem = getProxy(item, this, this.path, newIndex); //new Proxy(item, this.extend(newIndex));
-								let exprs = loopInfo.itemTransformer(proxyItem, newIndex).exprs; // TODO: Pass updated array as third argument to transformer.
-								ng.applyExprs(exprs); // this is the slow part.
-							}
-						}
-					};
-					
-					// Iterate in different directions depending on whether diff is positive or negative.
-					if (diff > 0) // Moving items to the right, so we iterate backward from the end.
-						for (let i = objLength-1; i >= index + items.length + deleteCount; i--)
-							move(i);
-
-					else // Moving items to the left, so we iterate forward.
-						for (let i = index + items.length + deleteCount; i < objLength; i++)
-							move(i);
-				}
-				
-				
-				// Add new items
-				if (items.length) {
-					let loopPath = this.getSerializedPath();
-					
-					let beforePath = this.getSerializedPath(index);
-					let ngm = NodeGroupManager.get(this.root);
-					
-					for (let loopInfo of ngm.subscribers.getAll(loopPath)) {
-						let beforeNodes = index < objLength - deleteCount
-							? [...ngm.subscribers.getAll(beforePath)].map(t => t.template.nodeGroup.startNode)
-							: [loopInfo.template.nodeGroup.endNode];
-						for (let beforeNode of beforeNodes) { // TODO: Need to match the beforeNg with the loopInfo instead of iterating.
-							for (let i = 0; i < items.length; i++) {
-								
-								// Create NodeGroup of new item.
-								let itemHandler = this.extend(index + i);
-								assert(!items[i].$proxyHandler);
-								let proxyItem = new Proxy(items[i], itemHandler);
-								let template = loopInfo.itemTransformer(proxyItem);
-								let ng = ngm.getNodeGroup(template, null, true);
-								
-								
-								for (let node of ng.getNodes()) {
-									beforeNode.parentNode.insertBefore(node, beforeNode);
-									//loopInfo.template.nodeGroup.endNode = node; // The loop's end node is actually an empty text node, so don't do this.
-								}
-								
-								
-								// Add new items to ngm.templateInfo
-								let spath = itemHandler.getSerializedPath();
-								let subscriber = new Subscriber(loopInfo.itemTransformer, template);
-								subscriber.parent = loopInfo;
-								ngm.subscribers.add(spath, subscriber);
-							}
-						}
-						loopInfo.template.nodeGroup.parentPath.clearNodesCache();
-						loopInfo.template.nodeGroup.nodesCache = null;
-					}
-				}
-				
-				let result = obj.splice(index, deleteCount, ...items);
-				
-				//this.notify(this.path);
-				
-				return result;
-			}
-		}
-
-		// Allow these functions to use proxied objects as arguments.
-		else if (prop ==='indexOf' && Array.isArray(obj)) {
-			return item => {
-				return obj.indexOf(item.$removeProxy || item)
-			}
-		}
-
-		// 3.  Get property
-		else {
-
-			let obj2 = obj === this.root && this.props ? this.props : obj;
-			let result = Reflect.get(obj2, prop);
-
-			// This is read by watchFunction() which is called in NodeGroup.applyOneExpr().
-			// It's used to see what variables contribute to an expression.
-			if (logGets)
-				gets.push([this.root, ...this.path, prop]);
-
-			// If we're getting an object or array property, apply watch() to it recursively.
-			if (result && typeof result === 'object') {
-				let handler = this.extend(prop); // same root, one level deeper on the path.
-				
-				return new Proxy(result, handler);
-			}
-
-			return result;
-		}
-	}
-	
-	
-	/**
-	 * Called directly by JavaScript when setting the value of a property via equals.
-	 * @param obj
-	 * @param prop
-	 * @param value
-	 * @returns {boolean} */
-	set(obj, prop, value) {
-		withinSet++;
-
-		let obj2 = obj === this.root && this.props ? this.props : obj;
-		let result = Reflect.set(obj2, prop, value);
-		let fullPath = [...this.path, prop+''];
-		this.notify(fullPath);
-		
-		withinSet --;
-
-		return result;
-	}
-	
-	/**
-	 * Find every subscriber for fullPath, and above, and call applyExprs() for it.
-	 * @param fullPath {string[]}
-	 * @param excluded {Set} */
-	notify(fullPath, excluded = new Set()) {
-		
-		// Traverse upward through the path, looking for pathToTemplates.
-		let ngm = NodeGroupManager.get(this.root);
-		
-		let rootHash = getObjectId(this.root);
-	
-		let len = fullPath.length;
-		while (len >= 1) {
-			let path = fullPath.slice(0, len);
-			let val = delve(this.root, path);
-			let serializedPath = JSON.stringify([rootHash, ...path]);
-			for (let subscriber of ngm.subscribers.getAll(serializedPath)) {
-				// We already applied expressions for a single item within this loop.
-				if (excluded.has(subscriber))
-					continue;
-				
-				
-				// Delete child subscriptions so we don't have duplicate subscriptions when we call applyExprs() directly below.
-				if (subscriber.children) {
-					for (let [spath, childInfo] of subscriber.children)
-						ngm.subscribers.delete(spath, childInfo);
-					subscriber.children = undefined;
-				}
-
-				let proxyVal = getProxy(val, this, path);
-				let exprs = subscriber.transformer(proxyVal).exprs; // TODO: Pass updated array as third argument to transformer.
-				for (let path of subscriber.template.nodeGroup.paths)
-					path.clearNodesCache();
-				
-				// Apply expressions.
-				subscriber.template.nodeGroup.applyExprs(exprs);
-				
-				// Don't also process parent loop after updating a single item within it.
-				if (subscriber.parent)
-					excluded.add(subscriber.parent);
-			}
-			len--;
-		}
-	}
-}
-
-function getProxy(obj, ph, path, path2) {
-	if (!obj || !typeof obj !== 'object')
-		return obj;
-	
-	if (obj.$proxyHandler) {
-		
-		assert(obj.$proxyHandler.root === ph.root && JSON.stringify(obj.$proxyHandler.path) === JSON.stringify(path));
-		return obj;
-	}
-	if (path2)
-		path = [...path, path2+''];
-	return new Proxy(obj, new ProxyHandler(ph.root, path, ph.props));
-}
-
-/**
- * Call a function and record which watched variables it accesess, storing their paths in pathToTemplates.
- * Used by NodeGroup.applyOneExpr().
- * TODO: only allow this to be called once per callback.
- * @param callback {function}
- * @param ngm {NodeGroupManager}
- * @returns {Template} */
-function watchFunction(callback, ngm) {
-	ngm.clearSubscribersIfNeeded();
-	
-	logGets = true;
-	
-	let transformer = () => new Template(['', ''], [callback()]);
-	let template = transformer();
-	for (let path of gets) {
-		let subscriber = new Subscriber(transformer, template);
-		ngm.subscribers.add(serializePath(path), subscriber);
-	}
-
-	gets = [];
-	logGets = false;
-	return template;
-}
-
-/**
- * Represents a place where nodes will be updated.
- * TODO: Merge this with Template, or ExprPath? */
-class Subscriber {
-	
-	/** @type {Subscriber} Used only for children of a loop. */
-	parent;
-	
-	/** @type {Subscriber[]} TemplateInfo for each child of a loop. */
-	children;
-	
-	/**
-	 * @param transformer {function} Function that turns the object at the path into a template.
-	 * @param template {Template}
-	 * @param itemTransformer {function} If a loop, this transforms each item in the loop. */
-	constructor(transformer, template, itemTransformer=null) {
-		this.transformer = transformer;
-		this.template = template;
-		
-		// Used only for loops
-		this.itemTransformer = itemTransformer;
-	}
-}
+	return b;
+};
 
 /** @typedef {boolean|string|number|function|Object|Array|Date|Node} Expr */
 
@@ -2281,10 +1761,10 @@ class NodeGroup {
 	/** @type {ExprPath[]} */
 	paths = [];
 
-	/** @type {string} */
+	/** @type {string} Key that matches the template and the expressions. */
 	exactKey;
 
-	/** @type {string} */
+	/** @type {string} Key that only matches the template.  */
 	closeKey;
 
 	/** @type {boolean} Used by NodeGroupManager. */
@@ -2317,8 +1797,10 @@ class NodeGroup {
 	 * @returns {NodeGroup} */
 	constructor(template, manager=null) {
 
-		// Used for forEach()
+		/** @type {Template} */
 		this.template = template;
+
+		/** @type {NodeGroupManager} */
 		this.manager = manager;
 		
 		// new!
@@ -2334,7 +1816,7 @@ class NodeGroup {
 		let replaceMode = typeof template.replaceMode === 'boolean'
 			? template.replaceMode
 			: fragment.children.length===1 &&
-				fragment.firstElementChild?.tagName.replace(/-REDCOMPONENT-PLACEHOLDER$/, '')
+				fragment.firstElementChild?.tagName.replace(/-SOLARITE-PLACEHOLDER$/, '')
 				=== manager?.rootEl?.tagName;
 		if (replaceMode) {
 			this.pseudoRoot = fragment.firstElementChild;
@@ -2361,7 +1843,7 @@ class NodeGroup {
 		
 
 		// Update web component placeholders.
-		// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
+		// 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)))
@@ -2390,13 +1872,19 @@ class NodeGroup {
 				this.createNewComponent(el);
 		}
 
-		if (this.manager.rootEl) {
+		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');
+
+					// 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}">`);
+
 					this.manager.rootEl[id] = el;
 				}
 
@@ -2421,20 +1909,13 @@ class NodeGroup {
 		}
 	}
 
-	updateStyles() {
-		if (this.styles)
-			for (let [style, oldText] of this.styles) {
-				let newText = style.textContent;
-				if (oldText !== newText)
-					Util.bindStyles(style, this.manager.rootEl);
-			}
-	}
-
 	/**
 	 * Use the paths to insert the given expressions.
 	 * Dispatches expression handling to other functions depending on the path type.
-	 * @param exprs {(*|*[]|function|Template)[]} */
-	applyExprs(exprs) {
+	 * @param exprs {(*|*[]|function|Template)[]}
+	 * @param paths {?ExprPath[]} Optional.  */
+	applyExprs(exprs, paths=null) {
+		paths = paths || this.paths;
 		
 		
 		// Update exprs at paths.
@@ -2442,7 +1923,7 @@ class NodeGroup {
 
 		// We apply them in reverse order so that a <select> box has its options created from an expression
 		// before its value attribute is set via an expression.
-		for (let path of this.paths.toReversed()) {
+		for (let path of paths.toReversed()) {
 			expr = exprs[exprIndex];
 
 			// Nodes
@@ -2453,8 +1934,8 @@ class NodeGroup {
 
 			// Attributes
 			else {
-				let node = path.nodeMarker; // path.resolve(result);
-				let node2 = (this.manager.rootEl && node === this.pseudoRoot) ? this.manager.rootEl : node;
+				let node = path.nodeMarker;
+				let el = (this.manager?.rootEl && node === this.pseudoRoot) ? this.manager.rootEl : node;
 				
 
 				// This is necessary both here and below.
@@ -2464,10 +1945,10 @@ class NodeGroup {
 				}
 
 				if (path.type === PathType.Multiple)
-					path.applyMultipleAttribs(node2, expr);
+					path.applyMultipleAttribs(el, expr);
 
 				// Capture attribute expressions to later send to the constructor of a web component.
-				// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
+				// 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;
 				
@@ -2476,13 +1957,13 @@ class NodeGroup {
 
 					// 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(node2, expr, root);
+						let root = this.manager?.rootEl || this.startNode.parentNode;  // latter is used when constructing a whole element.
+						path.applyEventAttrib(el, expr, root);
 					}
 
 					// Regular attribute value.
-					else
-						exprIndex = path.applyValueAttrib(node2, exprs, exprIndex);
+					else // One node value may have multiple expressions.  Here we apply them all at once.
+						exprIndex = path.applyValueAttrib(el, exprs, exprIndex);
 				}
 
 				lastNode = path.nodeMarker;
@@ -2509,6 +1990,10 @@ class NodeGroup {
 
 
 		
+	}
+
+	applyExpr(path, expr) {
+		// TODO: Use this if I can figure out how to adapt applyValueAttrib() to it.
 	}
 
 	/**
@@ -2532,7 +2017,7 @@ class NodeGroup {
 		//for (let ng of path.nodeGroups) // TODO: Is this necessary?
 		//	ng.parentPath = null;
 		path.nodeGroups = [];
-		this.applyOneExpr(expr, path, newNodes, secondPass);
+		path.apply(expr, newNodes, secondPass);
 		this.existingTextNodes = null;
 
 		// TODO: Create an array of old vs Nodes and NodeGroups together.
@@ -2622,113 +2107,32 @@ class NodeGroup {
 		}
 	}
 
-	// TODO: Move to ExprPath?
-	applyOneExpr(expr, path, newNodes, secondPass) {
-		
-		if (expr instanceof Template) {
-			expr.parentPath = path;
-			expr.nodegroup = this;
-			
-			//if (window.debug && expr.exprs[0] === 'Banana' && path.nodeGroups.length === 0)
-			//if (window.debug && expr.exprs[0] === 'Banana')
-			//	debugger;
-			
-			let ng = this.manager.getNodeGroup(expr, true);
-			
-			
-			if (ng) {
-				
-				
-				
-				// TODO: Track ranges of changed nodes and only pass those to udomdiff?
-				// But will that break the swap benchmark?
-				newNodes.push(...ng.getNodes());
-				path.nodeGroups.push(ng);
-			}
-			
-			// If expression, evaluate later to find partial match.
-			else {
-				secondPass.push([newNodes.length, path.nodeGroups.length]);
-				newNodes.push(expr);
-				path.nodeGroups.push(null); // placeholder
-			}
-		}
-
-		// Node created by an expression.
-		else if (expr instanceof Node) {
-
-			// DocumentFragment created by an expression.
-			if (expr instanceof DocumentFragment)
-				newNodes.push(...expr.childNodes);
-			else
-				newNodes.push(expr);
-		}
-
-		else if (Array.isArray(expr))
-			for (let subExpr of expr)
-				this.applyOneExpr(subExpr, path, newNodes, secondPass);
-
-		else if (typeof expr === 'function') {
-			expr = watchFunction(expr, this.manager);
-			
-			this.applyOneExpr(expr, path, 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 + '';
-
-			// Fast path for updating the text of a single text node.
-			let first = path.nodeBefore.nextSibling;
-			if (first.nodeType === 3 && first.nextSibling === path.nodeMarker && !newNodes.includes(first)) {
-				if (first.textContent !== text)
-					first.textContent = text;
-				
-				newNodes.push(first);
-			}
-
-			else {
-				// TODO: Optimize this into a Set or Map or something?
-				if (!this.existingTextNodes)
-					this.existingTextNodes = path.getNodes().filter(n => n.nodeType === 3);
-				
-				let idx = this.existingTextNodes.findIndex(n => n.textContent === text);
-				if (idx !== -1)
-					newNodes.push(...this.existingTextNodes.splice(idx, 1));
-				else
-					newNodes.push(path.parentNode.ownerDocument.createTextNode(text));
-			}
-		}
-	}
-
 	/**
 	 * Create a nested RedComponent or call render with the new props.
 	 * @param el {Solarite:HTMLElement}
 	 * @param props {Object} */
 	applyComponentExprs(el, props) {
-		
+
 		// TODO: Does a hash of this already exist somewhere?
 		// Perhaps if Components were treated as child NodeGroups, which would need to be the child of an ExprPath,
 		// then we could re-use the hash and logic from NodeManager?
 		let newHash = getObjectHash(props);
-		
-		let isPreHtmlElement = el.tagName.endsWith('-REDCOMPONENT-PLACEHOLDER');
+
+		let isPreHtmlElement = el.tagName.endsWith('-SOLARITE-PLACEHOLDER');
 		let isPreIsElement = el.hasAttribute('_is');
-		
-		
+
+
 		// Instantiate a placeholder.
 		if (isPreHtmlElement || isPreIsElement)
 			el = this.createNewComponent(el, isPreHtmlElement, props);
-		
+
 		// Update params of placeholder.
 		else if (el.render) {
 			let oldHash = 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);
 	}
 	
@@ -2747,8 +2151,8 @@ class NodeGroup {
 			isPreHtmlElement = !el.hasAttribute('_is');
 		
 		let tagName = (isPreHtmlElement
-			? el.tagName.endsWith('-REDCOMPONENT-PLACEHOLDER')
-				? el.tagName.slice(0, -25)
+			? el.tagName.endsWith('-SOLARITE-PLACEHOLDER')
+				? el.tagName.slice(0, -21)
 				: el.tagName
 			: el.getAttribute('is')).toLowerCase();
 
@@ -2868,18 +2272,38 @@ class NodeGroup {
 	}
 
 
+
+	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=} 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.
@@ -2928,122 +2352,12 @@ class NodeGroupManager {
 	 * @param rootEl {HTMLElement|DocumentFragment} If not specified, the first element of the html will be the rootEl. */
 	constructor(rootEl=null) {
 		this.rootEl = rootEl;
+
 		/*
 		
 		*/
 	}
 
-	/**
-	 * Render the main template, which may indirectly call renderTemplate() to create children.
-	 * @param template {Template}
-	 * @param options {RenderOptions}
-	 * @return {?DocumentFragment} */
-	render(template, options={}) {
-		this.mutationWatcherEnabled = false;
-		this.options = options;
-		this.clearSubscribers = false;
-		
-		
-		
-		if (!template && template !== '') {
-			this.rootEl.outerHTML = '';
-			this.mutationWatcherEnabled = true;
-			return null;
-		}
-		
-		// Fast path for empty component.
-		if (template.html?.length === 1 && !template.html[0]) {
-			this.rootEl.innerHTML = '';
-		}
-		else {
-
-			// Find or create a NodeGroup for the template.
-			// This updates all nodes from the template.
-			let close;
-			let exact = this.getNodeGroup(template, true);
-			if (!exact) {
-				close = this.getNodeGroup(template, false);
-			}
-			
-			
-			let firstTime = !this.rootNg;
-			this.rootNg = exact || close;
-
-			// Reparent NodeGroup
-			// TODO: Move this to NodeGroup?
-			let parent = this.rootNg.getParentNode();
-			if (!this.rootEl)
-				this.rootEl = parent;
-
-			// If this is the first time rendering this element.
-			else if (firstTime) {
-
-				// Save slot children
-				let fragment;
-				if (this.rootEl.childNodes.length) {
-					fragment = document.createDocumentFragment();
-					fragment.append(...this.rootEl.childNodes);
-				}
-
-				// Add rendered elements.
-				if (parent instanceof DocumentFragment)
-					this.rootEl.append(parent);
-				else if (parent)
-					this.rootEl.append(...parent.childNodes);
-
-				// Apply slot children
-				if (fragment) {
-					for (let slot of this.rootEl.querySelectorAll('slot[name]')) {
-						let name = slot.getAttribute('name');
-						if (name)
-							slot.append(...fragment.querySelectorAll(`[slot='${name}']`));
-					}
-					let unamedSlot = this.rootEl.querySelector('slot:not([name])');
-					if (unamedSlot)
-						unamedSlot.append(fragment);
-				}
-
-			}
-
-			// this.rootNg was rendered as childrenOnly=true
-			// Apply attributes from a root element to the real root element.
-			let ng = this.rootNg;
-			if (ng.pseudoRoot && ng.pseudoRoot !== this.rootEl) {
-				
-
-				// 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 (!this.rootEl.hasAttribute(attrib.name))
-                            this.rootEl.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;
-			}
-
-			
-			this.reset();
-			
-		}
-
-		this.mutationWatcherEnabled = true;
-		return this.rootEl;
-		
-	}
-
 
 	/**
 	 *
@@ -3142,6 +2456,8 @@ class NodeGroupManager {
 						// 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);
 					}
 				}
 			}
@@ -3172,7 +2488,7 @@ class NodeGroupManager {
 	 * but don't reparent it if it's somewhere else.
 	 * @param template {Template}
 	 * @param exact {?boolean}
-	 * @param createForWatch
+	 * @param createForWatch Deprecated.
 	 * @return {?NodeGroup} */
 	getNodeGroup(template, exact=null, createForWatch=false) {
 
@@ -3224,7 +2540,7 @@ class NodeGroupManager {
 				// Perhaps also result could cache its last exprKey and then we'd use only one map?
 				ng.exactKey = exactKey;
 				ng.closeKey = closeKey;
-				if (createForWatch) // TODO: Have this path be a separate function?
+				if (createForWatch)
 					this.nodeGroupsAvailable.add(ng.exactKey, ng);
 				else
 					this.nodeGroupsInUse.push(ng);
@@ -3267,14 +2583,7 @@ class NodeGroupManager {
 	//pathToLoopInfo = new MultiValueMap(); // uses a Set() for each value.
 	clearSubscribers = false;
 
-	/**
-	 * One path may be used to loop in more than one place, so we use this to get every anchor from each loop.
-	 * @param path {Array}
-	 * @return {LoopInfo[]} A function that gets the loop anchor NodeGroup */
-	getLoopInfo(path) {
-		let serializedArrayPath = serializePath(path);
-		return [...this.pathToLoopInfo.getAll(serializedArrayPath)]; // This is set inside forEach()
-	}
+	
 
 	
 	/**
@@ -3302,7 +2611,10 @@ class NodeGroupManager {
 	 * Get the NodeGroupManager for a Web Component.
 	 * @param rootEl {Solarite|HTMLElement}
 	 * @return {NodeGroupManager} */
-	static get(rootEl) {
+	static get(rootEl=null) {
+		if (!rootEl)
+			return new NodeGroupManager();
+
 		let ngm = nodeGroupManagers.get(rootEl);
 		if (!ngm) {
 			ngm = new NodeGroupManager(rootEl);
@@ -3321,16 +2633,7 @@ NodeGroupManager.pendingChildren = [];
 /**
  * Each Element that has Expr children has an associated NodeGroupManager here.
  * @type {WeakMap<HTMLElement, NodeGroupManager>} */
-let nodeGroupManagers = new WeakMap();
-
-
-
-class LoopInfo {
-	constructor(loopTemplate, itemTransformer) {
-		this.template = loopTemplate;
-		this.itemTransformer = itemTransformer;
-	}
-}
+let nodeGroupManagers = new WeakMap();
 
 /**
  * Convert strings to HTMLNodes.
@@ -3355,10 +2658,10 @@ class LoopInfo {
  * 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.
  * 8. r(template)                      // Render Template created by #1.
- * 9. r(() => r`<b>Hello</b>`);        // Create dynamic element that has a render() function.
+ * 9. r(() => r`<b>Hello</b>`, {...}); // Create dynamic element that has a render() function.
  *
  * @param htmlStrings {?HTMLElement|string|string[]|function():Template}
- * @param exprs {*[]|string|Template}
+ * @param exprs {*[]|string|Template|Object}
  * @return {Node|HTMLElement|Template} */
 function r(htmlStrings=undefined, ...exprs) {
 
@@ -3372,9 +2675,8 @@ function r(htmlStrings=undefined, ...exprs) {
 
         // 2. Render template created by #4 to element.
         if (exprs[0] instanceof Template) {
-            let ngm = NodeGroupManager.get(parent);
             let options = exprs[1];
-            ngm.render(template, options);
+            template.render(parent, options);
 
             // Append on the first go.
             if (!parent.childNodes.length && this) {
@@ -3393,15 +2695,16 @@ function r(htmlStrings=undefined, ...exprs) {
             return (htmlStrings, ...exprs) => {
                 rendered.add(parent);
                 let template = r(htmlStrings, ...exprs);
-                let ngm = NodeGroupManager.get(parent);
-                return ngm.render(template, options);
+                return template.render(parent, options);
             }
         }
 
         // null for expr[0], remove whole element.
+           // This path never happens?
         else {
-            let ngm = NodeGroupManager.get(parent);
-            ngm.render(null, exprs[1]);
+            throw new Error('unsupported');
+            //let ngm = NodeGroupManager.get(parent);
+            //ngm.render(null, exprs[1])
         }
     }
 
@@ -3429,16 +2732,16 @@ function r(htmlStrings=undefined, ...exprs) {
         return (htmlStrings, ...exprs) => {
             //rendered.add(parent)
             let template = r(htmlStrings, ...exprs);
-            return template.toNode();
+            return template.render();
         }
     }
 
     // 8.
     else if (htmlStrings instanceof Template) {
-        let ngm = new NodeGroupManager();
-        return ngm.render(htmlStrings);
+        return htmlStrings.render();
     }
 
+
     // 9. Create dynamic element with render() function.
     else if (typeof htmlStrings === 'function') {
         let getTemplate = htmlStrings;
@@ -3447,17 +2750,27 @@ function r(htmlStrings=undefined, ...exprs) {
         if (typeof template === 'string')
             throw new Error(`Please add the "r" prefix before the string "${template}"`)
 
-        let ngm = new NodeGroupManager();
         template.replaceMode = true;
-        let el = ngm.render(template);
+        let el = template.render();
 
+        // Create the render() function from the function we were given.
         el.render = (function() {
             template = getTemplate();
-            ngm.render(template);
+            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.')
 }
@@ -3472,6 +2785,10 @@ function r(htmlStrings=undefined, ...exprs) {
  * @type {WeakSet<HTMLElement>} */
 let rendered = new WeakSet();
 
+//import {watchGet, watchSet} from "./watch.js";
+
+
+
 function defineClass(Class, tagName, extendsTag) {
 	if (!customElements.getName(Class)) { // If not previously defined.
 		tagName = tagName || camelToDashes(Class.name);
@@ -3502,9 +2819,15 @@ let connected = new WeakSet();
  * 2.  Calls render() when added to the DOM, if it hasn't been called already.
  * 3.  Child elements are added before constructor is called.  But they're also passed to the constructor.
  * 4.  We can use this.html = r`...` to set html.
- * 5.  We have the onConnect, onFirstConnect, and onDisconnect methods.  These could be standalone though.
+ * 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?
  *
+ * Advantages to inheriting from HTMLElement
+ * 1.  Minimization won't break when it renames the Class and we call customElements.define() on the wrong name.
+ * 2.  We can inherit from things like HTMLTableRowElement directly.
+ * 3.  There's less magic, since everyone is familiar with defining custom elements.
+ *
  * @param extendsTag {?string}
  * @return {Class} */
 function createSolarite(extendsTag=null) {
@@ -3568,7 +2891,7 @@ function createSolarite(extendsTag=null) {
 			if (ch)
 				(this.querySelector('slot') || this).append(...ch);
 
-
+			/** @deprecated */
 			Object.defineProperty(this, 'html', {
 				set(html) {
 					rendered.add(this);
@@ -3618,112 +2941,7 @@ function createSolarite(extendsTag=null) {
 			defineClass(this, tagName, extendsTag);
 		}
 
-
-		renderWatched() {
-			let ngm = NodeGroupManager.get(this);
-
-			let nodeGroupUpdates = [];
-
-			for (let change of ngm.changes) {
-				if (change.action === 'set') {
-					for (let transformerInfo of change.transformerInfo) {
-
-						let oldHash = transformerInfo.hash;
-
-						let newObj = delve(watchSet(transformerInfo.path[0]), transformerInfo.path.slice(1));
-						let newTemplate = transformerInfo.transformer(newObj);
-						let newHash = getObjectHash(newTemplate);
-						let ngs = [...ngm.nodeGroupsAvailable.data[oldHash]];
-						for (let ng of ngs) {
-							nodeGroupUpdates.push([ng, oldHash, newHash, newTemplate.exprs, transformerInfo]);
-						}
-					}
-				}
-
-				else if (change.action === 'delete') {
-					for (let hash of change.value) {
-						let ngs = [...ngm.nodeGroupsAvailable.getAll(hash)]; // deletes from nodeGroupsAvailable.
-
-						for (let ng of ngs) {
-							if (ng.parentPath)
-								ng.parentPath.clearNodesCache();
-
-							for (let node of ng.getNodes())
-								node.remove();
-
-							// TODO: Update ancestor NodeGroup exactKeys
-						}
-					}
-				}
-				else if (change.action === 'insert') {
-
-					let beforeNg = change.beforeTemplate ? ngm.getNodeGroup(change.beforeTemplate, true) : null;
-					let arrayPath = [change.root, ...change.path];
-
-					// Get anchor so we can use it to get the parent
-					// TODO: Should this be watchGet(change.root) ?
-					for (let loopInfo of ngm.getLoopInfo([change.root, ...change.path.slice(0, -1)])) {
-
-						// Change.extra is aTemplate telling us where to insert before.
-						let beforeNode = beforeNg?.startNode || loopInfo.template.parentPath.nodeMarker;
-
-						// Loop over every item added to the array.
-						let i = 0; // TODO: How to get real insert index.
-						for (let obj of change.value) {
-
-							// Same logic as forEach() function.
-
-							let callback = loopInfo.itemTransformer;
-							let path = [...arrayPath.slice(0, -1), (arrayPath.at(-1) * 1 + i) + ''];
-
-							// Shortened logic found in watchGet(), but not any faster?
-							// the watchSet() is what makes this slower!
-							// let obj = delve(watchSet(path[0]), path.slice(1));
-							// let template = callback(obj);
-							// let serializedPath = serializePath(path);
-							// pathToTransformer.add(serializedPath, new TransformerInfo(path, callback, template)); // Uses a Set() to ensure no duplicates.
-
-							let template = watchGet(path, callback);
-							i++;
-
-
-							//let template = loopInfo.itemTransformer(obj); // What if it takes more than one obj argument?
-
-							// Create new NodeGroup
-							let ng = ngm.getNodeGroup(template, false, true);
-							ng.parentPath = beforeNg?.parentPath || loopInfo.template.parentPath;
-							
-							for (let node of ng.getNodes())
-								beforeNode.parentNode.insertBefore(node, beforeNode);
-
-							if (ng.parentPath) // This check is needed for the forEachSpliceInsert test, but why?
-								ng.parentPath.clearNodesCache();
-						}
-
-						// TODO: Update ancestor NodeGroup exactKeys
-					}
-				}
-			}
-
-			// Update them all at once, that way we can reassign the same value twice.
-			for (let [ng, oldHash, newHash, exprs, ti] of nodeGroupUpdates) {
-				ng.applyExprs(exprs);
-				ngm.nodeGroupsAvailable.data[oldHash].delete(ng);
-				ng.exactKey = ti.hash = newHash;
-				ngm.nodeGroupsAvailable.add(ng.exactKey, ng); // Add back to Map with new key.
-			}
-
-
-			ngm.changes = [];
-
-			return []; // TODO
-		}
 		
-		/**
-		 * @deprecated Use the getArg() function instead. */
-		getArg(name, val=null, type=ArgType.String) {
-			return getArg(this, name, val, type);
-		}
 	}
 }
 
@@ -3735,6 +2953,10 @@ let Solarite = new Proxy(createSolarite(), {
 		return createSolarite(...args)
 	}
 });
- // unfinished
+
+
+//Experimental:
+//export {forEach, watchGet, watchSet} from './watch.js' // old, unfinished
+//export {watch} from './watch2.js'; // unfinished
 
-export { ArgType, Solarite, forEach, getArg, r, watch, watchGet, watchSet };
+export { ArgType, Solarite, Template, getArg, r };