npm - solarite - Versions diffs - 0.2.4 → 0.3.1 - Mend

solarite 0.2.4 → 0.3.1

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 (38) hide show

package/dist/Solarite-debug.js +1457 -1402
package/dist/Solarite.js +1425 -1272
package/dist/Solarite.min.js +2 -2
package/package.json +5 -6
package/readme.md +2 -4
package/src/{solarite/ExprPath.js → ExprPath.js} +421 -231
package/src/Globals.js +79 -0
package/src/HtmlParser.js +91 -0
package/src/{util/MultiValueMap.js → MultiValueMap.js} +22 -26
package/src/{solarite/NodeGroup.js → NodeGroup.js} +286 -226
package/src/{solarite/Shell.js → Shell.js} +119 -92
package/src/Solarite.d.ts +62 -0
package/src/{solarite/Solarite.js → Solarite.js} +15 -13
package/src/{solarite/Template.js → Template.js} +22 -19
package/src/Util.js +330 -0
package/src/{util/Errors.js → assert.js} +1 -0
package/src/createSolarite.js +154 -0
package/src/{util/delve.js → delve.js} +5 -4
package/src/{solarite/getArg.js → getArg.js} +41 -15
package/src/{solarite/r.js → h.js} +59 -29
package/src/{solarite/hash.js → hash.js} +12 -9
package/src/unused/FastLookupArray.js +54 -0
package/src/unused/Hashes.js +339 -0
package/src/unused/InUse.test.js +92 -0
package/src/unused/InUseMap.js +98 -0
package/src/unused/LinkedList.js +117 -0
package/src/unused/LinkedList.test.js +115 -0
package/src/unused/Misc.js +13 -0
package/src/unused/Perf.js +47 -0
package/src/unused/TrackedArray.js +54 -0
package/src/watch.js +546 -0
package/src/solarite/Globals.js +0 -54
package/src/solarite/Util.js +0 -388
package/src/solarite/createSolarite.js +0 -274
package/src/solarite/watch3.js +0 -189
package/src/util/Util.js +0 -113
/package/src/{solarite/udomdiff.js → udomdiff.js} +0 -0
/package/src/{util → unused}/WeakArray.js +0 -0

package/dist/Solarite-debug.js CHANGED Viewed

@@ -1,261 +1,13 @@
-/**
- * @typedef {Array|function(...*)} Callbacks
- * @property {function(function)} push
- * @property {function()} remove
- * @property {function()} pause
- * @property {function()} resume
- * */
-/**
- * A place for functions that have no other home. */
-var Util$1 = {
-	/**
-	 * Create an array-like object that stores a group of callbacks.
-	 * Supports all array functions and properties like push() and .length.
-	 * Can be called directly.
-	 *
-	 * @param functions {function[]}
-	 * @return {Callbacks|function}
-	 *
-	 * @example
-	 * var c = Util.callback();
-	 * var f = () => console.log(3);
-	 * c.push(f);
-	 * c();
-	 * c.remove(f);
-	 * c();
-	 */
-	callback(...functions) {
-		var paused = false;
-		// Make it callable.  When we call it, call all callbacks() with the given args.
-		let result = async function(...args) {
-			let result2 = [];
-			if (!paused)
-				for (let i=0; i<result.length; i++)
-					result2.push(result[i](...args));
-			return await Promise.all(result2);
-		};
-		// Make it iterable.
-		result[Symbol.iterator] = function() {
-			let index = 0;
-			return {
-				next: () => index < result.length
-					 ? {value: result[index++], done: false}
-					 : {done: true}
-			};
-		};
-		// Use properties from Array
-		for (let prop of Object.getOwnPropertyNames(Array.prototype))
-			if (prop !== 'length' && prop !== 'constructor')
-				result[prop] = Array.prototype[prop];
-		result.l = 0; // Internal length
-		Object.defineProperty(result, 'length', {
-			get() { return result.l },
-			set(val) { result.l = val;}
-		});
-		// Add the remove() function.
-		result.remove = func => {
-			let idx = result.findIndex(item => item === func);
-			if (idx !== -1)
-				result.splice(idx, 1);
-		};
-		result.pause = () => paused = true;
-		result.resume = () => paused = false;
-		// Add initial functions
-		for (let f of functions)
-			result.push(f);
-		return result;
-	},
-	/**
-	 * @param map {Map|WeakMap|Object}
-	 * @param key
-	 * @param value */
-	mapAdd(map, key, value) {
-		let isMap = map instanceof Map || map instanceof WeakMap;
-		let result = isMap ? map.get(key) : map[key];
-		if (!result) {
-			result = [value];
-			if (isMap)
-				map.set(key, result);
-			else
-				map[key] = result;
-		}
-		else
-			result.push(value);
-	},
-	weakMemoize(obj, callback) {
-		let result = weakMemoizeInputs.get(obj);
-		if (!result) {
-			result = callback(obj);
-			weakMemoizeInputs.set(obj, result);
-		}
-		return result;
-	}
-};
-let weakMemoizeInputs = new WeakMap();
-/**
- * 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.
- * @return {*} The value, or undefined if it can't be reached. */
-function delve(obj, path, createVal = delveDontCreate) {
-	let isCreate = createVal !== delveDontCreate;
-	let len = path.length;
-	if (!obj && !isCreate && len)
-		return undefined;
-	let i = 0;
-	for (let srcProp of path) {
-		// If the path is undefined and we're not to the end yet:
-		if (obj[srcProp] === undefined) {
-			// If the next index is an integer or integer string.
-			if (isCreate) {
-				if (i < len - 1) {
-					// If next level path is a number, create as an array
-					let isArray = (path[i + 1] + '').match(/^\d+$/);
-					obj[srcProp] = isArray ? [] : {};
-				}
-			} else
-				return undefined; // can't traverse
-		}
-		// If last item in path
-		if (isCreate && i === len - 1)
-			obj[srcProp] = createVal;
-		// Traverse deeper along destination object.
-		obj = obj[srcProp];
-		i++;
-	}
-	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 RedComponent.
- * 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.
- * @param fallback {*} If the type can't be parsed as the given type, use this value.
- * @return {*} Undefined if attribute isn't set.  */
-function getArg(el, name, val=undefined, type=ArgType.String, fallback=undefined) {
-	let attrVal = el.getAttribute(name);
-	if (attrVal !== null) // If attribute doesn't exist.
-		val = attrVal;
-	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
-						return eval(`(${val})`);
-				} catch (e) {
-					return val;
-				}
-			else return fallback;
-		// type not provided
-		default:
-			return val;
+//#IFDEV
+/*@__NO_SIDE_EFFECTS__*/
+function assert(val) {
+	if (!val) {
+		debugger;
+		throw new Error('Assertion failed: ' + 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'
-};
+//#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();
@@ -269,7 +21,7 @@ function getObjectId(obj) {
 	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()
+		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;
@@ -288,14 +40,7 @@ function toJSON() {
 // Node.prototype.toJSON = toJSON;
 // Function.prototype.toJSON = toJSON;
-// Sometimes these get unassigned by Chrome and Brave 119, as well as Firefox, seemingly randomly!
-// The same tests sometimes pass, sometimes fail, even after browser and OS restarts.
-// So we check the assignments on every run of getObjectHash()
-if (Node.prototype.toJSON !== toJSON) {
-	Node.prototype.toJSON = toJSON;
-	if (Function.prototype.toJSON !== toJSON) // Will it only unmap one but not the other?
-		Function.prototype.toJSON = toJSON;
-}
 /**
  * Get a string that uniquely maps to the values of the given object.
@@ -310,6 +55,16 @@ if (Node.prototype.toJSON !== toJSON) {
  * @param obj {*}
  * @returns {string} */
 function getObjectHash(obj) {
+	// Sometimes these get unassigned by Chrome and Brave 119, as well as Firefox, seemingly randomly!
+	// The same tests sometimes pass, sometimes fail, even after browser and OS restarts.
+	// So we check the assignments on every run of getObjectHash()
+	if (Node.prototype.toJSON !== toJSON) {
+		Node.prototype.toJSON = toJSON;
+		if (Function.prototype.toJSON !== toJSON) // Will it only unmap one but not the other?
+			Function.prototype.toJSON = toJSON;
+	}
 	let result;
 	isHashing = true;
 	try {
@@ -342,71 +97,164 @@ function getObjectHashCircular(obj) {
 	});
 }
-//#IFDEV
-/*@__NO_SIDE_EFFECTS__*/
-function assert(val) {
-	if (!val) {
-		debugger;
-		throw new Error('Assertion failed: ' + val);
-	}
+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 {Record<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
+		elementClasses: {},
+		/** @type {Record<string, boolean>} Key is tag-name.propName.  Value is whether it's an attribute.*/
+		htmlProps: {},
+		/**
+		 * Used by ExprPath.applyEventAttrib()
+		 * @type {WeakMap<Node, Record<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 {Record<string, Template>} */
+		//stringTemplates: {},
+		reset,
+		count: 0
+	};
 }
-//#ENDIF
+reset();
+var Globals$1 = Globals;
-var Globals = {
+/**
+ * Follow a path into an object.
+ * @param obj {object}
+ * @param path {string[]}
+ * @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 = d) {
+	let isCreate = createVal !== d;
-	/**
-	 * Used by NodeGroup.applyComponentExprs() */
-	componentHash: new WeakMap(),
+	let len = path.length;
+	if (!obj && !isCreate && len)
+		return undefined;
-	/**
-	 * Store which instances of Solarite have already been added to the DOM.
-	 * @type {WeakSet<HTMLElement>} */
-	connected: new WeakSet(),
+	let i = 0;
+	for (let srcProp of path) {
-	/**
-	 * 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(),
+		// If the path is undefined and we're not to the end yet:
+		if (obj[srcProp] === undefined) {
-	/**
-	 * Used by watch3 to see which expressions are being accessed.
-	 * @type {[]}*/
-	currentExprPath: null,
+			// If the next index is an integer or integer string.
+			if (isCreate) {
+				if (i < len - 1) {
+					// If next level path is a number, create as an array
+					let isArray = (path[i + 1] + '').match(/^\d+$/);
+					obj[srcProp] = isArray ? [] : {};
+				}
+			} else
+				return undefined; // can't traverse
+		}
-	/**
-	 * @type {Object<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
-	elementClasses: {},
+		// If last item in path
+		if (isCreate && i === len - 1)
+			obj[srcProp] = createVal;
-	/**
-	 * Used by ExprPath.applyEventAttrib()
-	 * @type {WeakMap<Node, Object<eventName:string, [original:function, bound:function, args:*[]]>>} */
-	nodeEvents: new WeakMap(),
+		// Traverse deeper along destination object.
+		obj = obj[srcProp];
+		i++;
+	}
-	/**
-	 * Get the RootNodeGroup for an element.
-	 * @type {WeakMap<HTMLElement, RootNodeGroup>} */
-	nodeGroups: new WeakMap(),
+	return obj;
+}
+// d means "don't create"
+let d = {};
+let Util = {
 	/**
-	 * Used by r() path 9. */
-	objToEl: new WeakMap(),
+	 * Returns true if they're the same.
+	 * @param a
+	 * @param b
+	 * @returns {boolean} */
+	arraySame(a, b) {
+		let aLength = a.length;
+		if (aLength !== b.length)
+			return false;
+		for (let i=0; i<aLength; i++)
+			if (a[i] !== b[i])
+				return false;
+		return true; // the same.
+	},
-	pendingChildren: [],
+	bindId(root, el) {
+		let id = el.getAttribute('data-id') || el.getAttribute('id');
+		if (id) { // If something hasn't removed the id.
-	/**
-	 * Elements that are currently rendering via the r() function.
-	 * @type {WeakSet<HTMLElement>} */
-	rendering: new WeakSet(),
+			// 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}">`);
-	/**
-	 * Map from array of Html strings to a Shell created from them.
-	 * @type {WeakMap<string[], Shell>} */
-	shells: new WeakMap()
-};
-let Util = {
+			delve(root, id.split(/\./g), el);
+		}
+	},
+	/**
+	 * @param style {HTMLStyleElement}
+	 * @param root {HTMLElement} */
 	bindStyles(style, root) {
 		let styleId = root.getAttribute('data-style');
 		if (!styleId) {
@@ -419,17 +267,59 @@ 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.
 	 *
@@ -456,23 +346,24 @@ let Util = {
 	 * for (const item of flatten(complexArray))
 	 *     console.log(item);  // Outputs: 1, 2, 3, 4, 5, 6, { a: 'object' }, 7, 8, 9
 	 */
-	*flatten(value) {
-		if (Array.isArray(value)) {
-			for (const item of value) {
-				yield* Util.flatten(item);  // Recursively flatten arrays
-			}
-		} else if (typeof value === 'function') {
-			const result = value();
-			yield* Util.flatten(result);  // Recursively flatten the result of a function
-		} else
-			yield value;  // Yield primitive values as is
-	},
+	// *flatten(value) {
+	// 	if (Array.isArray(value)) {
+	// 		for (const item of value) {
+	// 			yield* Util.flatten(item);  // Recursively flatten arrays
+	// 		}
+	// 	} else if (typeof value === 'function') {
+	// 		const result = value();
+	// 		yield* Util.flatten(result);  // Recursively flatten the result of a function
+	// 	} else
+	// 		yield value;  // Yield primitive values as is
+	// },
 	/**
 	 * Get the value of an input as the most appropriate JavaScript type.
 	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLDivElement}
 	 * @return {string|string[]|number|[]|File[]|Date|boolean} */
 	getInputValue(node) {
+		// .type is a built-in DOM property
 		if (node.type === 'checkbox' || node.type === 'radio')
 			return node.checked; // Boolean
 		if (node.type === 'file')
@@ -487,48 +378,84 @@ let Util = {
 		return node.value; // String
 	},
+	isEvent(attrName) {
+		return attrName.startsWith('on') && attrName in Globals$1.div;
+	},
+	/**
+	 * @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'
+	},*/
+	/**
+	 * 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;
 	},
 	/**
-	 * 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);
-			}
+	 * 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);
 	},
 	/**
@@ -559,134 +486,6 @@ 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();
-}
-/**
- * Returns false if they're the same.  Or the first index where they differ.
- * @param a
- * @param b
- * @returns {boolean} */
-function arraySame(a, b) {
-	let aLength = a.length;
-	if (aLength !== b.length)
-		return false;
-	for (let i=0; i<aLength; i++)
-		if (a[i] !== b[i])
-			return false;
-	return true; // the same.
-}
-/**
- * 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
 function setIndent(items, level=1) {
@@ -751,7 +550,7 @@ function flattenAndIndent(inputArray, indent = "") {
 class MultiValueMap {
-	/** @type {Object<string, Set>} */
+	/** @type {Record<string, Set>} */
 	data = {};
 	// Set a new value for a key
@@ -785,23 +584,14 @@ class MultiValueMap {
 	 * @param val If specified, make sure we delete this specific value, if a key exists more than once.
 	 * @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);
 		}
@@ -812,7 +602,6 @@ class MultiValueMap {
 			result = val;
 		}
-		// TODO: Will this make it slower?
 		if (set.size === 0)
 			delete data[key];
@@ -820,28 +609,34 @@ class MultiValueMap {
 	}
 	/**
-	 * 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.
+	 * Remove one value from a key, and return it.
 	 * @param key {string}
-	 * @param isPreferred {function}
 	 * @returns {*|undefined} The deleted item. */
-	deletePreferred(key, isPreferred) {
+	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;
-		for (let val of set)
-			if (isPreferred(val)) {
-				set.delete(val);
-				result = val;
-				break;
-			}
-		if (!result) {
-			[result] = set;
-			set.delete(result);
-		}
+		set.delete(val);
+		result = val;
 		if (set.size === 0)
 			delete data[key];
@@ -1089,14 +884,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:
@@ -1112,8 +916,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.
@@ -1155,16 +957,23 @@ class ExprPath {
 	nodeMarkerPath;
-	/** @type {?function} */
+	/** @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;
@@ -1172,7 +981,7 @@ class ExprPath {
 		this.type = type;
 		this.attrName = attrName;
 		this.attrValue = attrValue;
-		if (type === PathType.Multiple)
+		if (type === ExprPathType.AttribMultiple)
 			this.attrNames = new Set();
 	}
@@ -1186,36 +995,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;
 	}
 	/**
@@ -1223,14 +1023,16 @@ 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().
-		path.freeNodeGroups();
+		if (freeNodeGroups)
+			path.freeNodeGroups();
 		/*#IFDEV*/path.verify();/*#ENDIF*/
@@ -1240,10 +1042,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.
@@ -1281,7 +1083,7 @@ class ExprPath {
 		// This pre-check makes it a few percent faster?
-		let same = arraySame(oldNodes, newNodes);
+		let same = Util.arraySame(oldNodes, newNodes);
 		if (!same) {
 			path.nodesCache = newNodes; // Replaces value set by path.getNodes()
@@ -1302,7 +1104,21 @@ class ExprPath {
 			for (let ng of oldNodeGroups)
 				if (!ng.startNode.parentNode)
-					ng.saveOrphans();
+					ng.removeAndSaveOrphans();
+			// Instantiate components created within ${...} expressions.
+			// Embedded style tags are handled elsewhere, but where?
+			for (let el of newNodes) {
+				if (el instanceof HTMLElement) {
+					if (el.hasAttribute('solarite-placeholder'))
+						this.parentNg.instantiateComponent(el);
+					for (let child of el.querySelectorAll('[solarite-placeholder]'))
+						this.parentNg.instantiateComponent(child);
+				}
+			}
 		}
@@ -1310,49 +1126,145 @@ class ExprPath {
 	}
 	/**
-	 * Used by watch() for replacing individual loop items. */
-	applyLoopItemUpdate(index, template) {
-		// At this point none of the nodes being used will be in nodeGroupsFree.
-		let oldNg = this.nodeGroups[index];
-		this.nodeGroupsFree.add(oldNg.exactKey, oldNg);
-		this.nodeGroupsFree.add(oldNg.closeKey, oldNg);
+	 * Used by watch() for inserting/removing/replacing individual loop items.
+	 * @param op {ArraySpliceOp} */
+	applyArrayOp(op) {
-		let ng = this.getNodeGroup(template, true);
-		if (ng) {
-			return; // It's an exactl match, so replace nothing.
-		}
+		// 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.
-		ng = this.getNodeGroup(template, false);
+				let ng = this.getNodeGroup(template, true);  // Removes from nodeGroupsAttached and adds to nodeGroupsRendered()
+				if (ng && ng === oldNg) ; else {
-		this.nodeGroups[index] = ng;
+					// 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.
-		for (let node of ng.getNodes()) {
-			oldNg.startNode.parentNode.insertBefore(node, oldNg.startNode);
+					// 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);
 		}
-		if (oldNg !== ng) {
-			for (let node of oldNg.getNodes())
-				node.remove();
-			oldNg.saveOrphans();
+		// 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) {
@@ -1370,7 +1282,7 @@ class ExprPath {
 			}
 		}
-		// Node created by an expression.
+		// Node(s) created by an expression.
 		else if (expr instanceof Node) {
 			// DocumentFragment created by an expression.
@@ -1383,53 +1295,14 @@ 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))
-			for (let subExpr of expr)
-				this.applyExact(subExpr, newNodes, secondPass);
-		else if (typeof expr === 'function') {
-			// TODO: One ExprPath can have multiple expr functions.
-			// But if using it as a watch, it should only have one at the top level.
-			// So maybe this is ok.
-			Globals.currentExprPath = [this, expr]; // Used by watch3()
-			this.watchFunction = expr; // TODO: Only do this if it's a top level function.
-			let result = expr();
-			Globals.currentExprPath = null;
-			this.applyExact(result, newNodes, secondPass);
-		}
-		// Text
-		else {
-			// Convert falsy values (but not 0) to empty string.
-			// Convert numbers to string so they compare the same.
-			let text = (expr === undefined || expr === false || expr === null) ? '' : (expr + '');
-			// Fast path for updating the text of a single text node.
-			let first = this.nodeBefore.nextSibling;
-			if (first.nodeType === 3 && first.nextSibling === this.nodeMarker && !newNodes.includes(first)) {
-				if (first.textContent !== text)
-					first.textContent = text;
-				newNodes.push(first);
-			}
-			else {
-				// TODO: Optimize this into a Set or Map or something?
-				if (!this.existingTextNodes)
-					this.existingTextNodes = this.getNodes().filter(n => n.nodeType === 3);
-				let idx = this.existingTextNodes.findIndex(n => n.textContent === text);
-				if (idx !== -1)
-					newNodes.push(...this.existingTextNodes.splice(idx, 1));
-				else
-					newNodes.push(this.nodeMarker.ownerDocument.createTextNode(text));
-			}
-		}
+		else
+			this.exprToTemplates(expr, template => {
+				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.
@@ -1438,6 +1311,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())
@@ -1468,52 +1348,57 @@ 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);
-			}
-			// oninput=${[this, 'value']}
-			else {
-				func = setValue;
-				args = [expr[0], expr.slice(1), node];
-				node.value = delve(expr[0], expr.slice(1));
-				// root.render(); // TODO: This causes infinite recursion.
-			}
+		// Convert array to function.
+		// oninput=${[this.doSomething, 'meow']}
+		if (Array.isArray(expr) && typeof expr[0] === 'function') {
+			func = expr[0];
+			args = expr.slice(1);
 		}
-		else
+		else if (typeof expr === 'function')
 			func = expr;
+		else
+			throw new Error(`Invalid event binding: <${node.tagName.toLowerCase()} ${this.attrName}=\${${JSON.stringify(expr)}}>`);
 		this.bindEvent(node, root, eventName, eventName, func, args);
 	}
+	/**
+	 * Call function when eventName is triggerd on node.
+	 * @param node {HTMLElement}
+	 * @param root {HTMLElement}
+	 * @param key {string}
+	 * @param eventName {string}
+	 * @param func {function}
+	 * @param args {array}
+	 * @param capture {boolean} */
 	bindEvent(node, root, key, eventName, func, args, capture=false) {
-		let nodeEvents = Globals.nodeEvents.get(node);
+		let nodeEvents = Globals$1.nodeEvents.get(node);
 		if (!nodeEvents) {
 			nodeEvents = {[key]: new Array(3)};
-			Globals.nodeEvents.set(node, nodeEvents);
+			Globals$1.nodeEvents.set(node, nodeEvents);
 		}
 		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, capture);
@@ -1543,68 +1428,144 @@ class ExprPath {
 		nodeEvents[key][2] = args;
 	}
-	applyValueAttrib(node, exprs, exprIndex) {
-		let expr = exprs[exprIndex];
+	/**
+	 * Handle values, including two-way binding.
+	 * @param node
+	 * @param exprs */
+	// TODO: node is always this.nodeMarker?
+	applyValueAttrib(node, exprs) {
+		let expr = exprs[0];
-		// Values to toggle an attribute
-		if (!this.attrValue && (expr === false || expr === null || expr === undefined))
-			node.removeAttribute(this.attrName);
+		// 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.instantiateComponent() for components.
+		if (Util.isPath(expr)) {
+			let [obj, path] = [expr[0], expr.slice(1)];
-		else if (!this.attrValue && expr === true)
-			node.setAttribute(this.attrName, '');
+			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;
-		// Passing a path to the value attribute.
-		// This same logic is in NodeGroup.createNewComponent() for components.
-		else if ((this.attrName === 'value' || this.attrName === 'data-value') && Util.isPath(expr)) {
-			let [obj, path] = [expr[0], expr.slice(1)];
-			node.value = delve(obj, path);
-			// TODO: We need to remove any old listeners, like in bindEventAttribute
+				// 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 = () => {
-				delve(obj, path, Util.getInputValue(node));
+				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.
-			this.bindEvent(node, path[0], 'value', 'input', func, [], true);
+			// 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;
+			}
+			if (!multiple && (expr === undefined || expr === false || expr === null)) { // Util.isFalsy() inlined.
+				if (isProp)
+					node[this.attrName] = false;
+				node.removeAttribute(this.attrName);
+			}
+			else if (!multiple && expr === true) {
+				if (isProp)
+					node[this.attrName] = true;
+				node.setAttribute(this.attrName, '');
 			}
-			else
-				value.unshift(expr);
-			let joinedValue = value.join('');
+			// A non-toggled attribute
+			else {
-			// Only update attributes if the value has changed.
-			// The .value property is special.  If it changes we don't update the attribute.
-			let oldVal = this.attrName === 'value' ? node.value : node.getAttribute(this.attrName);
-			if (oldVal !== joinedValue) {
-				node.setAttribute(this.attrName, joinedValue);
-			}
+				// If it's a series of expressions among strings, join them together.
+				let joinedValue;
+				if (multiple) {
+					let value = [];
+					for (let i = 0; i < this.attrValue.length; i++) {
+						value.push(this.attrValue[i]);
+						if (i < this.attrValue.length - 1) {
+							Globals$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('');
+				}
-			// This is needed for setting input.value, .checked, option.selected, etc.
-			// But in some cases setting the attribute is enough.  such as div.setAttribute('title') updates div.title.
-			// TODO: How to tell which is which?
-			if (this.attrName in node)
-				node[this.attrName] = joinedValue;
+				// If the attribute is one expression with no strings:
+				else
+					joinedValue = expr;
+				// Only update attributes if the value has changed.
+				// This is needed for setting input.value, .checked, option.selected, etc.
+				let oldVal = isProp
+					? node[this.attrName]
+					: node.getAttribute(this.attrName);
+				if (oldVal !== joinedValue) {
+					// <textarea value=${expr}></textarea>
+					// Without this branch we have no way to set the value of a textarea,
+					// since we also prohibit expressions that are a child of textarea.
+					if (isProp)
+						node[this.attrName] = joinedValue;
+					// TODO: Putting an 'else' here would be more performant
+					node.setAttribute(this.attrName, joinedValue);
+				}
+			}
 		}
-		return exprIndex;
 	}
@@ -1620,7 +1581,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;
@@ -1665,7 +1627,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) {
@@ -1701,6 +1663,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;
@@ -1727,7 +1693,8 @@ class ExprPath {
 		return result;
 	}
-	getParentNode() { // Same as this.parentNode
+	/** @return {HTMLElement|ParentNode} */
+	getParentNode() {
 		return this.nodeMarker.parentNode
 	}
@@ -1744,28 +1711,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 = this.nodeGroupsFree.deletePreferred(template.getExactKey(), ng=>ng.startNode.parentElement);
+			result = collection.deleteAny(template.getExactKey());
+			if (!result) { // try searching detached
+				collection = this.nodeGroupsDetachedAvailable;
+				result = collection.deleteAny(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.deletePreferred(template.getCloseKey(), ng=>ng.startNode.parentElement);
+		// 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);
@@ -1777,64 +1755,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();
-	nodeGroupsDetached = 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:
-		//this.nodeGroupsDetached = this.nodeGroupsFree;
-		//this.nodeGroupsFree = new MultiValueMap();
+		// 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);
+		}
-		let ngf = this.nodeGroupsFree;
-		for (let ng of this.nodeGroupsInUse) {
-			ngf.add(ng.exactKey, ng);
-			ngf.add(ng.closeKey, 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()}`,
@@ -1847,7 +1831,7 @@ class ExprPath {
 			}), 1).flat()
 		]
 	}
 	get debugNodes() {
 		// Clear nodesCache so that getNodes() manually gets the nodes.
 		let nc = this.nodesCache;
@@ -1856,13 +1840,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);
@@ -1871,10 +1855,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);
@@ -1887,43 +1871,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,
@@ -1949,118 +1917,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:Record<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.
@@ -2068,7 +2097,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]);
 					}
@@ -2077,16 +2107,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 = Util.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.
@@ -2111,12 +2142,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.
@@ -2127,8 +2160,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 ++;
 				}
 			}
@@ -2146,8 +2180,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*/
 					}
@@ -2159,17 +2194,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)
@@ -2177,16 +2212,64 @@ 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
+				// and give them a solarite-placeholder attribute so we can easily find them later.
+				// This way we can gather their constructor arguments and their children before we call their constructor.
+				// Later, NodeGroup.instantiateComponent() 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 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.
@@ -2198,36 +2281,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));
 		}
 	}
 	/**
@@ -2235,10 +2312,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*/
@@ -2254,7 +2331,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 */
@@ -2280,7 +2364,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[]} */
@@ -2298,11 +2383,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.
@@ -2310,14 +2395,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.instantiateStaticComponents(staticComponents);
+			}
+			else if (shell)
+				this.activateEmbeds(fragment, shell);
 		}
 	}
@@ -2345,68 +2442,119 @@ 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]);
-		return [fragment, shell];
+			this.startNode = this.endNode = textNode;
+			return [];
+		}
+		else {
+			let shell = Shell.get(template.html);
+			let fragment = shell.fragment.cloneNode(true);
+			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 expr is an attribute in 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.
 		this.nodesCache = null;
 		// 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*/
 	}
 	/**
@@ -2420,24 +2568,30 @@ class NodeGroup {
 		// then we could re-use the hash and logic from NodeManager?
 		let newHash = getObjectHash(props);
-		let isPreHtmlElement = el.tagName.endsWith('-SOLARITE-PLACEHOLDER');
+		let isPreHtmlElement = el.hasAttribute('solarite-placeholder');
 		let isPreIsElement = el.hasAttribute('_is');
 		// Instantiate a placeholder.
 		if (isPreHtmlElement || isPreIsElement)
-			el = this.createNewComponent(el, isPreHtmlElement, props);
+			el = this.instantiateComponent(el, isPreHtmlElement, props);
 		// Call render() with the same params that would've been passed to the constructor.
+		// We do this even if the arguments haven't changed, so we can let the child component
+		// compare the arguments and then decide for itself whether it wants to re-render.
 		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.componentArgsHash.get(el);
+			//if (oldHash !== newHash) { //  Only if not changed.
+				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.
@@ -2445,78 +2599,54 @@ class NodeGroup {
 	 * The logic of this function is complex and could use cleaning up.
 	 *
 	 * @param el
-	 * @param isPreHtmlElement
+	 * @param isPreHtmlElement {?boolean} True if the element's tag name ends with -solarite-placeholder
 	 * @param props {Object} Attributes with dynamic values.
 	 * @return {HTMLElement} */
-	createNewComponent(el, isPreHtmlElement=undefined, props=undefined) {
+	instantiateComponent(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) && attribName !== 'solarite-placeholder')
+					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)
@@ -2528,31 +2658,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')
+			if (attrib.name !== '_is' && attrib.name !== 'solarite-placeholder')
 				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;
 	}
@@ -2598,8 +2728,7 @@ class NodeGroup {
 	/**
 	 * Requires the nodeCache to be present. */
-	saveOrphans() {
-		/*#IFDEV*/assert(!this.startNode.parentNode);/*#ENDIF*/
+	removeAndSaveOrphans() {
 		/*#IFDEV*/assert(this.nodesCache);/*#ENDIF*/
 		let fragment = document.createDocumentFragment();
 		for (let node of this.getNodes())
@@ -2609,8 +2738,9 @@ class NodeGroup {
 	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;
@@ -2632,23 +2762,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)
 				}
@@ -2659,10 +2789,10 @@ class NodeGroup {
 	}
 	get debugNodes() { return this.getNodes() }
 	get debugNodesHtml() { return this.getNodes().map(n => n.outerHTML || n.textContent) }
 	verify() {
 		if (!window.verify)
 			return;
@@ -2677,7 +2807,7 @@ class NodeGroup {
 		// if (this.parentPath)
 		// 	assert(this.parentPath.nodeGroups.includes(this));
 		for (let path of this.paths) {
 			assert(path.parentNg === this);
@@ -2693,61 +2823,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 instantiateComponent().
+		// Maybe someday these two paths will be merged?
+		// Must happen before ids because instantiateComponent 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;
+	}
+	instantiateStaticComponents(staticComponents) {
+		for (let el of staticComponents)
+			this.instantiateComponent(el);
+	}
+	/**
+	 * @param root {HTMLElement|DocumentFragment}
+	 * @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);
@@ -2768,20 +2907,8 @@ class RootNodeGroup extends NodeGroup {
 	root;
 	/**
-	 * Store the expressions that use this watched variable,
-	 * along with the functions used to get their values.
-	 * @type {Object<field:string, Set<ExprPath>>} */
-	watchedExprPaths = {};
-	/**
-	 * Map from arrays where .map is called and their callback functions.
-	 * TODO: One array might be called with two different map functions in different places!
-	 * @type {Map<Array, function>} */
-	mapCallbacks = new Map();
-	/**
-	 *
-	 * @type {Map<ExprPath, boolean|Array>} */
+	 * 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();
 	/**
@@ -2798,82 +2925,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) {
-			Globals.nodeGroups.set(el, this);
-			// Save slot children
-			let slotFragment;
-			if (el.childNodes.length) {
-				slotFragment = document.createDocumentFragment();
-				slotFragment.append(...el.childNodes);
+		if (fragment instanceof Text) {
+			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) && attrib.name !== 'solarite-placeholder')
+							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 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);
-			// 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);
-					}
+					// No slots
+					else
+						el.append(slotChildren);
 				}
-				let unamedSlot = el.querySelector('slot:not([name])');
-				if (unamedSlot)
-					unamedSlot.append(slotFragment);
-				else
-					el.append(slotFragment);
-			}
-			root = el;
+				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.
+				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.nodeGroups.set(this.root, this);
-			if (singleEl) {
-				root = singleEl;
-				offset = 1;
+				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);
-		this.activateEmbeds(root, shell, 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);
-		// Apply exprs
-		this.applyExprs(template.exprs);
-	}
+			this.activateEmbeds(root, shell, offset);
+			// Apply exprs
+			this.applyExprs(template.exprs);
-	clearRenderWatched() {
-		this.watchedExprPaths = {};
-		this.mapCallbacks = new Map();
+			this.instantiateStaticComponents(staticComponents);
+		}
 	}
 }
@@ -2895,8 +3042,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('-') // TODO: Check for solarite-placeholder attribute instead?
 		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
 }
@@ -2915,19 +3062,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[]}
@@ -2978,17 +3115,21 @@ 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.
@@ -2996,23 +3137,32 @@ class Template {
 			if (this.html?.length === 1 && !this.html[0])
 				el.innerHTML = ''; // Fast path for empty component.
 			else {
-				ng.clearRenderWatched();
 				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('|')
@@ -3035,8 +3185,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
@@ -3046,24 +3196,27 @@ 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) {
+	if (htmlStrings === undefined && !exprs.length && arguments.length)
+		throw new Error('h() cannot be called with undefined.');
 	// TODO: Make this a more flat if/else and call other functions for the logic.
 	if (htmlStrings instanceof Node) {
@@ -3078,7 +3231,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);
 			};
@@ -3086,7 +3239,7 @@ function r(htmlStrings=undefined, ...exprs) {
 		}
 		// 2. Render template created by #4 to element.
-		else if (exprs[0] instanceof Template) {
+		else { // instanceof Template
 			let options = exprs[1];
 			template.render(parent, options);
@@ -3097,16 +3250,6 @@ function r(htmlStrings=undefined, ...exprs) {
 				parent.append(this.rootNg.getParentNode());
 			}
 		}
-		// null for expr[0], remove whole element.
-		   // This path never happens?
-		else {
-			throw new Error('unsupported');
-			//let ngm = NodeGroupManager.get(parent);
-			//ngm.render(null, exprs[1])
-		}
 	}
 	// 3. Path if used as a template tag.
@@ -3115,6 +3258,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^</))
@@ -3138,7 +3297,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();
 		}
 	}
@@ -3150,46 +3309,193 @@ 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.')
-}
+}
+// Trick to prevent minifier from renaming this function.
+let renderF = 'render';
-//import {watchGet, watchSet} from "./watch.js";
+/**
+ * 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.
+ *
+ * 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 attributeName {string} Attribute name.  Not case-sensitive.
+ * @param defaultValue {*} Default value to use if attribute doesn't exist.
+ * @param type {ArgType|function|Class|*[]}
+ *     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;
+	if (Array.isArray(type))
+		return type.includes(val) ? val : fallback;
+	if (typeof type === 'function') {
+		return type.constructor
+			? new type(val) // arg type is custom Class
+			: type(val); // arg type is custom function
+	}
+	// 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
+						return eval(`(${val})`);
+				} catch (e) {
+					return val;
+				}
+			else return val;
+		// type not provided
+		default:
+			return val;
+	}
+}
+/**
+ * Experimental.  Set multiple arguments/attributes all at once.
+ * @param el {HTMLElement}
+ * @param args {Record<string, any>}
+ * @param types {Record<string, ArgType|function|Class>}
+ *
+ * @example
+ * constructor({user, path}={}) {
+ *     setArgs(this, arguments[0], {user: User, path: ArgType.String});
+ * }
+ */
+function setArgs(el, args, types) {
+	for (let name in args)
+		this[name] = getArg(el, name, args[name], types[name] || ArgType.String);
+}
+/**
+ * @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',
+	/**
+	 * 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'
+};
 function defineClass(Class, tagName, extendsTag) {
-	if (!customElements.getName(Class)) { // If not previously defined.
-		tagName = tagName || camelToDashes(Class.name);
+	if (!customElements[getName](Class)) { // If not previously defined.
+		tagName = tagName || Util.camelToDashes(Class.name);
 		if (!tagName.includes('-'))
 			tagName += '-element';
@@ -3197,21 +3503,17 @@ function defineClass(Class, tagName, extendsTag) {
 		if (extendsTag)
 			options = {extends: extendsTag};
-		customElements.define(tagName, Class, options);
+		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.
- * 4.  We can use this.html = r`...` to set html.
+ * 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?
@@ -3230,10 +3532,10 @@ function createSolarite(extendsTag=null) {
 	if (extendsTag && !extendsTag.includes('-')) {
 		extendsTag = extendsTag.toLowerCase();
-		BaseClass = Globals.elementClasses[extendsTag];
+		BaseClass = Globals$1.elementClasses[extendsTag];
 		if (!BaseClass) { // TODO: Use Cache
 			BaseClass = document.createElement(extendsTag).constructor;
-			Globals.elementClasses[extendsTag] = BaseClass;
+			Globals$1.elementClasses[extendsTag] = BaseClass;
 		}
 	}
@@ -3259,10 +3561,10 @@ function createSolarite(extendsTag=null) {
 		 * TODO: Make these standalone functions.
 		 * Callbacks.
 		 * Use onConnect.push(() => ...); to add new callbacks. */
-		onConnect = Util$1.callback();
+		onConnect;
-		onFirstConnect = Util$1.callback();
-		onDisconnect = Util$1.callback();
+		onFirstConnect;
+		onDisconnect;
 		/**
 		 * @param options {RenderOptions} */
@@ -3274,27 +3576,28 @@ function createSolarite(extendsTag=null) {
 				this.render();
 			else if (options.render===false)
-				Globals.rendered.add(this); // Don't render on connectedCallback()
+				Globals$1.rendered.add(this); // Don't render on connectedCallback()
-			// Add children before constructor code executes.
-			// PendingChildren is setup in NodeGroup.createNewComponent()
+			// Add slot children before constructor code executes.
+			// This breaks the styleStaticNested test.
+			// PendingChildren is setup in NodeGroup.instantiateComponent()
 			// TODO: Match named slots.
-			let ch = Globals.pendingChildren.pop();
-			if (ch)
-				(this.querySelector('slot') || this).append(...ch);
+			//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 */
+			/** @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.");
+						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, {
@@ -3309,7 +3612,7 @@ function createSolarite(extendsTag=null) {
 		/**
 		 * Call render() only if it hasn't already been called.	 */
 		renderFirstTime() {
-			if (!Globals.rendered.has(this) && this.render)
+			if (!Globals$1.rendered.has(this) && this.render)
 				this.render();
 		}
@@ -3317,279 +3620,30 @@ function createSolarite(extendsTag=null) {
 		 * Called automatically by the browser. */
 		connectedCallback() {
 			this.renderFirstTime();
-			if (!Globals.connected.has(this)) {
-				Globals.connected.add(this);
-				this.onFirstConnect();
+			if (!Globals$1.connected.has(this)) {
+				Globals$1.connected.add(this);
+				if (this.onFirstConnect)
+					this.onFirstConnect();
 			}
-			this.onConnect();
+			if (this.onConnect)
+				this.onConnect();
 		}
 		disconnectedCallback() {
-			this.onDisconnect();
+			if (this.onDisconnect)
+				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
-						}
-					}
-				}
-				else if (change.action === 'insert') {
-					let beforeNg = change.beforeTemplate ? ngm.getNodeGroup(change.beforeTemplate, true) : null;
-					let arrayPath = [change.root, ...change.path];
-					// Get anchor so we can use it to get the parent
-					// TODO: Should this be watchGet(change.root) ?
-					for (let loopInfo of ngm.getLoopInfo([change.root, ...change.path.slice(0, -1)])) {
-						// Change.extra is aTemplate telling us where to insert before.
-						let beforeNode = beforeNg?.startNode || loopInfo.template.parentPath.nodeMarker;
-						// Loop over every item added to the array.
-						let i = 0; // TODO: How to get real insert index.
-						for (let obj of change.value) {
-							// Same logic as forEach() function.
-							let callback = loopInfo.itemTransformer;
-							let path = [...arrayPath.slice(0, -1), (arrayPath.at(-1) * 1 + i) + ''];
-							// Shortened logic found in watchGet(), but not any faster?
-							// the watchSet() is what makes this slower!
-							// let obj = delve(watchSet(path[0]), path.slice(1));
-							// let template = callback(obj);
-							// let serializedPath = serializePath(path);
-							// pathToTransformer.add(serializedPath, new TransformerInfo(path, callback, template)); // Uses a Set() to ensure no duplicates.
-							let template = watchGet(path, callback);
-							i++;
-							//let template = loopInfo.itemTransformer(obj); // What if it takes more than one obj argument?
-							// Create new NodeGroup
-							let ng = ngm.getNodeGroup(template, false, true);
-							ng.parentPath = beforeNg?.parentPath || loopInfo.template.parentPath;
-							for (let node of ng.getNodes())
-								beforeNode.parentNode.insertBefore(node, beforeNode);
-							if (ng.parentPath) // This check is needed for the forEachSpliceInsert test, but why?
-								ng.parentPath.clearNodesCache();
-						}
-						// TODO: Update ancestor NodeGroup exactKeys
-					}
-				}
-			}
-			// Update them all at once, that way we can reassign the same value twice.
-			for (let [ng, oldHash, newHash, exprs, ti] of nodeGroupUpdates) {
-				ng.applyExprs(exprs);
-				ngm.nodeGroupsAvailable.data[oldHash].delete(ng);
-				ng.exactKey = ti.hash = newHash;
-				ngm.nodeGroupsAvailable.add(ng.exactKey, ng); // Add back to Map with new key.
-			}
-			ngm.changes = [];
-			return []; // TODO
-		}
-		/**
-		 * @deprecated Use the getArg() function instead. */
-		getArg(name, val=null, type=ArgType.String) {
-			throw new Error('deprecated');
-		}
-		//#ENDIF
 	}
-}
-/**
- * Trying to be able to automatically watch primitive values.
- * TODO:
- * 1.  Have get() return Proxies for nested updates.
- * 2.  Override .map() for loops to capture changes.
- */
-let unusedArg = Symbol('unusedArg');
-/**
- * Custom map function triggers the get() Proxy.
- * @param array {Array}
- * @param callback {function}
- * @returns {*[]} */
-function map(array, callback) {
-	let result = [];
-	for (let i=0; i<array.length; i++)
-		result.push(callback(array[i], i, array));
-	return result;
-}
-/**
- *
- * @param root {HTMLElement}
- * @param field {string}
- * @param value {string|Symbol} */
-function watch3(root, field, value=unusedArg) {
-	// Store internal value used by get/set.
-	if (value !== unusedArg)
-		root[field] = value;
-	else
-		value = root[field];
-	// use a single object for both defineProperty and new Proxy's handler.
-	const handler = {
-		get(obj, prop, receiver) {
-			let result = (obj === receiver && field === prop)
-				? value // top-level value.
-				: Reflect.get(obj, prop, receiver); // avoid infinite recursion.
-			if (prop === 'map')
-				// Double function so the ExprPath calls it as a function,
-				// instead of it being evaluated immediately when the Templat eis created.
-				return (callback) => () => {
-					let rootNg = Globals.nodeGroups.get(root);
-					rootNg.mapCallbacks.set(obj, callback);
-					return map(new Proxy(obj, handler), callback);
-				}
-			// Track which ExprPath is using this variable.
-			if (Globals.currentExprPath) {
-				let [exprPath, exprFunction] = Globals.currentExprPath; // Set in ExprPath.applyExact()
-				let rootNg = Globals.nodeGroups.get(root);
-				// Init for field.
-				rootNg.watchedExprPaths[field] = rootNg.watchedExprPaths[field] || new Set();
-				rootNg.watchedExprPaths[field].add(exprPath);
-			}
-			if (result && typeof result === 'object')
-				return new Proxy(result, handler);
-			return result;
-		},
-		// TODO: Will fail for attribute w/ a value having multiple ExprPaths.
-		// TODO: This won't update a component's expressions.
-		set(obj, prop, val, receiver) {
-			// 1. Set the value.
-			if (obj === receiver && field === prop)
-				value = val; // top-level value.
-			else // avoid infinite recursion.
-				Reflect.set(obj, prop, val, receiver);
-			// 2. Add to the list of ExprPaths to re-render.
-			let rootNg = Globals.nodeGroups.get(root);
-			for (let exprPath of rootNg.watchedExprPaths[field]) {
-				// Update a single NodeGroup created by array.map()
-				if (Array.isArray(obj) && parseInt(prop) == prop) {
-					let exprsToRender = rootNg.exprsToRender.get(exprPath);
-					// If we're not re-rendering the whole thing.
-					if (exprsToRender !== true)
-						Util$1.mapAdd(rootNg.exprsToRender, exprPath, [obj, prop, val]);
-				}
-				// Reapply the whole expression.
-				else
-					rootNg.exprsToRender.set(exprPath, true);
-			}
-			return true;
-		}
-	};
-	Object.defineProperty(root, field, {
-		get: () => handler.get(root, field, root),
-		set: (val) => handler.set(root, field, val, root)
-	});
 }
-/**
- * TODO: Rename so we have watch.add() and watch.render() ?
- * @param root
- * @returns {*[]} */
-function renderWatched(root) {
-	let rootNg = Globals.nodeGroups.get(root);
-	let modified = [];
-	for (let [exprPath, params] of rootNg.exprsToRender) {
-		// Reapply the whole expression.
-		if (params === true) {
-			exprPath.apply(exprPath.watchFunction);
-			// TODO: freeNodeGroups() could be skipped if applyExprs() never marked them as in-use.
-			exprPath.freeNodeGroups();
-			modified.push(...exprPath.getNodes());
-		}
-		// Update a single NodeGroup created by array.map()
-		else {
-			for (let row of params) {
-				let [obj, prop, value] = row;
-				let callback = rootNg.mapCallbacks.get(obj);
-				let template = callback(value);
-				exprPath.applyLoopItemUpdate(prop, template);
-				modified.push(...exprPath.nodeGroups[prop].getNodes());
-			}
-		}
-	}
-	rootNg.exprsToRender = new Map(); // clear
-	return modified;
-}
+// Trick to prevent minifier from renaming this method.
+let define = 'define';
+let getName = 'getName';
 /**
  * Solarite JavasCript UI library.
@@ -3600,12 +3654,13 @@ function renderWatched(root) {
 /**
  * TODO: The Proxy and the multiple base classes mess up 'instanceof Solarite'
  * @type {Node|Class<HTMLElement>|function(tagName:string):Node|Class<HTMLElement>} */
-let Solarite = new Proxy(createSolarite(), {
+const Solarite = new Proxy(createSolarite(), {
 	apply(self, _, args) {
 		return createSolarite(...args)
 	}
 });
-let getInputValue = Util.getInputValue;
- // unfinished
+//export {default as watch, renderWatched} from './watch.js'; // unfinished
-export { ArgType, Globals, Solarite, Template, delve, getArg, getInputValue, r, renderWatched, watch3 as watch };
+export default h;
+export { ArgType, Globals$1 as Globals, Solarite, Util as SolariteUtil, Template, delve, getArg, h, h as r, setArgs };