npm - solarite - Versions diffs - 0.2.3 → 0.3.0 - Mend

solarite 0.2.3 → 0.3.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 (24) hide show

package/dist/Solarite-debug.js +1708 -1211
package/dist/Solarite.js +1642 -1047
package/dist/Solarite.min.js +2 -2
package/package.json +1 -1
package/readme.md +1 -3
package/src/solarite/ExprPath.js +479 -196
package/src/solarite/Globals.js +77 -51
package/src/solarite/HtmlParser.js +91 -0
package/src/solarite/NodeGroup.js +288 -195
package/src/solarite/Shell.js +117 -91
package/src/solarite/Solarite.js +7 -3
package/src/solarite/Template.js +23 -18
package/src/solarite/Util.js +117 -179
package/src/solarite/createSolarite.js +16 -138
package/src/solarite/getArg.js +31 -16
package/src/solarite/{r.js → h.js} +56 -18
package/src/solarite/hash.js +12 -9
package/src/solarite/watch.js +546 -0
package/src/util/Errors.js +1 -0
package/src/util/MultiValueMap.js +73 -13
package/src/util/Util.js +15 -2
package/src/util/delve.js +5 -4
package/src/solarite/watch3.js +0 -98
package/src/util/WeakArray.js +0 -33

package/dist/Solarite-debug.js CHANGED Viewed

@@ -76,19 +76,112 @@ var Util$1 = {
 		return result;
 	},
+	/**
+	 * Use an array as the value of a map, appending to it when we add.
+	 * Used by watch.js.
+	 * @param map {Map|WeakMap|Object}
+	 * @param key
+	 * @param value */
+	mapArrayAdd(map, key, value) {
+		let result = map.get(key);
+		if (!result) {
+			result = [value];
+			map.set(key, result);
+		}
+		else
+			result.push(value);
+	},
 };
+var Globals;
+/**
+ * Created with a reset() function because it's useful for testing. */
+function reset() {
+	Globals = {
+		/**
+		 * Used by NodeGroup.applyComponentExprs() */
+		componentArgsHash: new WeakMap(),
+		/**
+		 * Store which instances of Solarite have already been added to the DOM.
+		 * @type {WeakSet<HTMLElement>} */
+		connected: new WeakSet(),
+		/**
+		 * ExprPath.applyExactNodes() sets this property when an expression is being accessed.
+		 * watch() then adds the ExprPath to the list of ExprPaths that should be re-rendered when the value changes.
+		 * @type {ExprPath}*/
+		currentExprPath: null,
+		div: document.createElement("div"),
+		/**
+		 * @type {Object<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
+		elementClasses: {},
+		/** @type {Object<string, boolean>} Key is tag-name.propName.  Value is whether it's an attribute.*/
+		htmlProps: {},
+		/**
+		 * Used by ExprPath.applyEventAttrib()
+		 * @type {WeakMap<Node, Object<eventName:string, [original:function, bound:function, args:*[]]>>} */
+		nodeEvents: new WeakMap(),
+		/**
+		 * Get the RootNodeGroup for an element.
+		 * @type {WeakMap<HTMLElement, RootNodeGroup>} */
+		nodeGroups: new WeakMap(),
+		/**
+		 * Used by r() path 9. */
+		objToEl: new WeakMap(),
+		//pendingChildren: [],
+		/**
+		 * 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(),
+		/**
+		 * 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(),
+		/**
+		 * A map of individual untagged strings to their Templates.
+		 * This way we don't keep creating new Templates for the same string when re-rendering.
+		 * This is used by ExprPath.applyExactNodes()
+		 * @type {Object<string, Template>} */
+		//stringTemplates: {},
+		reset,
+		count: 0
+	};
+}
+reset();
+var Globals$1 = Globals;
 /**
  * Follow a path into an object.
  * @param obj {object}
  * @param path {string[]}
- * @param createVal {*}  If set, non-existant paths will be created and value at path will be set to createVal.
+ * @param createVal {*}  If set, non-existent paths will be created and value at path will be set to createVal.
  * @return {*} The value, or undefined if it can't be reached. */
-function delve(obj, path, createVal = delveDontCreate) {
-	let isCreate = createVal !== delveDontCreate;
+function delve(obj, path, createVal = d) {
+	let isCreate = createVal !== d;
 	let len = path.length;
 	if (!obj && !isCreate && len)
@@ -123,253 +216,27 @@ function delve(obj, path, createVal = delveDontCreate) {
 	return obj;
 }
-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 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
- * sure we get the correct value via all three paths, we write our constructors according to the following
- * example.  Note that constructor args are embedded in an object, and must be all lower-case because
- * Browsers make all html attribute names lowercase.
- *
- * @example
- * constructor({name, userid=1}={}) {
- *     super();
- *
- *     // Get value from "name" attriute if persent, otherwise from name constructor arg.
- *     this.name = getArg(this, 'name', name);
- *
- *     // Optionally convert the value to an integer.
- *     this.userId = getArg(this, 'userid', userid, ArgType.Int);
- * }
- *
- * @param el {HTMLElement}
- * @param name {string} Attribute name.  Not case-sensitive.
- * @param val {*} Default value to use if attribute doesn't exist.
- * @param type {ArgType|function|*[]}
- *     If an array, use the value if it's in the array, otherwise return undefined.
- *     If it's a function, pass the value to the function and return the result.
- * @return {*} */
-function getArg(el, name, val=null, type=ArgType.String) {
-	let attrVal = el.getAttribute(name);
-	if (attrVal !== null) // If attribute doesn't exist.
-		val = attrVal;
-	if (Array.isArray(type))
-		return type.includes(val) ? val : undefined;
-	if (typeof type === 'function')
-		return type(val);
-	// If bool, it's true as long as it exists and its value isn't falsey.
-	if (type===ArgType.Bool) {
-		let lAttrVal = typeof val === 'string' ? val.toLowerCase() : val;
-		return !['false', '0', false, 0, null, undefined].includes(lAttrVal);
-	}
-	// Attribute doesn't exist
-	switch (type) {
-		case ArgType.Int:
-			return parseInt(val);
-		case ArgType.Float:
-			return parseFloat(val);
-		case ArgType.String:
-			return [undefined, null, false].includes(val) ? '' : val+'';
-		case ArgType.JSON:
-		case ArgType.Eval:
-			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;
-	}
-}
-/**
- * @enum */
-var ArgType = {
-	/**
-	 * false, 0, null, undefined, '0', and 'false' (case-insensitive) become false.
-	 * Anything else, including empty string becomes true.
-	 * Empty string is true because attributes with no value should be evaulated as true. */
-	Bool: 'Bool',
-	Int: 'Int',
-	Float: 'Float',
-	String: 'String',
-	/**
-	 * Parse the string value as JSON.
-	 * If it's not parsable, return the value as a string. */
-	JSON: 'JSON',
-	/**
-	 * Evaluate the string as JavaScript using the eval() function.
-	 * If it can't be evaluated, return the original string. */
-	Eval: 'Eval'
-};
+// d means "don't create"
+let d = {};
-let lastObjectId = 1>>>0; // Is a 32-bit int faster to increment than JavaScript's Number, which is a 64-bit float?
-let objectIds = new WeakMap();
-/**
- * @param obj {Object|string|Node}
- * @returns {string} */
-function getObjectId(obj) {
-	// if (typeof obj === 'function')
-	// 	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 = (lastObjectId++); // We use a unique prefix to ensure it doesn't collide w/ strings not from getObjectId()
-		objectIds.set(obj, result);
-	}
-	return result;
-}
-/**
- * Control how JSON.stringify() handles Nodes and Functions.
- * Normally, we'd pass a replacer() function argument to JSON.stringify() to handle Nodes and Functions.
- * But that makes JSON.stringify() take twice as long to run.
- * Adding a toJSON method globally on these object prototypes doesn't incur that performance penalty. */
-let isHashing = true;
-function toJSON() {
-	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;
-}
+let Util = {
-/**
- * Get a string that uniquely maps to the values of the given object.
- * If a value in obj changes, calling getObjectHash(obj) will then return a different hash.
- * This is used by NodeGroupManager to create a hash that represents the current values of a NodeGroup.
- *
- * 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) {
-	let result;
-	isHashing = true;
-	try {
-		result = JSON.stringify(obj);
-	}
-	catch(e) {
-		result = getObjectHashCircular(obj);
-	}
-	isHashing = false;
-	return result;
-}
+	bindId(root, el) {
+		let id = el.getAttribute('data-id') || el.getAttribute('id');
+		if (id) { // If something hasn't removed the id.
-/**
- * Slower hashing method that supports.
- * @param obj
- * @returns {string} */
-function getObjectHashCircular(obj) {
+			// Don't allow overwriting existing class properties if they already have a non-Node value.
+			if (root[id] && !(root[id] instanceof Node))
+				throw new Error(`${root.constructor.name}.${id} already has a value.  ` +
+					`Can't set it as a reference to <${el.tagName.toLowerCase()} id="${id}">`);
-	//console.log('circular')
-	// Slower version that handles circular references.
-	// Just adding any callback at all, even one that just returns the value, makes JSON.stringify() twice as slow.
-	const seen = new Set();
-	return JSON.stringify(obj, (key, value) => {
-		if (typeof value === 'object' && value !== null) {
-			if (seen.has(value))
-				return getObjectId(value);
-			seen.add(value);
+			delve(root, id.split(/\./g), el);
 		}
-		return value;
-	});
-}
-//#IFDEV
-/*@__NO_SIDE_EFFECTS__*/
-function assert(val) {
-	if (!val) {
-		debugger;
-		throw new Error('Assertion failed: ' + val);
-	}
-}
-//#ENDIF
-var Globals = {
-	/**
-	 * Used by NodeGroup.applyComponentExprs() */
-	componentHash: new WeakMap(),
-	/**
-	 * Store which instances of Solarite have already been added to the DOM.
-	 * @type {WeakSet<HTMLElement>} */
-	connected: new WeakSet(),
-	/**
-	 * 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(),
-	/**
-	 * Used by watch3 to see which expressions are being accessed. */
-	currentExprPath: [],
-	/**
-	 * @type {Object<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
-	elementClasses: {},
-	/**
-	 * Used by ExprPath.applyEventAttrib()
-	 * @type {WeakMap<Node, Object<eventName:string, [original:function, bound:function, args:*[]]>>} */
-	nodeEvents: new WeakMap(),
-	/**
-	 * Get the RootNodeGroup for an element.
-	 * @type {WeakMap<HTMLElement, RootNodeGroup>} */
-	nodeGroups: new WeakMap(),
-	/**
-	 * Used by r() path 9. */
-	objToEl: new WeakMap(),
-	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 = {
+	 * @param style {HTMLStyleElement}
+	 * @param root {HTMLElement} */
 	bindStyles(style, root) {
 		let styleId = root.getAttribute('data-style');
 		if (!styleId) {
@@ -382,17 +249,60 @@ let Util = {
 			root.setAttribute('data-style', styleId);
 		}
+		// Replace ":host" with "tagName[data-style=...]" in the css.
 		let tagName = root.tagName.toLowerCase();
 		for (let child of style.childNodes) {
 			if (child.nodeType === 3) {
 				let oldText = child.textContent;
-				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, tagName + '[data-style="' + styleId + '"]');
+				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, `${tagName}[data-style="${styleId}"]`);
 				if (oldText !== newText)
 					child.textContent = newText;
 			}
 		}
 	},
+	/**
+	 * Convert a Proper Case name to a name with dashes.
+	 * Dashes will be placed between letters and numbers.
+	 * If there are multiple consecutive capital letters followed by another chracater, a dash will be placed before the last capital letter.
+	 * @param str {string}
+	 * @return {string}
+	 *
+	 * @example
+	 * 'ProperName' => 'proper-name'
+	 * 'HTMLElement' => 'html-element'
+	 * 'BigUI' => 'big-ui'
+	 * 'UIForm' => 'ui-form'
+	 * 'A100' => 'a-100' */
+	camelToDashes(str) {
+		// Convert any capital letter that is preceded by a lowercase letter or number to lowercase and precede with a dash.
+		str = str.replace(/([a-z0-9])([A-Z])/g, '$1-$2');
+		// Convert any capital letter that is followed by a lowercase letter or number to lowercase and precede with a dash.
+		str = str.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2');
+		// Convert any number that is preceded by a lowercase or uppercase letter to be preceded by a dash.
+		str = str.replace(/([a-zA-Z])([0-9])/g, '$1-$2');
+		// Convert all the remaining capital letters to lowercase.
+		return str.toLowerCase();
+	},
+	/**
+	 * Converts a string written in kebab-case to camelCase.
+	 *
+	 * @param {string} str - The input string written in kebab-case.
+	 * @return {string} - The resulting camelCase string.
+	 *
+	 * @example
+	 * dashesToCamel('example-string') // Returns 'exampleString'
+	 * dashesToCamel('another-example-test') // Returns 'anotherExampleTest' */
+	dashesToCamel(str) {
+		return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+	},
 	/**
 	 * A generator function that recursively traverses and flattens a value.
 	 *
@@ -436,6 +346,7 @@ let Util = {
 	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLDivElement}
 	 * @return {string|string[]|number|[]|File[]|Date|boolean} */
 	getInputValue(node) {
+		// .type is a built-in DOM property
 		if (node.type === 'checkbox' || node.type === 'radio')
 			return node.checked; // Boolean
 		if (node.type === 'file')
@@ -450,48 +361,63 @@ let Util = {
 		return node.value; // String
 	},
+	/**
+	 * @param el {HTMLElement}
+	 * @param prop {string}
+	 * @returns {boolean} */
+	isHtmlProp(el, prop) {
+		let key = el.tagName + '.' + prop;
+		let result = Globals$1.htmlProps[key];
+		if (result === undefined) { // Caching just barely makes this slightly faster.
+			let proto = Object.getPrototypeOf(el);
+			// Find the first HTMLElement that we inherit from (not our own classes)
+			while (proto) {
+				const ctorName = proto.constructor.name;
+				if (ctorName.startsWith('HTML') && ctorName.endsWith('Element'))
+					break
+				proto = Object.getPrototypeOf(proto);
+			}
+			Globals$1.htmlProps[key] = result = (proto
+				? !!Object.getOwnPropertyDescriptor(proto, prop)?.set
+				: false);
+		}
+		return result;
+	},
 	/**
 	 * Is it an array and a path that can be evaluated by delve() ?
+	 * We allow the first element to be null/undefined so binding can report errors.
 	 * @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');
+		return Array.isArray(arr) && arr.length >=2  // An array of at least two elements.
+			&& (typeof arr[0] === 'object' || arr[0] === undefined) // Where the first element is an object, null, or undefined.
+			&& !arr.slice(1).find(p => typeof p !== 'string' && typeof p !== 'number'); // Path 1..x is only numbers and strings.
+	},
+	isFalsy(val) {
+		return val === undefined || val === false || val === null;
+	},
+	isPrimitive(val) {
+		return typeof val === 'string' || typeof val === '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);
-			}
-		}
+	 * If val is a function, evaluate it recursively until the result is not a function.
+	 * If it's an array or an object, convert it to Json.
+	 * If it's a Date, format it as Y-m-d H:i:s
+	 * @param val
+	 * @returns {string|number|boolean} */
+	makePrimitive(val) {
+		if (typeof val === 'function')
+			return Util.makePrimitive(val());
+		else if (val instanceof Date)
+			return val.toISOString().replace(/T/, ' ');
+		else if (Array.isArray(val) || typeof val === 'object')
+			return ''; // JSON.stringify(val);
+		return val;
 	},
 	/**
@@ -522,44 +448,14 @@ let Util = {
-let div = document.createElement('div');
-let isEvent = attrName => attrName.startsWith('on') && attrName in div;
-/**
- * Convert a Proper Case name to a name with dashes.
- * Dashes will be placed between letters and numbers.
- * If there are multiple consecutive capital letters followed by another chracater, a dash will be placed before the last capital letter.
- * @param str {string}
- * @return {string}
- *
- * @example
- * 'ProperName' => 'proper-name'
- * 'HTMLElement' => 'html-element'
- * 'BigUI' => 'big-ui'
- * 'UIForm' => 'ui-form'
- * 'A100' => 'a-100' */
-function camelToDashes(str) {
-	// Convert any capital letter that is preceded by a lowercase letter or number to lowercase and precede with a dash.
-	str = str.replace(/([a-z0-9])([A-Z])/g, '$1-$2');
-	// Convert any capital letter that is followed by a lowercase letter or number to lowercase and precede with a dash.
-	str = str.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2');
-	// Convert any number that is preceded by a lowercase or uppercase letter to be preceded by a dash.
-	str = str.replace(/([a-zA-Z])([0-9])/g, '$1-$2');
-	// Convert all the remaining capital letters to lowercase.
-	return str.toLowerCase();
-}
+let isEvent = attrName => attrName.startsWith('on') && attrName in Globals$1.div;
 /**
- * Returns false if they're the same.  Or the first index where they differ.
+ * Returns true if they're the same.
  * @param a
  * @param b
  * @returns {boolean} */
@@ -574,81 +470,8 @@ function arraySame(a, b) {
 }
-/**
- * TODO: Turn this into a class because it has internal state.
- * TODO: Don't break on 3<a inside a <script> or <style> tag.
- * @param html {?string} Pass null to reset context.
- * @returns {string} */
-function htmlContext(html) {
-	if (html === null) {
-		state = {...defaultState};
-		return state.context;
-	}
-	for (let i = 0; i < html.length; i++) {
-		const char = html[i];
-		switch (state.context) {
-			case htmlContext.Text:
-				if (char === '<' && html[i+1].match(/[a-z!]/i)) { // Start of a tag or comment.
-					// if (html.slice(i, i+4) === '<!--')
-					// 	state.context = htmlContext.Comment;
-					// else
-						state.context = htmlContext.Tag;
-					state.buffer = '';
-				}
-				break;
-			case htmlContext.Tag:
-				if (char === '>') {
-					state.context = htmlContext.Text;
-					state.quote = null;
-					state.buffer = '';
-				} else if (char === ' ' && !state.buffer) {
-					// No attribute name is present. Skipping the space.
-					continue;
-				} else if (char === ' ' || char === '/' || char === '?') {
-					state.buffer = '';  // Reset the buffer when a delimiter or potential self-closing sign is found.
-				} else if (char === '"' || char === "'" || char === '=') {
-					state.context = htmlContext.Attribute;
-					state.quote = char === '=' ? null : char;
-					state.buffer = '';
-				} else {
-					state.buffer += char;
-				}
-				break;
-			case htmlContext.Attribute:
-				if (!state.quote && !state.buffer.length && (char === '"' || char === "'"))
-					state.quote = char;
-				else if (char === state.quote || (!state.quote && state.buffer.length)) {
-					state.context = htmlContext.Tag;
-					state.quote = null;
-					state.buffer = '';
-				} else if (!state.quote && char === '>') {
-					state.context = htmlContext.Text;
-					state.quote = null;
-					state.buffer = '';
-				} else if (char !== ' ') {
-					state.buffer += char;
-				}
-				break;
-		}
-	}
-	return state.context;
-}
-htmlContext.Attribute = 'Attribute';
-htmlContext.Text = 'Text';
-htmlContext.Tag = 'Tag';
-//htmlContext.Comment = 'Comment';
-let defaultState = {
-	context: htmlContext.Text, // possible values: 'TEXT', 'TAG', 'ATTRIBUTE'
-	quote: null, // possible values: null, '"', "'"
-	buffer: '',
-	lastChar: null
-};
-let state = {...defaultState};
 // For debugging only
 //#IFDEV
@@ -670,47 +493,295 @@ function nodeToArrayTree(node, callback=null) {
 	let result = [];
-	if (callback)
-		result.push(...callback(node));
+	if (callback)
+		result.push(...callback(node));
+	if (node.nodeType === 1) {
+		let attrs = Array.from(node.attributes).map(attr => `${attr.name}="${attr.value}"`).join(' ');
+		let openingTag = `<${node.nodeName.toLowerCase()}${attrs ? ' ' + attrs : ''}>`;
+		let childrenArray = [];
+		for (let child of node.childNodes) {
+			let childResult = nodeToArrayTree(child, callback);
+			if (childResult.length > 0) {
+				childrenArray.push(childResult);
+			}
+		}
+		//let closingTag = `</${node.nodeName.toLowerCase()}>`;
+		result.push(openingTag, ...childrenArray);
+	} else if (node.nodeType === 3) {
+		result.push("'"+node.nodeValue+"'");
+	}
+	return result;
+}
+function flattenAndIndent(inputArray, indent = "") {
+	let result = [];
+	for (let item of inputArray) {
+		if (Array.isArray(item)) {
+			// Recursively handle nested arrays with increased indentation
+			result = result.concat(flattenAndIndent(item, indent + "  "));
+		} else {
+			result.push(indent + item);
+		}
+	}
+	return result;
+}
+//#ENDIF
+function defineClass(Class, tagName, extendsTag) {
+	if (!customElements[getName](Class)) { // If not previously defined.
+		tagName = tagName || Util.camelToDashes(Class.name);
+		if (!tagName.includes('-'))
+			tagName += '-element';
+		let options = null;
+		if (extendsTag)
+			options = {extends: extendsTag};
+		customElements[define](tagName, Class, options);
+	}
+}
+/**
+ * Create a version of the Solarite class that extends from the given tag name.
+ * Reasons to inherit from this instead of HTMLElement.  None of these are all that useful.
+ * 1.  customElements.define() is called automatically when you create the first instance.
+ * 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. (deprecated?)
+ * 4.  We can use this.html = r`...` to set html. (deprecated)
+ * 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.
+ * 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) {
+	let BaseClass = HTMLElement;
+	if (extendsTag && !extendsTag.includes('-')) {
+		extendsTag = extendsTag.toLowerCase();
+		BaseClass = Globals$1.elementClasses[extendsTag];
+		if (!BaseClass) { // TODO: Use Cache
+			BaseClass = document.createElement(extendsTag).constructor;
+			Globals$1.elementClasses[extendsTag] = BaseClass;
+		}
+	}
+	/**
+	 * Intercept the construct call to auto-define the class before the constructor is called.
+	 * @type {HTMLElement} */
+	let HTMLElementAutoDefine = new Proxy(BaseClass, {
+		construct(Parent, args, Class) {
+			defineClass(Class, null, extendsTag);
+			// This is a good place to manipulate any args before they're sent to the constructor.
+			// Such as loading them from attributes, if I could find a way to do so.
+			// This line is equivalent the to super() call.
+			return Reflect.construct(Parent, args, Class);
+		}
+	});
+	return class Solarite extends HTMLElementAutoDefine {
+		/**
+		 * TODO: Make these standalone functions.
+		 * Callbacks.
+		 * Use onConnect.push(() => ...); to add new callbacks. */
+		onConnect = Util$1.callback();
+		onFirstConnect = Util$1.callback();
+		onDisconnect = Util$1.callback();
+		/**
+		 * @param options {RenderOptions} */
+		constructor(options={}) {
+			super();
+			// TODO: Is options.render ever used?
+			if (options.render===true)
+				this.render();
+			else if (options.render===false)
+				Globals$1.rendered.add(this); // Don't render on connectedCallback()
+			// Add slot children before constructor code executes.
+			// This breaks the styleStaticNested test.
+			// PendingChildren is setup in NodeGroup.createNewComponent()
+			// TODO: Match named slots.
+			//let ch = Globals.pendingChildren.pop();
+			//if (ch) // TODO: how could there be a slot before render is called?
+			//	(this.querySelector('slot') || this).append(...ch);
+			/** @deprecated
+			Object.defineProperty(this, 'html', {
+				set(html) {
+					Globals.rendered.add(this);
+					if (typeof html === 'string') {
+						console.warn("Assigning to this.html without the r template prefix.")
+						this.innerHTML = html;
+					}
+					else
+						this.modifications = r(this, html, options);
+				}
+			})*/
+			/*
+			let pthis = new Proxy(this, {
+				get(obj, prop) {
+					return Reflect.get(obj, prop)
+				}
+			});
+			this.render = this.render.bind(pthis);
+			*/
+		}
+		/**
+		 * Call render() only if it hasn't already been called.	 */
+		renderFirstTime() {
+			if (!Globals$1.rendered.has(this) && this.render)
+				this.render();
+		}
+		/**
+		 * Called automatically by the browser. */
+		connectedCallback() {
+			this.renderFirstTime();
+			if (!Globals$1.connected.has(this)) {
+				Globals$1.connected.add(this);
+				this.onFirstConnect();
+			}
+			this.onConnect();
+		}
+		disconnectedCallback() {
+			this.onDisconnect();
+		}
+		static define(tagName=null) {
+			defineClass(this, tagName, extendsTag);
+		}
+	}
+}
+// Trick to prevent minifier from renaming this method.
+let define = 'define';
+let getName = 'getName';
+//#IFDEV
+/*@__NO_SIDE_EFFECTS__*/
+function assert(val) {
+	if (!val) {
+		debugger;
+		throw new Error('Assertion failed: ' + val);
+	}
+}
+//#ENDIF
+let lastObjectId = 1>>>0; // Is a 32-bit int faster to increment than JavaScript's Number, which is a 64-bit float?
+let objectIds = new WeakMap();
+/**
+ * @param obj {Object|string|Node}
+ * @returns {string} */
+function getObjectId(obj) {
+	// if (typeof obj === 'function')
+	// 	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 = '~\f' + (lastObjectId++); // We use a unique, 2-byte prefix to ensure it doesn't collide w/ strings not from getObjectId()
+		objectIds.set(obj, result);
+	}
+	return result;
+}
+/**
+ * Control how JSON.stringify() handles Nodes and Functions.
+ * Normally, we'd pass a replacer() function argument to JSON.stringify() to handle Nodes and Functions.
+ * But that makes JSON.stringify() take twice as long to run.
+ * Adding a toJSON method globally on these object prototypes doesn't incur that performance penalty. */
+let isHashing = true;
+function toJSON() {
+	return isHashing ? getObjectId(this) : this
+}
-	if (node.nodeType === 1) {
-		let attrs = Array.from(node.attributes).map(attr => `${attr.name}="${attr.value}"`).join(' ');
-		let openingTag = `<${node.nodeName.toLowerCase()}${attrs ? ' ' + attrs : ''}>`;
+// Node.prototype.toJSON = toJSON;
+// Function.prototype.toJSON = toJSON;
-		let childrenArray = [];
-		for (let child of node.childNodes) {
-			let childResult = nodeToArrayTree(child, callback);
-			if (childResult.length > 0) {
-				childrenArray.push(childResult);
-			}
-		}
-		//let closingTag = `</${node.nodeName.toLowerCase()}>`;
+/**
+ * Get a string that uniquely maps to the values of the given object.
+ * If a value in obj changes, calling getObjectHash(obj) will then return a different hash.
+ * This is used by NodeGroupManager to create a hash that represents the current values of a NodeGroup.
+ *
+ * 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) {
-		result.push(openingTag, ...childrenArray);
-	} else if (node.nodeType === 3) {
-		result.push("'"+node.nodeValue+"'");
+	// 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) {
+		result = getObjectHashCircular(obj);
+	}
+	isHashing = false;
 	return result;
 }
+/**
+ * Slower hashing method that supports.
+ * @param obj
+ * @returns {string} */
+function getObjectHashCircular(obj) {
-function flattenAndIndent(inputArray, indent = "") {
-	let result = [];
-	for (let item of inputArray) {
-		if (Array.isArray(item)) {
-			// Recursively handle nested arrays with increased indentation
-			result = result.concat(flattenAndIndent(item, indent + "  "));
-		} else {
-			result.push(indent + item);
+	//console.log('circular')
+	// Slower version that handles circular references.
+	// Just adding any callback at all, even one that just returns the value, makes JSON.stringify() twice as slow.
+	const seen = new Set();
+	return JSON.stringify(obj, (key, value) => {
+		if (typeof value === 'object' && value !== null) {
+			if (seen.has(value))
+				return getObjectId(value);
+			seen.add(value);
 		}
-	}
-	return result;
-}
-//#ENDIF
+		return value;
+	});
+}
 class MultiValueMap {
@@ -734,7 +805,10 @@ class MultiValueMap {
 		return false;
 	}
-	// Get all values for a key
+	/**
+	 * Get all values for a key.
+	 * @param key {string}
+	 * @returns {Set|*[]} */
 	getAll(key) {
 		return this.data[key] || [];
 	}
@@ -743,25 +817,16 @@ class MultiValueMap {
 	 * 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 {*} */
+	 * @returns {*|undefined} The deleted item. */
 	delete(key, val=undefined) {
-		// if (key === '["Html2",[[["Html3",["F1","A"]],["Html3",["F1","B"]]]]]')
-		// 	debugger;
 		let data = this.data;
-		// if (!data.hasOwnProperty(key))
-		// 	return undefined;
-		// Delete a specific value.
 		let result;
 		let set = data[key];
-		if (!set) // slower than pre-check.
+		if (!set)
 			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);
 		}
@@ -772,7 +837,73 @@ class MultiValueMap {
 			result = val;
 		}
-		// TODO: Will this make it slower?
+		if (set.size === 0)
+			delete data[key];
+		return result;
+	}
+	/**
+	 * Remove one value from a key, and return it.
+	 * @param key {string}
+	 * @returns {*|undefined} The deleted item. */
+	deleteAny(key) {
+		let data = this.data;
+		let result;
+		let set = data[key];
+		if (!set) // slower than pre-check.
+			return undefined;
+		[result] = set; // Does the same as above and seems to be about the same speed.
+		set.delete(result);
+		if (set.size === 0)
+			delete data[key];
+		return result;
+	}
+	deleteSpecific(key, val) {
+		let data = this.data;
+		let result;
+		let set = data[key];
+		if (!set)
+			return undefined;
+		set.delete(val);
+		result = val;
+		if (set.size === 0)
+			delete data[key];
+		return result;
+	}
+	/**
+	 * Try to delete an item that matches the key and the isPreferred function.
+	 * if not the latter, just delete any item that matches the key.
+	 * @param key {string}
+	 * @returns {*|undefined} The deleted item. */
+	deletePreferred(key, parent) {
+		let result;
+		let data = this.data;
+		let set = data[key];
+		if (!set)
+			return undefined;
+		for (let val of set) {
+			if (val?.parentNode === parent) {
+				set.delete(val);
+				result = val;
+				break;
+			}
+		}
+		if (!result) {
+			[result] = set;
+			set.delete(result);
+		}
 		if (set.size === 0)
 			delete data[key];
@@ -1019,14 +1150,23 @@ const udomdiff = (parentNode, a, b, before) => {
 	return b;
 };
+//import {ArraySpliceOp} from "./watch.js";
+//#IFDEV
+var exprPathId = 0;
+//#ENDIF
 /**
  * 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 {
+	//#IFDEV
+	eid = exprPathId++;
+	//#ENDIF
 	/**
-	 * @type {PathType} */
+	 * @type {ExprPathType} */
 	type;
 	// Used for attributes:
@@ -1042,8 +1182,6 @@ class ExprPath {
 	 * @type {Set<string>} Used for type=AttribType.Multiple to remember the attributes that were added. */
 	attrNames;
 	/**
 	 * @type {Node} Node that occurs before this ExprPath's first Node.
 	 * This is necessary because udomdiff() can steal nodes from another ExprPath.
@@ -1085,13 +1223,23 @@ class ExprPath {
 	nodeMarkerPath;
+	/** @type {?function} A function called by renderWatched() to update the value of this expression. */
+	watchFunction
+	/**
+	 * @type {?function} The most recent callback passed to a .map() function in this ExprPath.
+	 * TODO: What if one ExprPath has two .map() calls?  Maybe we just won't support that. */
+	mapCallback
+	isHtmlProperty = undefined;
 	/**
 	 * @param nodeBefore {Node}
 	 * @param nodeMarker {?Node}
-	 * @param type {PathType}
+	 * @param type {ExprPathType}
 	 * @param attrName {?string}
 	 * @param attrValue {string[]} */
-	constructor(nodeBefore, nodeMarker, type=PathType.Content, attrName=null, attrValue=null) {
+	constructor(nodeBefore, nodeMarker, type=ExprPathType.Content, attrName=null, attrValue=null) {
 		// If path is a node.
 		this.nodeBefore = nodeBefore;
@@ -1099,7 +1247,7 @@ class ExprPath {
 		this.type = type;
 		this.attrName = attrName;
 		this.attrValue = attrValue;
-		if (type === PathType.Multiple)
+		if (type === ExprPathType.AttribMultiple)
 			this.attrNames = new Set();
 	}
@@ -1113,36 +1261,27 @@ class ExprPath {
 	 * We should modify path.applyValueAttrib so it stores the procssed parts and then only calls
 	 * setAttribute() once all the pieces are in place.
 	 *
-	 * @param expr {Expr}
 	 * @param exprs {Expr[]}
-	 * @param exprIndex {int}
-	 * @param componentExprs {object}
-	 * @returns {int} */
-	apply(expr, exprs=null, exprIndex=0, componentExprs={}) {
+	 * @param freeNodeGroups {boolean} */
+	apply(exprs, freeNodeGroups=true) {
 		switch (this.type) {
 			case 1: // PathType.Content:
-				this.applyNodes(expr);
+				this.applyNodes(exprs[0], freeNodeGroups);
 				break;
 			case 2: // PathType.Multiple:
-				this.applyMultipleAttribs(this.nodeMarker, expr);
+				this.applyMultipleAttribs(this.nodeMarker, exprs[0]);
 				break;
 			case 5: // PathType.Comment:
 				// Expressions inside Html comments.  Deliberately empty because we won't waste time updating them.
 				break;
 			case 6: // PathType.Event:
-				this.applyEventAttrib(this.nodeMarker, expr, this.parentNg.rootNg.root);
+				this.applyEventAttrib(this.nodeMarker, exprs[0], this.parentNg.rootNg.root);
 				break;
-			default:
-				if (this.type === 4 /*PathType.Component*/ && this.nodeMarker !== this.parentNg.rootNg.root)
-					componentExprs[this.attrName] = expr;
-				else {
-					// One attribute value may have multiple expressions.  Here we apply them all at once.
-					exprIndex = this.applyValueAttrib(this.nodeMarker, exprs || [expr], exprIndex);
-				}
+			default: // TODO: Is this still used?  Lots of tests fail without it.
+				// One attribute value may have multiple expressions.  Here we apply them all at once.
+				this.applyValueAttrib(this.nodeMarker, exprs);
 				break;
 		}
-		return exprIndex;
 	}
 	/**
@@ -1150,10 +1289,17 @@ class ExprPath {
 	 * Called by applyExprs()
 	 * This function is recursive, as the functions it calls also call it.
 	 * @param expr {Expr}
+	 * @param freeNodeGroups {boolean}
 	 * @return {Node[]} New Nodes created. */
-	applyNodes(expr) {
+	applyNodes(expr, freeNodeGroups=true) {
 		let path = this;
+		// This can be done at the beginning or the end of this function.
+		// If at the end, we may get rendering done faster.
+		// But when at the beginning, it leaves all the nodes in-use so we can do a renderWatched().
+		if (freeNodeGroups)
+			path.freeNodeGroups();
 		/*#IFDEV*/path.verify();/*#ENDIF*/
 		/** @type {(Node|NodeGroup|Expr)[]} */
@@ -1162,10 +1308,10 @@ class ExprPath {
 		/*#IFDEV*/assert(!oldNodeGroups.includes(null));/*#ENDIF*/
 		let secondPass = []; // indices
-		path.nodeGroups = []; // Reset before applyExact and the code below rebuilds it.
-		path.applyExact(expr, newNodes, secondPass);
+		path.nodeGroups = []; // Reset before applyExactNodes and the code below rebuilds it.
+		path.applyExactNodes(expr, newNodes, secondPass);
-		this.existingTextNodes = null;
+		//this.existingTextNodes = null;
 		// TODO: Create an array of old vs Nodes and NodeGroups together.
 		// If they're all the same, skip the next steps.
@@ -1218,26 +1364,159 @@ class ExprPath {
 				// Rearrange nodes.
 				udomdiff(path.nodeMarker.parentNode, oldNodes, newNodes, path.nodeMarker);
-			Util.saveOrphans(oldNodeGroups, oldNodes);
+			// TODO: Put this in a remove() function of NodeGroup.
+			// Then only run it on the old nodeGroups that were actually removed.
+			//Util.saveOrphans(oldNodeGroups, oldNodes);
+			for (let ng of oldNodeGroups)
+				if (!ng.startNode.parentNode)
+					ng.removeAndSaveOrphans();
 		}
-		// Must happen after second pass.
-		path.freeNodeGroups();
 		/*#IFDEV*/path.verify();/*#ENDIF*/
 	}
+	/**
+	 * Used by watch() for inserting/removing/replacing individual loop items.
+	 * @param op {ArraySpliceOp} */
+	applyArrayOp(op) {
+		// Replace NodeGroups
+		let replaceCount = Math.min(op.deleteCount, op.items.length);
+		let deleteCount = op.deleteCount - replaceCount;
+		for (let i=0; i<replaceCount; i++) {
+			let oldNg = this.nodeGroups[op.index + i]; // TODO: One expr can create multiple nodegroups.
+			// Try to find an exact match
+			let func = this.mapCallback || this.watchFunction;
+			let expr = func(op.items[i]);
+			// If the result of func isn't a template, conver it to one or more templates.
+			this.exprToTemplates(expr, template => { // TODO: An expr can create multiple NodeGroups.  I need a way to group them.
+				let ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
+				if (ng && ng === oldNg) ; else {
+					// Find a close match or create a new node group
+					if (!ng)
+						ng = this.getNodeGroup(template, false); // adds back to nodeGroupsRendered()
+					this.nodeGroups[op.index + i] = ng; // TODO: Remove old one to nodeGroupsDetached?
+					// Splice in the new nodes.
+					let insertBefore = oldNg.startNode;
+					for (let node of ng.getNodes())
+						insertBefore.parentNode.insertBefore(node, insertBefore);
+					// Remove the old nodes.
+					if (ng !== oldNg)
+						oldNg.removeAndSaveOrphans();
+				}
+			});
+		}
+		// Delete extra at the end.
+		if (deleteCount > 0) {
+			for (let i=0; i<deleteCount; i++) {
+				let oldNg = this.nodeGroups[op.index + replaceCount +  i];
+				oldNg.removeAndSaveOrphans();
+			}
+			this.nodeGroups.splice(op.index + replaceCount, deleteCount);
+		}
+		// Add extra at the end.
+		else {
+			let newItems = op.items.slice(replaceCount);
+			let insertBefore = this.nodeGroups[op.index + replaceCount]?.startNode || this.nodeMarker;
+			for (let i = 0; i < newItems.length; i++) { // We use nodeMarker if the subequent (or all) nodeGroups have been removed.
+				// Try to find exact match
+				let template = this.mapCallback(newItems[i]);
+				let ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
+				if (!ng) 	// Find a close match or create a new node group
+					ng = this.getNodeGroup(template, false); // adds back to nodeGroupsRendered()
+				this.nodeGroups.push(ng);
+				// Splice in the new nodes.
+				for (let node of ng.getNodes())
+					insertBefore.parentNode.insertBefore(node, insertBefore);
+			}
+		}
+		//#IFDEV
+		assert(this.nodeGroups.length === op.array.length);
+		//#ENDIF
+		// TODO: update or invalidate the nodes cache?
+		this.nodesCache = null;
+	}
+	/**
+	 * Recursively traverse expr.
+	 * If a value is a function, evaluate it.
+	 * If a value is an array, recurse on each item.
+	 * If it's a primitive, convert it to a Template.
+	 * Otherwise pass the item (which is now either a Template or a Node) to callback.
+	 * @param expr
+	 * @param callback {function(Node|Template)}
+	 *
+	 * TODO: have applyExactNodes() use this function. */
+	exprToTemplates(expr, callback) {
+		if (Array.isArray(expr))
+			for (let subExpr of expr)
+				this.exprToTemplates(subExpr, callback);
+		else if (typeof expr === 'function') {
+			// TODO: One ExprPath can have multiple expr functions.
+			// But if using it as a watch, it should only have one at the top level.
+			// So maybe this is ok.
+			Globals$1.currentExprPath = this; // Used by watch()
+			this.watchFunction = expr; // TODO: Only do this if it's a top level function.
+			expr = expr(); // As expr accesses watched variables, watch() uses Globals.currentExprPath to mark where those watched variables are being used.
+			Globals$1.currentExprPath = null;
+			this.exprToTemplates(expr, callback);
+		}
+		// String/Number/Date/Boolean
+		else if (!(expr instanceof Template) && !(expr instanceof Node)){
+			// Convert expression to a string.
+			if (expr === undefined || expr === false || expr === null) // Util.isFalsy() inlined
+				expr = '';
+			else if (typeof expr !== 'string')
+				expr += '';
+			// Get the same Template for the same string each time.
+			// let template = Globals.stringTemplates[expr];
+			// if (!template) {
+				let template = new Template([expr], []);
+			//	Globals.stringTemplates[expr] = template;
+			//}
+			// Recurse.
+			this.exprToTemplates(template, callback);
+		}
+		else
+			callback(expr);
+	}
 	/**
-	 * Apply Nodes that are an exact match.
+	 * Try to apply Nodes that are an exact match, by finding existing nodes from the last render
+	 * that have the same value as created by the expr.
+	 * This is called from ExprPath.applyNodes().
+	 *
 	 * @param expr {Template|Node|Array|function|*}
-	 * @param newNodes {(Node|Template)[]}
-	 * @param secondPass {Array} Locations within newNodes to evaluate later. */
-	applyExact(expr, newNodes, secondPass) {
+	 * @param newNodes {(Node|Template)[]} An inout parameter; we add the nodes here as we go.
+	 * @param secondPass {[int, int][]} Locations within newNodes for ExprPath.applyNodes() to evaluate later,
+	 *   when it tries to find partial matches. */
+	applyExactNodes(expr, newNodes, secondPass) {
 		if (expr instanceof Template) {
 			let ng = this.getNodeGroup(expr, true);
 			if (ng) {
@@ -1255,7 +1534,7 @@ class ExprPath {
 			}
 		}
-		// Node created by an expression.
+		// Node(s) created by an expression.
 		else if (expr instanceof Node) {
 			// DocumentFragment created by an expression.
@@ -1268,49 +1547,54 @@ class ExprPath {
 		// Arrays and functions.
 		// I tried iterating over the result of a generator function to avoid this recursion and simplify the code,
 		// but that consistently made the js-framework-benchmarks a few percentage points slower.
-		else if (Array.isArray(expr))
+		else {
+			this.exprToTemplates(expr, template => {
+				this.applyExactNodes(template, newNodes, secondPass);
+			});
+		}
+		// Old version
+		/*else if (Array.isArray(expr))
 			for (let subExpr of expr)
-				this.applyExact(subExpr, newNodes, secondPass);
+				this.applyExactNodes(subExpr, newNodes, secondPass);
 		else if (typeof expr === 'function') {
-			Globals.currentExprPath = [this, expr]; // Used by watch3()
-			let result = expr();
+			// TODO: One ExprPath can have multiple expr functions.
+			// But if using it as a watch, it should only have one at the top level.
+			// So maybe this is ok.
+			Globals.currentExprPath = this; // Used by watch()
+			this.watchFunction = expr; // TODO: Only do this if it's a top level function.
+			let result = expr(); // As expr accesses watched variables, watch() uses Globals.currentExprPath to mark where those watched variables are being used.
 			Globals.currentExprPath = null;
-			this.applyExact(result, newNodes, secondPass);
+			this.applyExactNodes(result, newNodes, secondPass);
 		}
-		// Text
+		// String
 		else {
-			// Convert falsy values (but not 0) to empty string.
-			// Convert numbers to string so they compare the same.
-			let text = (expr === undefined || expr === false || expr === null) ? '' : (expr + '');
-			// Fast path for updating the text of a single text node.
-			let first = this.nodeBefore.nextSibling;
-			if (first.nodeType === 3 && first.nextSibling === this.nodeMarker && !newNodes.includes(first)) {
-				if (first.textContent !== text)
-					first.textContent = text;
-				newNodes.push(first);
+			// Convert expression to a string.
+			let stringExpr = expr;
+			if (expr === undefined || expr === false || expr === null) // Util.isFalsy()
+				stringExpr = '';
+			else if (typeof expr !== 'string')
+				stringExpr = expr + '';
+			// Get the same Template for the same string each time.
+			let template = Globals.stringTemplates[stringExpr];
+			if (!template) {
+			template = new Template([stringExpr], []);
+				Globals.stringTemplates[stringExpr] = template;
 			}
-			else {
-				// TODO: Optimize this into a Set or Map or something?
-				if (!this.existingTextNodes)
-					this.existingTextNodes = this.getNodes().filter(n => n.nodeType === 3);
-				let idx = this.existingTextNodes.findIndex(n => n.textContent === text);
-				if (idx !== -1)
-					newNodes.push(...this.existingTextNodes.splice(idx, 1));
-				else
-					newNodes.push(this.nodeMarker.ownerDocument.createTextNode(text));
-			}
-		}
+			// Recurse.
+			this.applyExactNodes(template, newNodes, secondPass);
+		}*/
 	}
 	applyMultipleAttribs(node, expr) {
-		/*#IFDEV*/assert(this.type === PathType.Multiple);/*#ENDIF*/
+		/*#IFDEV*/assert(this.type === ExprPathType.AttribMultiple);/*#ENDIF*/
 		if (Array.isArray(expr))
 			expr = expr.flat().join(' ');  // flat and join so we can accept arrays of arrays of strings.
@@ -1319,6 +1603,13 @@ class ExprPath {
 		let oldNames = this.attrNames;
 		this.attrNames = new Set();
 		if (expr) {
+			if (typeof expr === 'function') {
+				Globals$1.currentExprPath = this; // Used by watch()
+				this.watchFunction = expr; // used by renderWatched()
+				expr = expr();
+				Globals$1.currentExprPath = null;
+			}
 			let attrs = (expr +'') // Split string into multiple attributes.
 				.split(/([\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s]+))/g)
 				.map(text => text.trim())
@@ -1349,49 +1640,60 @@ class ExprPath {
 	 * @param root */
 	applyEventAttrib(node, expr, root) {
 		/*#IFDEV*/
-		assert(this.type === PathType.Event/* || this.type === PathType.Component*/);
+		assert(this.type === ExprPathType.Event/* || this.type === PathType.Component*/);
 		assert(root instanceof HTMLElement);
 		/*#ENDIF*/
 		let eventName = this.attrName.slice(2); // remove "on-" prefix.
 		let func;
-		// Convert array to function.
 		let args = [];
-		if (Array.isArray(expr)) {
-			// oninput=${[this.doSomething, 'meow']}
-			if (typeof expr[0] === 'function') {
-				func = expr[0];
-				args = expr.slice(1);
-			}
-			// Undocumented.
-			// oninput=${[this, 'value']}
-			else {
-				func = setValue;
-				args = [expr[0], expr.slice(1), node];
-				node.value = delve(expr[0], expr.slice(1));
-				// root.render(); // TODO: This causes infinite recursion.
-			}
+		// Convert array to function.
+		// oninput=${[this.doSomething, 'meow']}
+		if (Array.isArray(expr) && typeof expr[0] === 'function') {
+			func = expr[0];
+			args = expr.slice(1);
 		}
-		else
+		else if (typeof expr === 'function')
 			func = expr;
+		else
+			throw new Error(`Invalid event binding: <${node.tagName.toLowerCase()} ${this.attrName}=\${${JSON.stringify(expr)}}>`);
+		this.bindEvent(node, root, eventName, eventName, func, args);
+	}
-		let nodeEvents = Globals.nodeEvents.get(node);
+	/**
+	 * Call function when eventName is triggerd on node.
+	 * @param node {HTMLElement}
+	 * @param root {HTMLElement}
+	 * @param key {string}
+	 * @param eventName {string}
+	 * @param func {function}
+	 * @param args {array}
+	 * @param capture {boolean} */
+	bindEvent(node, root, key, eventName, func, args, capture=false) {
+		let nodeEvents = Globals$1.nodeEvents.get(node);
 		if (!nodeEvents) {
-			nodeEvents = {[eventName]: new Array(3)};
-			Globals.nodeEvents.set(node, nodeEvents);
+			nodeEvents = {[key]: new Array(3)};
+			Globals$1.nodeEvents.set(node, nodeEvents);
 		}
-		let nodeEvent = nodeEvents[eventName];
+		let nodeEvent = nodeEvents[key];
+		if (!nodeEvent)
+			nodeEvents[key] = nodeEvent = new Array(3);
+		if (typeof func !== 'function')
+			throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${${func}}> because it's not a function.`);
 		// If function has changed, remove and rebind the event.
 		if (nodeEvent[0] !== func) {
+			// TODO: We should be removing event listeners when calling getNodeGroup(),
+			// when we get the node from the list of nodeGroupsAttached/nodeGroupsDetached,
+			// instead of only when we rebind an event.
 			let [existing, existingBound, _] = nodeEvent;
 			if (existing)
-				node.removeEventListener(eventName, existingBound);
+				node.removeEventListener(eventName, existingBound, capture);
 			let originalFunc = func;
@@ -1407,74 +1709,155 @@ class ExprPath {
 			nodeEvent[0] = originalFunc;
 			nodeEvent[1] = boundFunc;
-			node.addEventListener(eventName, boundFunc);
+			node.addEventListener(eventName, boundFunc, capture);
 			// TODO: classic event attribs?
-			//el[attr.name] = e => // e.g. el.onclick = ...
-			//	(new Function('event', 'el', attr.value)).bind(this.manager.rootEl)(e, el) // put "event", "el", and "this" in scope for the event code.
+			//el[attr.name] = e => // e.g. el.onclick = ... // put "event", "el", and "this" in scope for the event code.
+			//	(new Function('event', 'el', attr.value)).bind(this.manager.rootEl)(e, el)
 		}
 		//  Otherwise just update the args to the function.
-		nodeEvents[eventName][2] = args;
+		nodeEvents[key][2] = args;
 	}
-	applyValueAttrib(node, exprs, exprIndex) {
-		let expr = exprs[exprIndex];
-		// Values to toggle an attribute
-		if (!this.attrValue && (expr === false || expr === null || expr === undefined))
-			node.removeAttribute(this.attrName);
-		else if (!this.attrValue && expr === true)
-			node.setAttribute(this.attrName, '');
+	/**
+	 * Handle values, including two-way binding.
+	 * @param node
+	 * @param exprs */
+	// TODO: node is always this.nodeMarker?
+	applyValueAttrib(node, exprs) {
+		let expr = exprs[0];
+		// Two-way binding between attributes
 		// Passing a path to the value attribute.
+		// Copies the attribute to the property when the input event fires.
+		// value=${[this, 'value]'}
+		// checked=${[this, 'isAgree']}
 		// This same logic is in NodeGroup.createNewComponent() for components.
-		else if ((this.attrName === 'value' || this.attrName === 'data-value') && Util.isPath(expr)) {
+		if (Util.isPath(expr)) {
 			let [obj, path] = [expr[0], expr.slice(1)];
-			node.value = delve(obj, path);
-			node.addEventListener('input', () => {
-				delve(obj, path, Util.getInputValue(node));
-			}, true); // We use capture so we update the values before other events added by the user.
+			if (!obj)
+				throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${[${expr.map(item => item ? `'${item}'` : item+'').join(', ')}]}>.`);
+			let value = delve(obj, path);
+			// Special case to allow setting select-multiple value from an array
+			if (this.attrName === 'value' && node.type === 'select-multiple' && Array.isArray(value)) {
+				// Set the .selected property on the options having a value within value.
+				let strValues = value.map(v => v + '');
+				for (let option of node.options)
+					option.selected = strValues.includes(option.value);
+			}
+			else {
+				// TODO: should we remove isFalsy, since these are always props?
+				let strValue = Util.isFalsy(value) ? '' : value;
+				// If we don't have this condition, when we call render(), the browser will scroll to the currently
+				// selected item in a <select> and mess up manually scrolling to a different value.
+				if (strValue !== node[this.attrName])
+					node[this.attrName] = strValue;
+			}
+			// TODO: We need to remove any old listeners, like in bindEventAttribute.
+			// Does bindEvent() now handle that?
+			let func = () => {
+				let value = (this.attrName === 'value')
+					? Util.getInputValue(node)
+					: node[this.attrName];
+				delve(obj, path, value);
+			};
+			// We use capture so we update the values before other events added by the user.
+			// TODO: Bind to scroll events also?
+			// What about resize events and width/height?
+			this.bindEvent(node, path[0], this.attrName, 'input', func, [], true);
 		}
 		// Regular attribute
 		else {
-			let value = [];
-			// We go backward because NodeGroup.applyExprs() calls this function, and it goes backward through the exprs.
-			if (this.attrValue) {
-				for (let i=this.attrValue.length-1; i>=0; i--) {
-					value.unshift(this.attrValue[i]);
-					if (i > 0) {
-						let val = exprs[exprIndex];
-						if (val !== false && val !== null && val !== undefined)
-							value.unshift(val);
-						exprIndex--;
+			// TODO: Cache this on ExprPath.isProp when Shell creates the props.  Have ExprPath.clone() copy .isProp
+			// Or make it a new PathType.
+			//if (this.attrName === 'disabled')
+			//	debugger;
+			// hasOwnProperty() checks only the object, not the parents
+			// this.attrName in node checks the node and the parents.
+			// This version checks the html element it extends from, to see if has a setter set:
+			//     Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), this.attrName)?.set
+			//let isProp = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), this.attrName)?.set;
+			let isProp = this.isHtmlProperty;
+			if (isProp === undefined)
+				isProp = this.isHtmlProperty = Util.isHtmlProp(node, this.attrName);
+			// Values to toggle an attribute
+			let multiple = this.attrValue;
+			if (!multiple) {
+				Globals$1.currentExprPath = this; // Used by watch()
+				if (typeof expr === 'function') {
+					if (this.type === 4) { // Don't evaluate functions before passing them to components
+						return
 					}
+					this.watchFunction = expr; // The function that gets the expression, used for renderWatched()
+					expr = expr();
 				}
-				exprIndex ++;
+				else
+					expr = Util.makePrimitive(expr);
+				Globals$1.currentExprPath = null;
 			}
-			else
-				value.unshift(expr);
+			if (!multiple && (expr === undefined || expr === false || expr === null)) { // Util.isFalsy() inlined.
+				if (isProp)
+					node[this.attrName] = false;
+				node.removeAttribute(this.attrName);
+			}
+			else if (!multiple && expr === true) {
+				if (isProp)
+					node[this.attrName] = true;
+				node.setAttribute(this.attrName, '');
+			}
+			// A non-toggled attribute
+			else {
-			let joinedValue = value.join('');
+				// If it's a series of expressions among strings, join them together.
+				let joinedValue;
+				if (multiple) {
+					let value = [];
+					for (let i = 0; i < this.attrValue.length; i++) {
+						value.push(this.attrValue[i]);
+						if (i < this.attrValue.length - 1) {
+							Globals$1.currentExprPath = this; // Used by watch()
+							let val = Util.makePrimitive(exprs[i]);
+							Globals$1.currentExprPath = null;
+							if (!Util.isFalsy(val))
+								value.push(val);
+						}
+					}
+					joinedValue = value.join('');
+				}
-			// Only update attributes if the value has changed.
-			// The .value property is special.  If it changes we don't update the attribute.
-			let oldVal = this.attrName === 'value' ? node.value : node.getAttribute(this.attrName);
-			if (oldVal !== joinedValue) {
-				node.setAttribute(this.attrName, joinedValue);
+				// If the attribute is one expression with no strings:
+				else
+					joinedValue = expr;
+				// Only update attributes if the value has changed.
+				// This is needed for setting input.value, .checked, option.selected, etc.
+				let oldVal = isProp
+					? node[this.attrName]
+					: node.getAttribute(this.attrName);
+				if (oldVal !== joinedValue) {
+					// <textarea value=${expr}></textarea>
+					// Without this branch we have no way to set the value of a textarea,
+					// since we also prohibit expressions that are a child of textarea.
+					if (isProp)
+						node[this.attrName] = joinedValue;
+					// TODO: Putting an 'else' here would be more performant
+					node.setAttribute(this.attrName, joinedValue);
+				}
 			}
-			// 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;
 	}
@@ -1490,7 +1873,8 @@ class ExprPath {
 		let nodeMarker, nodeBefore;
 		let root = newRoot;
 		let path = pathOffset ? this.nodeMarkerPath.slice(0, -pathOffset) : this.nodeMarkerPath;
-		for (let i=path.length-1; i>0; i--) // Resolve the path.
+		let length = path.length-1;
+		for (let i=length; i>0; i--) // Resolve the path.
 			root = root.childNodes[path[i]];
 		let childNodes = root.childNodes;
@@ -1535,7 +1919,7 @@ class ExprPath {
 	/**
 	 * Attempt to remove all of this ExprPath's nodes from the DOM, if it can be done using a special fast method.
-	 * @returns {boolean} Returns false if Nodes werne't removed, and they should instead be removed manually. */
+	 * @returns {boolean} Returns false if Nodes weren't removed, and they should instead be removed manually. */
 	fastClear() {
 		let parent = this.nodeBefore.parentNode;
 		if (this.nodeBefore === parent.firstChild && this.nodeMarker === parent.lastChild) {
@@ -1571,6 +1955,10 @@ class ExprPath {
 		// 	result2.push(...ng.getNodes())
 		// return result2;
+		if (this.type === ExprPathType.AttribValue || this.type === ExprPathType.AttribMultiple || this.type === ExprPathType.ComponentAttribValue) {
+			return [this.nodeMarker];
+		}
 		let result;
@@ -1597,7 +1985,8 @@ class ExprPath {
 		return result;
 	}
-	getParentNode() { // Same as this.parentNode
+	/** @return {HTMLElement|ParentNode} */
+	getParentNode() {
 		return this.nodeMarker.parentNode
 	}
@@ -1614,27 +2003,39 @@ class ExprPath {
 	 *         or createa  new NodeGroup from the template.
 	 * @return {NodeGroup} */
 	getNodeGroup(template, exact=true) {
-		//if (exact && this.nodeGroupsFree.isEmpty())
-		//	return null;
 		let result;
+		let collection = this.nodeGroupsAttachedAvailable;
+		// TODO: Would it be faster to maintain a separate list of detached nodegroups?
+		if (exact) { // [below] parentElement will be null if the parent is a DocumentFragment
+			result = collection.deleteAny(template.getExactKey());
+			if (!result) { // try searching detached
+				collection = this.nodeGroupsDetachedAvailable;
+				result = collection.deleteAny(template.getExactKey());
+			}
-		if (exact) {
-			result = this.nodeGroupsFree.delete(template.getExactKey());
 			if (result) // also delete the matching close key.
-				this.nodeGroupsFree.delete(template.getCloseKey(), result);
-			else
+				collection.deleteSpecific(template.getCloseKey(), result);
+			else {
 				return null;
+			}
 		}
 		// Find a close match.
 		// This is a match that has matching html, but different expressions applied.
 		// We can then apply the expressions to make it an exact match.
-		else {
-			result = this.nodeGroupsFree.delete(template.getCloseKey());
+		// If the template has no expressions, the key is the html, and we've already searched for an exact match.  There won't be an inexact match.
+		else if (template.exprs.length) {
+			result = collection.deleteAny(template.getCloseKey());
+			if (!result) { // try searching detached
+				collection = this.nodeGroupsDetachedAvailable;
+				result = collection.deleteAny(template.getCloseKey());
+			}
 			if (result) {
 				/*#IFDEV*/assert(result.exactKey);/*#ENDIF*/
-				this.nodeGroupsFree.delete(result.exactKey, result);
+				collection.deleteSpecific(result.exactKey, result);
 				// Update this close match with the new expression values.
 				result.applyExprs(template.exprs);
@@ -1646,58 +2047,70 @@ class ExprPath {
 			result = new NodeGroup(template, this);
 		// old:
-		this.nodeGroupsInUse.push(result);
-		// new:
-		// let ngiu = this.nodeGroupsInUse;
-		// ngiu.add(result.exactKey, result);
-		// ngiu.add(result.closeKey, result);
+		this.nodeGroupsRendered.push(result);
 		/*#IFDEV*/assert(result.parentPath);/*#ENDIF*/
 		return result;
 	}
+	isComponent() {
+		// Events won't have type===Component.
+		// TODO: Have a special flag for components instead of it being on the type?
+		return this.type === ExprPathType.ComponentAttribValue || (this.attrName && this.nodeMarker.tagName && this.nodeMarker.tagName.includes('-'));
+	}
 	/**
+	 * TODO: Rename this to nodeGroupsInUse, nodeGroupsAvialableAttached and nodeGroupsAvailableDetached?
+	 * Nodes that have been used during the current render().
 	 * Used with getNodeGroup() and freeNodeGroups().
 	 * TODO: Use an array of WeakRef so the gc can collect them?
 	 * TODO: Put items back in nodeGroupsInUse after applyExpr() is called, not before.
 	 * @type {NodeGroup[]} */
-	nodeGroupsInUse = [];
-	/** @type {MultiValueMap<key:string, value:NodeGroup>} */
-	//nodeGroupsInUse = new MultiValueMap();
+	nodeGroupsRendered = [];
 	/**
+	 * Nodes that were added to the web component during the last render(), but are available to be used again.
 	 * Used with getNodeGroup() and freeNodeGroups().
 	 * Each NodeGroup is here twice, once under an exact key, and once under the close key.
 	 * @type {MultiValueMap<key:string, value:NodeGroup>} */
-	nodeGroupsFree = new MultiValueMap();
+	nodeGroupsAttachedAvailable = new MultiValueMap();
+	/**
+	 * Nodes that were not added to the web component during the last render(), and available to be used again.
+	 * @type {MultiValueMap} */
+	nodeGroupsDetachedAvailable = new MultiValueMap();
 	/**
-	 * Move everything from this.nodeGroupsInUse to this.nodeGroupsFree.
+	 * Move everything from this.nodeGroupsRendered to this.nodeGroupsAttached and nodeGroupsDetached.
+	 * Called at the beginning of applyNodes() so it can have NodeGroups to use.
 	 * TODO: this could run as needed in getNodeGroup? */
 	freeNodeGroups() {
-		// old:
-		let ngf = this.nodeGroupsFree;
-		for (let ng of this.nodeGroupsInUse) {
-			ngf.add(ng.exactKey, ng);
-			ngf.add(ng.closeKey, ng);
+		// Add nodes that weren't used during render() to nodeGroupsDetached
+		let previouslyAttached = this.nodeGroupsAttachedAvailable.data;
+		let detached = this.nodeGroupsDetachedAvailable.data;
+		for (let key in previouslyAttached) {
+			let set = detached[key];
+			if (!set)
+				detached[key] = previouslyAttached[key];
+			else
+				for (let ng of previouslyAttached[key])
+					set.add(ng);
+		}
+		// Add nodes that were used during render() to nodeGroupsRendered.
+		this.nodeGroupsAttachedAvailable = new MultiValueMap();
+		let nga = this.nodeGroupsAttachedAvailable;
+		for (let ng of this.nodeGroupsRendered) {
+			nga.add(ng.exactKey, ng);
+			nga.add(ng.closeKey, ng);
 		}
-		this.nodeGroupsInUse = [];
-		// new:
-		// for (let key in this.nodeGroupsFree.data)
-		// 	for (let item of this.nodeGroupsFree.data[key])
-		// 		this.nodeGroupsInUse.add(key, item);
-		//
-		// this.nodeGroupsFree = this.nodeGroupsInUse;
-		// this.nodeGroupsInUse = new MultiValueMap();
+		this.nodeGroupsRendered = [];
 	}
 	//#IFDEV
 	get debug() {
 		return [
 			`parentNode: ${this.nodeBefore.parentNode?.tagName?.toLowerCase()}`,
@@ -1710,7 +2123,7 @@ class ExprPath {
 			}), 1).flat()
 		]
 	}
 	get debugNodes() {
 		// Clear nodesCache so that getNodes() manually gets the nodes.
 		let nc = this.nodesCache;
@@ -1719,13 +2132,13 @@ class ExprPath {
 		this.nodesCache = nc;
 		return result;
 	}
 	verify() {
 		if (!window.verify)
 			return;
-		assert(this.type!==PathType.Content || this.nodeBefore);
-		assert(this.type!==PathType.Content || this.nodeBefore.parentNode);
+		assert(this.type!==ExprPathType.Content || this.nodeBefore);
+		assert(this.type!==ExprPathType.Content || this.nodeBefore.parentNode);
 		// Need either nodeMarker or parentNode
 		assert(this.nodeMarker);
@@ -1734,10 +2147,10 @@ class ExprPath {
 		assert(!this.nodeMarker || this.nodeMarker.parentNode);
 		// nodeBefore and nodeMarker must have same parent.
-		assert(this.type!==PathType.Content || this.nodeBefore.parentNode === this.nodeMarker.parentNode);
+		assert(this.type!==ExprPathType.Content || this.nodeBefore.parentNode === this.nodeMarker.parentNode);
 		assert(this.nodeBefore !== this.nodeMarker);
-		assert(this.type!==PathType.Content|| !this.nodeBefore.parentNode || this.nodeBefore.compareDocumentPosition(this.nodeMarker) === Node.DOCUMENT_POSITION_FOLLOWING);
+		assert(this.type!==ExprPathType.Content|| !this.nodeBefore.parentNode || this.nodeBefore.compareDocumentPosition(this.nodeMarker) === Node.DOCUMENT_POSITION_FOLLOWING);
 		// Detect cyclic parent and grandparent references.
 		assert(this.parentNg?.parentPath !== this);
@@ -1750,43 +2163,27 @@ class ExprPath {
 		// Make sure the nodesCache matches the nodes.
 		this.checkNodesCache();
 	}
 	checkNodesCache() {
 		return;
 	}
 	//#ENDIF
 }
-/**
- *
- * @param root
- * @param path {string[]}
- * @param node {HTMLElement}
- */
-function setValue(root, path, node) {
-	let val = node.value;
-	if (node.type === 'number')
-		val = parseFloat(val);
-	delve(root, path, val);
-}
 /** @enum {int} */
-const PathType = {
+const ExprPathType = {
 	/** Child of a node */
 	Content: 1,
 	/** One or more whole attributes */
-	Multiple: 2,
+	AttribMultiple: 2,
 	/** Value of an attribute. */
-	Value: 3,
+	AttribValue: 3,
 	/** Value of an attribute being passed to a component. */
-	Component: 4,
+	ComponentAttribValue: 4,
 	/** Expressions inside Html comments. */
 	Comment: 5,
@@ -1812,118 +2209,179 @@ function getNodePath(node) {
  * Note that the path is backward, with the outermost element at the end.
  * @param root {HTMLElement|Document|DocumentFragment|ParentNode}
  * @param path {int[]}
- * @returns {Node|HTMLElement} */
+ * @returns {Node|HTMLElement|HTMLStyleElement} */
 function resolveNodePath(root, path) {
 	for (let i=path.length-1; i>=0; i--)
 		root = root.childNodes[path[i]];
 	return root;
 }
+class HtmlParser {
+	constructor() {
+		this.defaultState = {
+			context: HtmlParser.Text, // possible values: 'TEXT', 'TAG', 'ATTRIBUTE'
+			quote: null, // possible values: null, '"', "'"
+			buffer: '',
+			lastChar: null
+		};
+		this.state = {...this.defaultState};
+	}
+	reset() {
+		this.state = {...this.defaultState};
+		return this.state.context;
+	}
+	/**
+	 * Parse the next chunk of html, starting with the same context we left off with from the previous chunk.
+	 * @param html {string}
+	 * @param onContextChange {?function(html:string, index:int, oldContext:string, newContext:string)}
+	 *     Called every time the context changes, and again at the last context.
+	 * @return {('Attribute','Text','Tag')} The context at the end of html.  */
+	parse(html, onContextChange=null) {
+		if (html === null)
+			return this.reset();
+		for (let i = 0; i < html.length; i++) {
+			const char = html[i];
+			switch (this.state.context) {
+				case HtmlParser.Text:
+					if (char === '<' && html[i + 1].match(/[/a-z!]/i)) { // Start of a tag or comment.
+						onContextChange?.(html, i, this.state.context, HtmlParser.Tag);
+						this.state.context = HtmlParser.Tag;
+						this.state.buffer = '';
+					}
+					break;
+				case HtmlParser.Tag:
+					if (char === '>') {
+						onContextChange?.(html, i+1, this.state.context, HtmlParser.Text);
+						this.state.context = HtmlParser.Text;
+						this.state.quote = null;
+						this.state.buffer = '';
+					}
+					else if (char === ' ' && !this.state.buffer) {
+						// No attribute name is present. Skipping the space.
+						continue;
+					}
+					else if (char === ' ' || char === '/' || char === '?') {
+						this.state.buffer = ''; // Reset the buffer when a delimiter or potential self-closing sign is found.
+					}
+					else if (char === '"' || char === "'" || char === '=') {
+						onContextChange?.(html, i, this.state.context, HtmlParser.Attribute);
+						this.state.context = HtmlParser.Attribute;
+						this.state.quote = char === '=' ? null : char;
+						this.state.buffer = '';
+					}
+					else
+						this.state.buffer += char;
+					break;
+				case HtmlParser.Attribute:
+					// Start an attribute quote.
+					if (!this.state.quote && !this.state.buffer.length && (char === '"' || char === "'")) {
+						this.state.quote = char;
+					}
+					else if (char === this.state.quote || (!this.state.quote && this.state.buffer.length)) {
+						onContextChange?.(html, i, this.state.context, HtmlParser.Tag);
+						this.state.context = HtmlParser.Tag;
+						this.state.quote = null;
+						this.state.buffer = '';
+					}
+					else if (!this.state.quote && char === '>') {
+						onContextChange?.(html, i+1, this.state.context, HtmlParser.Text);
+						this.state.context = HtmlParser.Text;
+						this.state.quote = null;
+						this.state.buffer = '';
+					}
+					else if (char !== ' ')
+						this.state.buffer += char;
+					break;
+			}
+		}
+		onContextChange?.(html, html.length, this.state.context, null);
+		return this.state.context;
+	}
+}
+HtmlParser.Attribute = 'Attribute';
+HtmlParser.Text = 'Text';
+HtmlParser.Tag = 'Tag';
 /**
  * A Shell is created from a tagged template expression instantiated as Nodes,
  * 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. */
+ * the NodeGroup then clones the Shell's fragment to be its nodes. */
 class Shell {
 	/**
-	 * @type {DocumentFragment} DOM parent of the shell nodes. */
+	 * @type {DocumentFragment|Text} DOM parent of the shell's nodes. */
 	fragment;
 	/** @type {ExprPath[]} Paths to where expressions should go. */
 	paths = [];
-	// Embeds and ids
-	events = [];
+	// Elements with events.  Not yet used.
+	// events = [];
 	/** @type {int[][]} Array of paths */
 	ids = [];
+	/** @type {int[][]} Array of paths */
 	scripts = [];
+	/** @type {int[][]} Array of paths */
 	styles = [];
+	/** @type {int[][]} Array of paths.  Used by activateEmbeds() to quickly find components. */
 	staticComponents = [];
+	/** @type {{path:int[], attribs:Object<string, string>}[]} */
+	//componentAttribs = [];
 	/**
 	 * Create the nodes but without filling in the expressions.
 	 * This is useful because the expression-less nodes created by a template can be cached.
-	 * @param html {string[]} */
+	 * @param html {string[]} Html strings, split on places where an expression exists.  */
 	constructor(html=null) {
 		if (!html)
 			return;
 		//#IFDEV
-		this.html = html.join('');
+		this._html = html.join('');
 		//#ENDIF
-		// 1.  Add placeholders
-		// We increment the placeholder char as we go because nodes can't have the same attribute more than once.
-		let placeholder = 0xe000; // https://en.wikipedia.org/wiki/Private_Use_Areas  6400.
-		let buffer = [];
-		let commentPlaceholder = `<!--!✨!-->`;
-		let componentNames = {};
-		htmlContext(null); // Reset the context.
-		for (let i=0; i<html.length; i++) {
-			let lastHtml = html[i];
-			let context = htmlContext(lastHtml);
-			// Swap out Embedded Solarite Components with ${} attributes.
-			// Later, NodeGroup.render() will search for these and replace them with the real components.
-			// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-			if (context === htmlContext.Attribute) {
-				let lastIndex, lastMatch;
-				lastHtml.replace(/<[a-z][a-z0-9]*-[a-z0-9-]+/ig, (match, index) => {
-					lastIndex = index+1; // +1 for after opening <
-					lastMatch = match.slice(1);
-				});
-				if (lastMatch) {
-					let newTagName = lastMatch + '-solarite-placeholder';
-					lastHtml = lastHtml.slice(0, lastIndex) + newTagName + lastHtml.slice(lastIndex + lastMatch.length);
-					componentNames[lastMatch] = newTagName;
-				}
-			}
-			buffer.push(lastHtml);
-			//console.log(lastHtml, context)
-			if (i < html.length-1)
-				if (context === htmlContext.Text)
-					buffer.push(commentPlaceholder); // Comment Placeholder. because we can't put text in between <tr> tags for example.
-				else
-					buffer.push(String.fromCharCode(placeholder+i));
+		if (html.length === 1 && !html[0].match(/[<&]/)) {
+			this.fragment = document.createTextNode(html[0]);
+			return;
 		}
-		// 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 '-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]}>`);
-        if (joinedHtml)
-		    template.innerHTML = joinedHtml;
-        else // Create one text node, so shell isn't empty and NodeGroups created from it have something to point the startNode and endNode at.
-            template.content.append(document.createTextNode(''));
+		// 1.  Add placeholders
+		let joinedHtml = Shell.addPlaceholders(html);
+		let template = document.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
+		if (joinedHtml)
+			template.innerHTML = joinedHtml;
+		else // Create one text node, so shell isn't empty and NodeGroups created from it have something to point the startNode and endNode at.
+			template.content.append(document.createTextNode(''));
 		this.fragment = template.content;
-		// 3. Find placeholders
+		// 2. Find placeholders
 		let node;
 		let toRemove = [];
-		const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
+		let placeholdersUsed = 0;
+		const walker = document.createTreeWalker(this.fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
 		while (node = walker.nextNode()) {
 			// Remove previous after each iteration, so paths will still be calculated correctly.
 			toRemove.map(el => el.remove());
 			toRemove = [];
 			// Replace attributes
 			if (node.nodeType === 1) {
 				for (let attr of [...node.attributes]) { // Copy the attributes array b/c we remove attributes as we go.
@@ -1931,7 +2389,8 @@ class Shell {
 					// Whole attribute
 					let matches = attr.name.match(/^[\ue000-\uf8ff]$/);
 					if (matches) {
-						this.paths.push(new ExprPath(null, node, PathType.Multiple));
+						this.paths.push(new ExprPath(null, node, ExprPathType.AttribMultiple));
+						placeholdersUsed ++;
 						node.removeAttribute(matches[0]);
 					}
@@ -1940,16 +2399,17 @@ 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;
-							let type = isEvent(attr.name) ? PathType.Event : PathType.Value;
+							let type = isEvent(attr.name) ? ExprPathType.Event : ExprPathType.AttribValue;
 							this.paths.push(new ExprPath(null, node, type, attr.name, nonEmptyParts));
+							placeholdersUsed += parts.length - 1;
 							node.setAttribute(attr.name, parts.join(''));
 						}
 					}
 				}
 			}
 			// Replace comment placeholders
-			else if (node.nodeType === Node.COMMENT_NODE && node.nodeValue === '!✨!') {
+			else if (node.nodeType === 8 && node.nodeValue === '!✨!') {
 				// Get or create nodeBefore.
 				let nodeBefore = node.previousSibling; // Can be the same as another Path's nodeMarker.
@@ -1974,12 +2434,14 @@ class Shell {
 				}
 				/*#IFDEV*/assert(nodeMarker);/*#ENDIF*/
-				let path = new ExprPath(nodeBefore, nodeMarker, PathType.Content);
+				let path = new ExprPath(nodeBefore, nodeMarker, ExprPathType.Content);
 				this.paths.push(path);
+				placeholdersUsed ++;
 			}
+			else if (node.nodeType === 3 && node.parentNode?.tagName === 'TEXTAREA' && node.textContent.includes('<!--!✨!-->'))
+				throw new Error(`Textarea can't have expressions inside them. Use <textarea value="\${...}"> instead.`);
 			// Sometimes users will comment out a block of html code that has expressions.
@@ -1990,8 +2452,9 @@ class Shell {
 				let parts = node.textContent.split(/[\ue000-\uf8ff]/g);
 				for (let i=0; i<parts.length-1; i++) {
 					let path = new ExprPath(node.previousSibling, node);
-					path.type = PathType.Comment;
+					path.type = ExprPathType.Comment;
 					this.paths.push(path);
+					placeholdersUsed ++;
 				}
 			}
@@ -2009,8 +2472,9 @@ class Shell {
 					}
 					for (let i=0, node; node=placeholders[i]; i++) {
-						let path = new ExprPath(node.previousSibling, node, PathType.Content);
+						let path = new ExprPath(node.previousSibling, node, ExprPathType.Content);
 						this.paths.push(path);
+						placeholdersUsed ++;
 						/*#IFDEV*/path.verify();/*#ENDIF*/
 					}
@@ -2022,17 +2486,17 @@ class Shell {
 		}
 		toRemove.map(el => el.remove());
+		// Less than or equal because there can be one path to multiple expressions
+		// if those expressions are in the same attribute value.
+		if (placeholdersUsed !== html.length-1)
+			throw new Error(`Could not parse expressions in template.  Check for duplicate attributes or malformed html: ${html.join('${...}')}`);
 		// 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(','))]
-		// Rename "is" attributes so the Web Components don't instantiate until we have the values of their PathExpr arguments.
+		// 3. Rename "is" attributes so the Web Components don't instantiate until we have the values of their PathExpr arguments.
 		// that happens in NodeGroup.applyComponentExprs()
-		for (let el of this.fragment.querySelectorAll('[is]')) {
+		for (let el of this.fragment.querySelectorAll('[is]'))
 			el.setAttribute('_is', el.getAttribute('is'));
-		//	this.components.push(el);
-		}
 		for (let path of this.paths) {
 			if (path.nodeBefore)
@@ -2040,16 +2504,63 @@ 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 && /*path.nodeMarker !== template.content.children[0] &&*/
+			if (path.type === ExprPathType.AttribValue && path.nodeMarker.nodeType === 1 &&
 				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
-				path.type = PathType.Component;
+				path.type = ExprPathType.ComponentAttribValue;
 			}
 		}
 		this.findEmbeds();
 		/*#IFDEV*/this.verify();/*#ENDIF*/
-	} // end constructor
+	}
+	/**
+	 * 1. Add a Unicode placeholder char for where expressions go within attributes.
+	 * 2. Add a comment placeholder for where expressions are children of other nodes.
+	 * 3. Append -solarite-placeholder to the tag names of custom components so that we can wait to instantiate them later.
+	 * @param htmlChunks {string[]}
+	 * @returns {string} */
+	static addPlaceholders(htmlChunks) {
+		let tokens = [];
+		function addToken(token, context) {
+			if (context === HtmlParser.Tag) {
+				// Find Solarite Components tags and append -solarite-placeholder to their tag names.
+				// This way we can gather their constructor arguments and their children before we call their constructor.
+				// Later, NodeGroup.createNewComponent() will replace them with the real components.
+				// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
+				token = token.replace(/^<\/?[a-z][a-z0-9]*-[a-z0-9-]+/i, match => match + '-solarite-placeholder');
+			}
+			tokens.push(token);
+		}
+		let htmlParser = new HtmlParser(); // Reset the context.
+		for (let i = 0; i < htmlChunks.length; i++) {
+			let lastHtml = htmlChunks[i];
+			// Append -solarite-placholder to web component tags, so we can pass args to them when they're instantiated.
+			let lastIndex = 0;
+			let context = htmlParser.parse(lastHtml, (html, index, oldContext, newContext) => {
+				if (lastIndex !== index) {
+					let token = html.slice(lastIndex, index);
+					addToken(token, oldContext);
+				}
+				lastIndex = index;
+			});
+			// Insert placeholders
+			if (i < htmlChunks.length - 1) {
+				if (context === HtmlParser.Text)
+					tokens.push(commentPlaceholder); // Comment Placeholder. because we can't put text in between <tr> tags for example.
+				else
+					tokens.push(String.fromCharCode(attribPlaceholder + i));
+			}
+		}
+		return tokens.join('');
+	}
 	/**
 	 * We find the path to every embed here once in the Shell, instead of every time a NodeGroup is instantiated.
@@ -2061,36 +2572,30 @@ class Shell {
 	 * this.staticComponents */
 	findEmbeds() {
 		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('scripts'), el => getNodePath(el));
+		// TODO: only find styles that have ExprPaths in them?
 		this.styles = Array.prototype.map.call(this.fragment.querySelectorAll('style'), el => getNodePath(el));
 		let idEls = this.fragment.querySelectorAll('[id],[data-id]');
 		// Check for valid id names.
 		for (let el of idEls) {
 			let id = el.getAttribute('data-id') || el.getAttribute('id');
-			if (div.hasOwnProperty(id))
+			if (Globals$1.div.hasOwnProperty(id))
 				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement id property.`)
 		}
 		this.ids = Array.prototype.map.call(idEls, el => getNodePath(el));
-		// Events (not yet used)
 		for (let el of this.fragment.querySelectorAll('*')) {
-			for (let attrib of el.attributes)
-				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.
+				// Dynamic components are components that 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));
 		}
 	}
 	/**
@@ -2098,10 +2603,10 @@ class Shell {
 	 * @param htmlStrings {string[]} Typically comes from a Template.
 	 * @returns {Shell} */
 	static get(htmlStrings) {
-		let result = Globals.shells.get(htmlStrings);
+		let result = Globals$1.shells.get(htmlStrings);
 		if (!result) {
 			result = new Shell(htmlStrings);
-			Globals.shells.set(htmlStrings, result); // cache
+			Globals$1.shells.set(htmlStrings, result); // cache
 		}
 		/*#IFDEV*/result.verify();/*#ENDIF*/
@@ -2117,7 +2622,14 @@ class Shell {
 		}
 	}
 	//#ENDIF
-}
+}
+const commentPlaceholder = `<!--!✨!-->`;
+// We increment the placeholder char as we go because nodes can't have the same attribute more than once.
+const attribPlaceholder = 0xe000; // https://en.wikipedia.org/wiki/Private_Use_Areas  6400.
 /** @typedef {boolean|string|number|function|Object|Array|Date|Node|Template} Expr */
@@ -2143,7 +2655,8 @@ class NodeGroup {
 	startNode;
 	/** @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.*/
+	 * An empty text node will be created to insertBefore if there's no other NodeMarker and this isn't at the last position.
+	 * TODO: But sometimes startNode and endNode point to the same node.  Document htis inconsistency. */
 	endNode;
 	/** @type {ExprPath[]} */
@@ -2161,11 +2674,11 @@ class NodeGroup {
 	nodesCache;
 	/**
+	 * A map between <style> Elements and their text content.
+	 * This lets NodeGroup.updateStyles() see when the style text has changed.
 	 * @type {?Map<HTMLStyleElement, string>} */
 	styles;
-	currentComponentProps = {};
 	/**
 	 * Create an "instantiated" NodeGroup from a Template and add it to an element.
@@ -2173,14 +2686,26 @@ class NodeGroup {
 	 * @param parentPath {?ExprPath} */
 	constructor(template, parentPath=null) {
 		if (!(this instanceof RootNodeGroup)) {
 			let [fragment, shell] = this.init(template, parentPath);
-			this.updatePaths(fragment, shell.paths);
+			if (fragment && template.exprs.length) {
+				this.updatePaths(fragment, shell.paths);
-			this.activateEmbeds(fragment, shell);
+				// Static web components can sometimes have children created via expressions.
+				// But calling applyExprs() will mess up the shell's path to them.
+				// So we find them first, then call activateStaticComponents() after their children have been created.
+				let staticComponents = this.findStaticComponents(fragment, shell);
-			// Apply exprs
-			this.applyExprs(template.exprs);
+				this.activateEmbeds(fragment, shell);
+				// Apply exprs
+				this.applyExprs(template.exprs);
+				this.activateStaticComponents(staticComponents);
+			}
+			else if (shell)
+				this.activateEmbeds(fragment, shell);
 		}
 	}
@@ -2208,57 +2733,104 @@ class NodeGroup {
 		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);
-		let childNodes = fragment.childNodes;
-		this.startNode = childNodes[0];
-		this.endNode = childNodes[childNodes.length - 1];
+		// If it's just a text node, skip a bunch of unnecessary steps.
+		if (!(this instanceof RootNodeGroup) && !template.exprs.length && !template.html[0].includes('<')) {
+			//let doc = this.rootNg.startNode?.ownerDocument || document;
+			let textNode = document.createTextNode(template.html[0]);
+			this.startNode = this.endNode = textNode;
+			return [];
+		}
+		else {
+			let shell = Shell.get(template.html);
+			let fragment = shell.fragment.cloneNode(true);
-		return [fragment, shell];
+			if (fragment instanceof DocumentFragment) {
+				let childNodes = fragment.childNodes;
+				this.startNode = childNodes[0];
+				this.endNode = childNodes[childNodes.length - 1];
+			}
+			else {
+				this.startNode = this.endNode = fragment;
+			}
+			return [fragment, shell];
+		}
 	}
 	/**
 	 * Use the paths to insert the given expressions.
 	 * Dispatches expression handling to other functions depending on the path type.
 	 * @param exprs {(*|*[]|function|Template)[]}
-	 * @param paths {?ExprPath[]} Optional.  */
+	 * @param paths {?ExprPath[]} Optional.  Only used for testing.  Normally uses this.paths.  */
 	applyExprs(exprs, paths=null) {
 		paths = paths || this.paths;
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		/*#IFDEV*/
+		this.verify();/*#ENDIF*/
+		// Things to consider:
+		// 1. One path may use multipe expressions.  E.g. <div class="${1} ${2}">
+		// 2. One component may need to use multiple attribute paths to be instantiated.
+		// 3. We apply them in reverse order so that a <select> box has its children created from an expression
+		//    before its instantiated and its value attribute is set via an expression.
+		let exprIndex = exprs.length - 1; // Update exprs at paths.
+		let lastComponentPathIndex;
+		let pathExprs = new Array(paths.length); // Store all the expressions that map to a single path.  Only paths to attribute values can have more than one.
+		for (let i = paths.length - 1, path; path = paths[i]; i--) {
+			let prevPath = paths[i - 1];
+			let nextPath = paths[i + 1];
+			// Get the expressions associated with this path.
+			if (path.attrValue?.length > 2) {
+				let startIndex = (exprIndex - (path.attrValue.length - 1)) + 1;
+				pathExprs[i] = exprs.slice(startIndex, exprIndex + 1); // probably doesn't allocate if the JS vm implements copy on write.
+				exprIndex -= pathExprs[i].length;
+			} else {
+				pathExprs[i] = [exprs[exprIndex]];
+				exprIndex--;
+			}
-		// Update exprs at paths.
-		let exprIndex = exprs.length-1, expr, lastNode;
+			// TODO: Need to end and restart this block when going from one component to the next?
+			// Think of having two adjacent components.
+			// But the dynamicAttribsAdjacet test already passes.
-		// 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 paths.toReversed()) {
-			expr = exprs[exprIndex];
+			// If a component:
+			// 1. Instantiate it if it hasn't already been, sending all expr's to its constructor.
+			// 2. Otherwise send them to its render function.
+			// Components with no expressions as attributes are instead activated in activateEmbeds().
+			if (path.nodeMarker !== this.rootNg.root && path.isComponent()) {
-			// Nodes
+				if (!nextPath || !nextPath.isComponent() || nextPath.nodeMarker !== path.nodeMarker)
+					lastComponentPathIndex = i;
+				let isFirstComponentPath = !prevPath || !prevPath.isComponent() || prevPath.nodeMarker !== path.nodeMarker;
-			// 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 = {};
-			}
+				if (isFirstComponentPath) {
-			exprIndex = path.apply(expr, exprs, exprIndex, this.currentComponentProps);
+					let componentProps = {};
+					for (let j=i; j<=lastComponentPathIndex; j++) {
+						let attrName = paths[j].attrName; // Util.dashesToCamel(paths[j].attrName);
+						componentProps[attrName] = pathExprs[j].length > 1 ? pathExprs[j].join('') : pathExprs[j][0];
+					}
-			lastNode = path.nodeMarker;
+					this.applyComponentExprs(path.nodeMarker, componentProps);
+					// Set attributes on component.
+					for (let j=i; j<=lastComponentPathIndex; j++)
+						paths[j].apply(pathExprs[j]);
+				}
+			}
-			exprIndex--;
-		} // end for(path of this.paths)
+			// Else apply it normally
+			else
+				path.apply(pathExprs[i]);
-		// Check again after we iterate through all paths to apply to a component.
-		if (lastNode && lastNode !== this.rootNg.root && Object.keys(this.currentComponentProps).length) {
-			this.applyComponentExprs(lastNode, this.currentComponentProps);
-			this.currentComponentProps = {};
-		}
+		} // end for(path of this.paths)
+		// TODO: Only do this if we have ExprPaths within styles?
 		this.updateStyles();
 		// Invalidate the nodes cache because we just changed it.
@@ -2266,10 +2838,12 @@ class NodeGroup {
 		// If there's leftover expressions, there's probably an issue with the Shell that created this NodeGroup,
 		// and the number of paths not matching.
-		/*#IFDEV*/assert(exprIndex === -1);/*#ENDIF*/
+		/*#IFDEV*/
+		assert(exprIndex === -1);/*#ENDIF*/
-		/*#IFDEV*/this.verify();/*#ENDIF*/
+		/*#IFDEV*/
+		this.verify();/*#ENDIF*/
 	}
 	/**
@@ -2293,14 +2867,18 @@ class NodeGroup {
 		// Call render() with the same params that would've been passed to the constructor.
 		else if (el.render) {
-			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.
+			let oldHash = Globals$1.componentArgsHash.get(el);
+			if (oldHash !== newHash) {
+				let args = {};
+				for (let name in props || {})
+					args[Util.dashesToCamel(name)] = props[name];
+				el.render(args); // Pass new values of props to render so it can decide how it wants to respond.
+			}
 		}
-		Globals.componentHash.set(el, newHash);
+		Globals$1.componentArgsHash.set(el, newHash);
 	}
 	/**
 	 * We swap the placeholder element for the real element so we can pass its dynamic attributes
 	 * to its constructor.
@@ -2314,72 +2892,48 @@ class NodeGroup {
 	createNewComponent(el, isPreHtmlElement=undefined, props=undefined) {
 		if (isPreHtmlElement === undefined)
 			isPreHtmlElement = !el.hasAttribute('_is');
 		let tagName = (isPreHtmlElement
-			? el.tagName.endsWith('-SOLARITE-PLACEHOLDER')
-				? el.tagName.slice(0, -21)
-				: el.tagName
+			? el.tagName.slice(0, -21) // Remove -SOLARITE-PLACEHOLDER
 			: el.getAttribute('is')).toLowerCase();
-		let dynamicProps = {...(props || {})};
+		// Throw if custom element isn't defined.
+		let Constructor = customElements.get(tagName);
+		if (!Constructor)
+			throw new Error(`The custom tag name ${tagName} is not registered.`)
+		let args = {};
+		for (let name in props || {})
+			args[Util.dashesToCamel(name)] = props[name];
 		// Pass other attribs to constructor, since otherwise they're not yet set on the element,
 		// and the constructor would otherwise have no way to see them.
 		if (el.attributes.length) {
-			if (!props)
-				props = {};
-			for (let attrib of el.attributes)
-				if (!props.hasOwnProperty(attrib.name))
-					props[attrib.name] = attrib.value;
+			for (let attrib of el.attributes) {
+				let attribName = Util.dashesToCamel(attrib.name);
+				if (!args.hasOwnProperty(attribName))
+					args[attribName] = attrib.value;
+			}
 		}
-		// Create CustomElement and
-		let Constructor = customElements.get(tagName);
-		if (!Constructor)
-			throw new Error(`The custom tag name ${tagName} is not registered.`)
-		// 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.
-		// 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];
-		Globals.pendingChildren.push(ch);  // pop() is called in Solarite constructor.
-		let newEl = new Constructor(props, ch);
+		// Create the web component.
+		// Get the children that aren't Solarite's comment placeholders.
+		let ch = [...el.childNodes].filter(node => node.nodeType !== Node.COMMENT_NODE || !node.nodeValue.startsWith('ExprPath'));
+		let newEl = new Constructor(args, ch);
 		if (!isPreHtmlElement)
 			newEl.setAttribute('is', el.getAttribute('is').toLowerCase());
+		// Replace the placeholder tag with the instantiated web component.
 		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)
 			delve(this.getRootNode(), id.split(/\./g), newEl);
 		// Update paths to use replaced element.
 		for (let path of this.paths) {
 			if (path.nodeMarker === el)
@@ -2391,31 +2945,31 @@ class NodeGroup {
 			this.startNode = newEl;
 		if (this.endNode === el)
 			this.endNode = newEl;
 		// applyComponentExprs() is called because we're rendering.
 		// So we want to render the sub-component also.
 		if (newEl.renderFirstTime)
 			newEl.renderFirstTime();
 		// Copy attributes over.
 		for (let attrib of el.attributes)
 			if (attrib.name !== '_is')
 				newEl.setAttribute(attrib.name, attrib.value);
 		// Set dynamic attributes if they are primitive types.
-		for (let name in dynamicProps) {
-			let val = dynamicProps[name];
+		for (let name in props) {
+			let val = props[name];
 			if (typeof val === 'boolean') {
 				if (val !== false && val !== undefined && val !== null)
 					newEl.setAttribute(name, '');
 			}
-			// If type isn't an object or array, set the attribute.
+			// If type is a non-boolean primitive, set the attribute value.
 			else if (['number', 'bigint', 'string'].includes(typeof val))
 				newEl.setAttribute(name, val);
 		}
 		return newEl;
 	}
@@ -2459,11 +3013,21 @@ class NodeGroup {
 		return this.rootNg;
 	}
+	/**
+	 * Requires the nodeCache to be present. */
+	removeAndSaveOrphans() {
+		/*#IFDEV*/assert(this.nodesCache);/*#ENDIF*/
+		let fragment = document.createDocumentFragment();
+		for (let node of this.getNodes())
+			fragment.append(node);
+	}
 	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 pathLength = paths.length;
+		this.paths.length = pathLength;
+		for (let i=0; i<pathLength; i++) {
 			let path = paths[i].clone(fragment, offset);
 			path.parentNg = this;
 			this.paths[i] = path;
@@ -2485,23 +3049,23 @@ class NodeGroup {
 	 * An interleaved array of sets of nodes and top-level ExprPaths
 	 * @type {(Node|HTMLElement|ExprPath)[]} */
 	get nodes() { throw new Error('')};
 	get debug() {
 		return [
 			`parentNode: ${this.parentNode?.tagName?.toLowerCase()}`,
 			'nodes:',
 			...setIndent(this.getNodes().map(item => {
 				if (item instanceof Node) {
 					let tree = nodeToArrayTree(item, nextNode => {
-						let path = this.paths.find(path=>path.type === PathType.Content && path.getNodes().includes(nextNode));
+						let path = this.paths.find(path=>path.type === ExprPathType.Content && path.getNodes().includes(nextNode));
 						if (path)
 							return [`Path.nodes:`]
 						return [];
 					});
 					// TODO: How to indend nodes belonging to a path vs those that just occur after the path?
 					return flattenAndIndent(tree)
 				}
@@ -2512,10 +3076,10 @@ class NodeGroup {
 	}
 	get debugNodes() { return this.getNodes() }
 	get debugNodesHtml() { return this.getNodes().map(n => n.outerHTML || n.textContent) }
 	verify() {
 		if (!window.verify)
 			return;
@@ -2530,7 +3094,7 @@ class NodeGroup {
 		// if (this.parentPath)
 		// 	assert(this.parentPath.nodeGroups.includes(this));
 		for (let path of this.paths) {
 			assert(path.parentNg === this);
@@ -2546,61 +3110,70 @@ class NodeGroup {
 	}
 	//#ENDIF
+	findStaticComponents(root, shell, pathOffset=0) {
+		let result = [];
-	/**
-	 * @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.
+		// static components.  These are WebComponents that do not have any constructor arguments that are expressions.
+		// Those are instead created by applyExpr() which calls applyComponentExprs() which calls createNewcomponent().
+		// Maybe someday these two paths will be merged?
+		// Must happen before ids because createNewComponent will replace the element.
 		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.
+			// Recreating it is necessary so we can pass the constructor args to it.
 			if (root !== el/* && !isReplaceEl(root, el)*/) // TODO: is isReplaceEl necessary?
-				this.createNewComponent(el);
+				result.push(el);
 		}
+		return result;
+	}
+	activateStaticComponents(staticComponents) {
+		for (let el of staticComponents)
+			this.createNewComponent(el);
+	}
+	/**
+	 * @param root {HTMLElement}
+	 * @param shell {Shell}
+	 * @param pathOffset {int} */
+	activateEmbeds(root, shell, pathOffset=0) {
 		let rootEl = this.rootNg.root;
 		if (rootEl) {
+			let options = this.rootNg.options;
 			// ids
-			if (this.options?.ids !== false)
+			if (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.
-						// 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);
-					}
+					Util.bindId(rootEl, el);
+				}
 				}
 			// styles
-			if (this.options?.styles !== false) {
+			if (options?.styles !== false) {
 				if (shell.styles.length)
 					this.styles = new Map();
 				for (let path of shell.styles) {
 					if (pathOffset)
 						path = path.slice(0, -pathOffset);
+					/** @type {HTMLStyleElement} */
 					let style = resolveNodePath(root, path);
-					Util.bindStyles(style, rootEl);
-					this.styles.set(style, style.textContent);
+					if (rootEl.nodeType === 1) {
+						Util.bindStyles(style, rootEl);
+						this.styles.set(style, style.textContent);
+					}
 				}
 			}
 			// scripts
-			if (this.options?.scripts !== false) {
+			if (options?.scripts !== false) {
 				for (let path of shell.scripts) {
 					if (pathOffset)
 						path = path.slice(0, -pathOffset);
@@ -2620,6 +3193,11 @@ class RootNodeGroup extends NodeGroup {
 	 * @type {HTMLElement} */
 	root;
+	/**
+	 * When we call renerWatched() we re-render these expressions, then clear this to a new Map()
+	 * @type {Map<ExprPath, ValueOp|WholeArrayOp|ArraySpliceOp[]>} */
+	exprsToRender = new Map();
 	/**
 	 *
 	 * @param template
@@ -2634,73 +3212,102 @@ class RootNodeGroup extends NodeGroup {
 		this.rootNg = this;
 		let [fragment, shell] = this.init(template);
-		// If adding NodeGroup to an element.
-		let offset = 0;
-		let root = fragment; // TODO: Rename so it's not confused with this.root.
-		if (el) {
+		if (fragment instanceof Text) {
-			// Save slot children
-			let slotFragment;
-			if (el.childNodes.length) {
-				slotFragment = document.createDocumentFragment();
-				slotFragment.append(...el.childNodes);
+			if (el) {
+				this.startNode = el;
+				this.endNode = el;
+				if (fragment.nodeValue.length)
+					el.append(fragment);
+				this.root = el;
 			}
+			Globals$1.nodeGroups.set(this.root, this);
+		}
+		else {
-			this.root = el;
+			// If adding NodeGroup to an element.
+			let offset = 0;
+			let root = fragment; // TODO: Rename so it's not confused with this.root.
+			if (el) {
+				Globals$1.nodeGroups.set(el, this);
+				// Save slot children
+				let slotChildren;
+				if (el.childNodes.length) {
+					slotChildren = document.createDocumentFragment();
+					slotChildren.append(...el.childNodes);
+				}
-			// If el should replace the root node of the fragment.
-			if (isReplaceEl(fragment, el)) {
-				el.append(...fragment.children[0].childNodes);
+				this.root = el;
-				// Copy attributes
-				for (let attrib of fragment.children[0].attributes)
-					if (!el.hasAttribute(attrib.name))
-						el.setAttribute(attrib.name, attrib.value);
+				// If el should replace the root node of the fragment.
+				if (isReplaceEl(fragment, el)) {
+					el.append(...fragment.children[0].childNodes);
-				// Go one level deeper into all of shell's paths.
-				offset = 1;
-			}
-			else {
-				let isEmpty = fragment.childNodes.length === 1 && fragment.childNodes[0].nodeType === 3 && fragment.childNodes[0].textContent === '';
-				if (!isEmpty)
-					el.append(...fragment.childNodes);
-			}
+					// Copy attributes
+					for (let attrib of fragment.children[0].attributes)
+						if (!el.hasAttribute(attrib.name))
+							el.setAttribute(attrib.name, attrib.value);
+					// Go one level deeper into all of shell's paths.
+					offset = 1;
+				} else {
+					let isEmpty = fragment.childNodes.length === 1 && fragment.childNodes[0].nodeType === 3 && fragment.childNodes[0].textContent === '';
+					if (!isEmpty)
+						el.append(...fragment.childNodes);
+				}
-			// 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);
+				// Setup children
+				if (slotChildren) {
+					// Named slots
+					for (let slot of el.querySelectorAll('slot[name]')) {
+						let name = slot.getAttribute('name');
+						if (name) {
+							let slotChildren2 = slotChildren.querySelectorAll(`[slot='${name}']`);
+							slot.append(...slotChildren2);
+						}
 					}
+					// Unnamed slots
+					let unamedSlot = el.querySelector('slot:not([name])');
+					if (unamedSlot)
+						unamedSlot.append(slotChildren);
+					// No slots
+					else
+						el.append(slotChildren);
 				}
-				let unamedSlot = el.querySelector('slot:not([name])');
-				if (unamedSlot)
-					unamedSlot.append(slotFragment);
-				else
-					el.append(slotFragment);
-			}
-			root = el;
-			this.startNode = el;
-			this.endNode = el;
-		}
-		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;
+				root = el;
+				this.startNode = el;
+				this.endNode = el;
+			} else {
+				let singleEl = getSingleEl(fragment);
+				this.root = singleEl || fragment; // We return the whole fragment when calling r() with a collection of nodes.
+				Globals$1.nodeGroups.set(this.root, this);
+				if (singleEl) {
+					root = singleEl;
+					offset = 1;
+				}
 			}
-		}
-		this.updatePaths(root, shell.paths, offset);
+			this.updatePaths(root, shell.paths, offset);
+			// Static web components can sometimes have children created via expressions.
+			// But calling applyExprs() will mess up the shell's path to them.
+			// So we find them first, then call activateStaticComponents() after their children have been created.
+			let staticComponents = this.findStaticComponents(root, shell, offset);
-		this.activateEmbeds(root, shell, offset);
+			this.activateEmbeds(root, shell, offset);
+			// Apply exprs
+			this.applyExprs(template.exprs);
-		// Apply exprs
-		this.applyExprs(template.exprs);
+			this.activateStaticComponents(staticComponents);
+		}
 	}
 }
@@ -2722,8 +3329,8 @@ function getSingleEl(fragment) {
  * @param el {HTMLElement}
  * @returns {boolean} */
 function isReplaceEl(fragment, el) {
-	return el.tagName.includes('-')
-		&& fragment.children.length===1
+	return fragment.children.length===1
+		&& el.tagName.includes('-')
 		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
 }
@@ -2742,19 +3349,9 @@ class Template {
 	/** @type {Array} 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[]}
@@ -2805,39 +3402,54 @@ class Template {
 		if (standalone) {
 			ng = new RootNodeGroup(this, null, options);
 			el = ng.getRootNode();
-			Globals.nodeGroups.set(el, ng);
+			Globals$1.nodeGroups.set(el, ng); // Why was this commented out?
 			firstTime = true;
 		}
 		else {
-			ng = Globals.nodeGroups.get(el);
+			ng = Globals$1.nodeGroups.get(el);
 			if (!ng) {
 				ng = new RootNodeGroup(this, el, options);
-				Globals.nodeGroups.set(el, ng);
+				Globals$1.nodeGroups.set(el, ng); // Why was this commented out?
 				firstTime = true;
 			}
-		}
+			// This can happen if we try manually rendering one template to a NodeGroup that was created expecting a different template.
+			// These don't always have the same length, for example if one attribute has multiple expressions.
+			if (ng.paths.length === 0 && this.exprs.length || ng.paths.length > this.exprs.length)
+				throw new Error(`Solarite Error:  Parent HTMLElement ${ng.template.html.join('${...}')} and ${ng.paths.length} \${value} placeholders can't accomodate a Template with ${this.exprs.length} values.`);		}
 		// 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
+			else {
 				ng.applyExprs(this.exprs);
+			}
 		}
+		ng.exprsToRender = new Map();
 		return el;
 	}
 	getExactKey() {
-		if (!this.exactKey)
-			this.exactKey = getObjectHash(this); // calls this.toJSON().
+		if (!this.exactKey) {
+			if (this.exprs.length)
+				this.exactKey = getObjectHash(this);// calls this.toJSON().
+			else // Don't hash plain html.
+				this.exactKey = this.html[0];
+		}
 		return this.exactKey;
 	}
 	getCloseKey() {
-		if (!this.closeKey)
-			this.closeKey = '@'+this.toJSON()[0];
+		//console.log(this.exprs.length)
+		if (!this.closeKey) {
+			if (this.exprs.length)
+				this.closeKey = /*'@' + */this.toJSON()[0];
+			else
+				this.closeKey = this.html[0];
+		}
 		// Use the joined html when debugging?  But it breaks some tests.
 		//return '@'+this.html.join('|')
@@ -2860,8 +3472,8 @@ class Template {
 /**
  * Convert strings to HTMLNodes.
- * Using r as a tag will always create a Template.
- * Using r() as a function() will always create a DOM element.
+ * Using h`...` as a tag will always create a Template.
+ * Using h() as a function() will always create a DOM element.
  *
  * Features beyond what standard js tagged template strings do:
  * 1. r`` sub-expressions
@@ -2871,24 +3483,25 @@ class Template {
  * 5. TODO:  list more
  *
  * Currently supported:
- * 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.
+ * 1. h(el, options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
+ * 2. h(el, template, ?options)        // Render the Template created by #1 to element.
  *
- * 3. r`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
+ * 3. h`<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
+ * 4. h('Hello');                      // Create single text node.
+ * 5. h('<b>Hello</b>');               // Create single HTMLElement
+ * 6. h('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
+ * 7. h()`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({render(){...}})              // Pass an object with a render method, and optionally other props/methods.
+ * 8. h(template)                      // Render Template created by #1.
  *
+ * 9. h({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
+ * 10. h(string, object, ...)          // JSX TODO
  * @param htmlStrings {?HTMLElement|string|string[]|function():Template|{render:function()}}
  * @param exprs {*[]|string|Template|Object}
  * @return {Node|HTMLElement|Template} */
-function r(htmlStrings=undefined, ...exprs) {
+function h(htmlStrings=undefined, ...exprs) {
 	// TODO: Make this a more flat if/else and call other functions for the logic.
 	if (htmlStrings instanceof Node) {
@@ -2903,7 +3516,7 @@ function r(htmlStrings=undefined, ...exprs) {
 			// Return a tagged template function that applies the tagged themplate to parent.
 			let taggedTemplate = (htmlStrings, ...exprs) => {
-				Globals.rendered.add(parent);
+				Globals$1.rendered.add(parent);
 				let template = new Template(htmlStrings, exprs);
 				return template.render(parent, options);
 			};
@@ -2940,6 +3553,22 @@ function r(htmlStrings=undefined, ...exprs) {
 	}
 	else if (typeof htmlStrings === 'string' || htmlStrings instanceof String) {
+		// 10. JSX
+		if (typeof exprs[0] === 'object') {
+			exprs[0] || {};
+			exprs.slice(1);
+			let templateHtmlStrings = [];
+			let templateExprs = [];
+			// TODO How to know which children are static html and which are expression placeholders?
+			// Perhaps we have to treat every text child as a string?
+			assert(templateHtmlStrings.length === templateExprs.length+1);
+			return new Template(templateHtmlStrings, templateExprs);
+		}
 		// If it starts with a string, trim both ends.
 		// TODO: Also trim if it ends with whitespace?
 		if (htmlStrings.match(/^\s^</))
@@ -2963,7 +3592,7 @@ function r(htmlStrings=undefined, ...exprs) {
 	else if (htmlStrings === undefined) {
 		return (htmlStrings, ...exprs) => {
 			//Globals.rendered.add(parent)
-			let template = r(htmlStrings, ...exprs);
+			let template = h(htmlStrings, ...exprs);
 			return template.render();
 		}
 	}
@@ -2975,300 +3604,168 @@ function r(htmlStrings=undefined, ...exprs) {
 	// 9. Create dynamic element with render() function.
+	// TODO: This path doesn't handle embeds like data-id="..."
 	else if (typeof htmlStrings === 'object') {
 		let obj = htmlStrings;
+		if (obj.constructor.name !== 'Object')
+			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
 		// Special rebound render path, called by normal path.
-		if (Globals.objToEl.has(obj)) {
+		// Intercepts the main r`...` function call inside render().
+		if (Globals$1.objToEl.has(obj)) {
 			return function(...args) {
-			   let template = r(...args);
+			   let template = h(...args);
 			   let el = template.render();
-				Globals.objToEl.set(obj, el);
+				Globals$1.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);
+			Globals$1.objToEl.set(obj, null);
+			obj[renderF](); // Calls the Special rebound render path above, when the render function calls r(this)
+			let el = Globals$1.objToEl.get(obj);
+			Globals$1.objToEl.delete(obj);
 			for (let name in obj)
 				if (typeof obj[name] === 'function')
-					el[name] = obj[name].bind(el);
+					el[name] = obj[name].bind(el);  // Make the "this" of functions be el.
+					// TODO: But this doesn't work for passing an object with functions as a constructor arg via an attribute:
+					// <my-element arg=${{myFunc() { return this }}}
 				else
 					el[name] = obj[name];
+			// Bind id's
+			// This doesn't work for id's referenced by attributes.
+			// for (let idEl of el.querySelectorAll('[id],[data-id]')) {
+			// 	Util.bindId(el, idEl);
+			// 	Util.bindId(obj, idEl);
+			// }
+			// TODO: Bind styles
 			return el;
 		}
 	}
 	else
 		throw new Error('Unsupported arguments.')
-}
-//import {watchGet, watchSet} from "./watch.js";
-function defineClass(Class, tagName, extendsTag) {
-	if (!customElements.getName(Class)) { // If not previously defined.
-		tagName = tagName || camelToDashes(Class.name);
-		if (!tagName.includes('-'))
-			tagName += '-element';
-		let options = null;
-		if (extendsTag)
-			options = {extends: extendsTag};
-		customElements.define(tagName, Class, options);
-	}
 }
+// Trick to prevent minifier from renaming this function.
+let renderF = 'render';
 /**
- * Create a version of the Solarite class that extends from the given tag name.
- * Reasons to inherit from this instead of HTMLElement.  None of these are all that useful.
- * 1.  customElements.define() is called automatically when you create the first instance.
- * 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.
- *     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.
+ * 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.
+ * 3.  <body><component-name></component-name></body>               // in the Document html.
  *
- * 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.
+ * When created via #3, Solarite has no way to pass attributes as arguments to the constructor.  So to make
+ * sure we get the correct value via all three paths, we write our constructors according to the following
+ * example.  Note that constructor args are embedded in an object, and must be all lower-case because
+ * Browsers make all html attribute names lowercase.
  *
- * @param extendsTag {?string}
- * @return {Class} */
-function createSolarite(extendsTag=null) {
-	let BaseClass = HTMLElement;
-	if (extendsTag && !extendsTag.includes('-')) {
-		extendsTag = extendsTag.toLowerCase();
-		BaseClass = Globals.elementClasses[extendsTag];
-		if (!BaseClass) { // TODO: Use Cache
-			BaseClass = document.createElement(extendsTag).constructor;
-			Globals.elementClasses[extendsTag] = BaseClass;
-		}
-	}
-	/**
-	 * Intercept the construct call to auto-define the class before the constructor is called.
-	 * @type {HTMLElement} */
-	let HTMLElementAutoDefine = new Proxy(BaseClass, {
-		construct(Parent, args, Class) {
-			defineClass(Class, null, extendsTag);
-			// This is a good place to manipulate any args before they're sent to the constructor.
-			// Such as loading them from attributes, if I could find a way to do so.
-			// This line is equivalent the to super() call.
-			return Reflect.construct(Parent, args, Class);
-		}
-	});
-	return class Solarite extends HTMLElementAutoDefine {
-		/**
-		 * TODO: Make these standalone functions.
-		 * Callbacks.
-		 * Use onConnect.push(() => ...); to add new callbacks. */
-		onConnect = Util$1.callback();
+ * @example
+ * constructor({name, userid=1}={}) {
+ *     super();
+ *
+ *     // Get value from "name" attriute if persent, otherwise from name constructor arg.
+ *     this.name = getArg(this, 'name', name);
+ *
+ *     // Optionally convert the value to an integer.
+ *     this.userId = getArg(this, 'userid', userid, ArgType.Int);
+ * }
+ *
+ * @param el {HTMLElement}
+ * @param attributeName {string} Attribute name.  Not case-sensitive.
+ * @param defaultValue {*} Default value to use if attribute doesn't exist.
+ * @param type {ArgType|function|*[]}
+ *     If an array, use the value if it's in the array, otherwise return undefined.
+ *     If it's a function, pass the value to the function and return the result.
+ * @param fallback {*} If the defaultValue is undefiend and type can't be parsed as the given type, use this value.
+ *     TODO: Should this be merged with the defaultValue argument?
+ * @return {*} Undefined if attribute isn't set.  */
+function getArg(el, attributeName, defaultValue=undefined, type=ArgType.String, fallback=undefined) {
+	let val = defaultValue;
+	let attrVal = el.getAttribute(attributeName) || el.getAttribute(Util.camelToDashes(attributeName));
+	if (attrVal !== null) // If attribute doesn't exist.
+		val = attrVal;
-		onFirstConnect = Util$1.callback();
-		onDisconnect = Util$1.callback();
-		/**
-		 * @param options {RenderOptions} */
-		constructor(options={}) {
-			super();
-			// TODO: Is options.render ever used?
-			if (options.render===true)
-				this.render();
-			else if (options.render===false)
-				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 = Globals.pendingChildren.pop();
-			if (ch)
-				(this.querySelector('slot') || this).append(...ch);
-			/** @deprecated */
-			Object.defineProperty(this, 'html', {
-				set(html) {
-					Globals.rendered.add(this);
-					if (typeof html === 'string') {
-						console.warn("Assigning to this.html without the r template prefix.");
-						this.innerHTML = html;
-					}
+	if (Array.isArray(type))
+		return type.includes(val) ? val : fallback;
+	if (typeof type === 'function')
+		return type(val);
+	// If bool, it's true as long as it exists and its value isn't falsey.
+	if (type===ArgType.Bool) {
+		let lAttrVal = typeof val === 'string' ? val.toLowerCase() : val;
+		if (['false', '0', false, 0, null, undefined, NaN].includes(lAttrVal))
+			return false;
+		if (['true', true].includes(lAttrVal) || parseFloat(lAttrVal) !== 0)
+			return true;
+		return fallback;
+	}
+	// Attribute doesn't exist
+	let result;
+	switch (type) {
+		case ArgType.Int:
+			result = parseInt(val);
+			return isNaN(result) ? fallback : result;
+		case ArgType.Float:
+			result = parseFloat(val);
+			return isNaN(result) ? fallback : result;
+		case ArgType.String:
+			return [undefined, null, false].includes(val) ? '' : val+'';
+		case ArgType.Json:
+		case ArgType.Eval:
+			if (typeof val === 'string' && val.length)
+				try {
+					if (type === ArgType.Json)
+						return JSON.parse(val);
 					else
-						this.modifications = r(this, html, options);
-				}
-			});
-			/*
-			let pthis = new Proxy(this, {
-				get(obj, prop) {
-					return Reflect.get(obj, prop)
-				}
-			});
-			this.render = this.render.bind(pthis);
-			*/
-		}
-		/**
-		 * Call render() only if it hasn't already been called.	 */
-		renderFirstTime() {
-			if (!Globals.rendered.has(this) && this.render)
-				this.render();
-		}
-		/**
-		 * Called automatically by the browser. */
-		connectedCallback() {
-			this.renderFirstTime();
-			if (!Globals.connected.has(this)) {
-				Globals.connected.add(this);
-				this.onFirstConnect();
-			}
-			this.onConnect();
-		}
-		disconnectedCallback() {
-			this.onDisconnect();
-		}
-		static define(tagName=null) {
-			defineClass(this, tagName, extendsTag);
-		}
-		//#IFDEV
-		/** @deprecated */
-		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
-						}
-					}
+						return eval(`(${val})`);
+				} catch (e) {
+					return val;
 				}
-				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();
-						}
+			else return val;
-						// TODO: Update ancestor NodeGroup exactKeys
-					}
-				}
-			}
+		// type not provided
+		default:
+			return val;
+	}
+}
-			// 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.
-			}
+/**
+ * @enum */
+var ArgType = {
+	/**
+	 * false, 0, null, undefined, '0', and 'false' (case-insensitive) become false.
+	 * Anything else, including empty string becomes true.
+	 * Empty string is true because attributes with no value should be evaulated as true. */
+	Bool: 'Bool',
+	Int: 'Int',
+	Float: 'Float',
+	String: 'String',
+	/** @deprecated for Json */
+	JSON: 'Json',
-			ngm.changes = [];
+	/**
+	 * Parse the string value as JSON.
+	 * If it's not parsable, return the value as a string. */
+	Json: 'Json',
-			return []; // TODO
-		}
-		/**
-		 * @deprecated Use the getArg() function instead. */
-		getArg(name, val=null, type=ArgType.String) {
-			throw new Error('deprecated');
-		}
-		//#ENDIF
-	}
-}
+	/**
+	 * Evaluate the string as JavaScript using the eval() function.
+	 * If it can't be evaluated, return the original string. */
+	Eval: 'Eval'
+};
 /**
  * Solarite JavasCript UI library.
@@ -3287,7 +3784,7 @@ let Solarite = new Proxy(createSolarite(), {
 let getInputValue = Util.getInputValue;
 //Experimental:
-//export {forEach, watchGet, watchSet} from './watch.js' // old, unfinished
-//export {watch} from './watch2.js'; // unfinished
+//export {default as watch, renderWatched} from './watch.js'; // unfinished
-export { ArgType, Globals, Solarite, Template, delve, getArg, getInputValue, r };
+export default h;
+export { ArgType, Globals$1 as Globals, Solarite, Util as SolariteUtil, Template, delve, getArg, getInputValue, h, h as r };