solarite 0.3.2 → 0.5.0

package/src/NodeGroup.js

@@ -1,11 +1,11 @@
-import {assert} from "./assert.js";
-import ExprPath, {ExprPathType, resolveNodePath} from "./ExprPath.js";
-import {getObjectHash} from "./hash.js";
-import Shell from "./Shell.js";
+import assert from "./assert.js";
 import Util, {flattenAndIndent, nodeToArrayTree, setIndent} from "./Util.js";
-//import NodeGroupManager from "./NodeGroupManager.js";
-import delve from "./delve.js";
-import Globals from "./Globals.js";
+import Shell from "./Shell.js";
+import RootNodeGroup from './RootNodeGroup.js';
+import Path from "./Path.js";
+import Globals from './Globals.js';
+import PathToComponent from "./PathToComponent.js";
+import PathToNodes from "./PathToNodes.js";
 
 /** @typedef {boolean|string|number|function|Object|Array|Date|Node|Template} Expr */
 
@@ -14,17 +14,14 @@ import Globals from "./Globals.js";
  *
  * The range is determined by startNode and nodeMarker.
  * startNode - never null.  An empty text node is created before the first path if none exists.
- * nodeMarker - null if this Nodegroup is at the end of its parents' nodes.
- *
- *
- * */
+ * nodeMarker - null if this Nodegroup is at the end of its parents' nodes.*/
 export default class NodeGroup {
 
 	/**
 	 * @Type {RootNodeGroup} */
 	rootNg;
 
-	/** @type {ExprPath} */
+	/** @type {Path} */
 	parentPath;
 
 	/** @type {Node|HTMLElement} First node of NodeGroup. Should never be null. */
@@ -32,10 +29,10 @@ export default class NodeGroup {
 
 	/** @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.
-	 * TODO: But sometimes startNode and endNode point to the same node.  Document htis inconsistency. */
+	 * TODO: But sometimes startNode and endNode point to the same node.  Document this inconsistency. */
 	endNode;
 
-	/** @type {ExprPath[]} */
+	/** @type {Path[]} */
 	paths = [];
 
 	/** @type {string} Key that matches the template and the expressions. */
@@ -55,302 +52,220 @@ export default class NodeGroup {
 	 * @type {?Map<HTMLStyleElement, string>} */
 	styles;
 
+	/** @type {Template} */
+	template;
 
 	/**
-	 * Create an "instantiated" NodeGroup from a Template and add it to an element.
-	 * @param template {Template}  Create it from the html strings and expressions in this template.
-	 * @param parentPath {?ExprPath} */
-	constructor(template, parentPath=null) {
-		if (!(this instanceof RootNodeGroup)) {
-
-			let [fragment, shell] = this.init(template, parentPath);
-
-			if (fragment && template.exprs.length) {
-				this.updatePaths(fragment, shell.paths);
-
-				// 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);
-
-				this.activateEmbeds(fragment, shell);
+	 * Root node at the top of the hierarchy.
+	 * Should be moved to RootNodeGroup
+	 * @type {HTMLElement} */
+	root;
 
-				// Apply exprs
-				this.applyExprs(template.exprs);
-
-				this.instantiateStaticComponents(staticComponents);
-			}
-			else if (shell)
-				this.activateEmbeds(fragment, shell);
-		}
-	}
 
 	/**
-	 * Common init shared by RootNodeGroup and NodeGroup constructors.
-	 * But in a separate function because they need to do this at a different step.
+	 * Create an "instantiated" NodeGroup from a Template and add it to an element.
+	 * Don't call applyExprs() yet to apply expressions or instantiate components yet.
 	 * @param template {Template}  Create it from the html strings and expressions in this template.
-	 * @param parentPath {?ExprPath}
-	 * @param exactKey {?string} Optional, if already calculated.
-	 * @param closeKey {?string}
-	 * @returns {[DocumentFragment, Shell]} */
-	init(template, parentPath=null, exactKey=null, closeKey=null) {
-		this.exactKey = exactKey || template.getExactKey();
-		this.closeKey = closeKey || template.getCloseKey();
-
-		this.parentPath = parentPath;
+	 * @param parentPath {?Path}
+	 * @param el {?HTMLElement} Optional, pre-existing htmlElement that will be the root.
+	 * @param options {?object} Only used for RootNodeGroup */
+	constructor(template, parentPath=null, el=null, options=null) {
 		this.rootNg = parentPath?.parentNg?.rootNg || this;
+		this.parentPath = parentPath;
 
 		/*#IFDEV*/assert(this.rootNg);/*#ENDIF*/
-
-		/** @type {Template} */
 		this.template = template;
-
-		// new!  Is this needed?
-		template.nodeGroup = this;
-
-		// Get a cached version of the parsed and instantiated html, and ExprPaths.
+		this.closeKey = template.getCloseKey();
 
 		// If it's just a text node, skip a bunch of unnecessary steps.
-		if (!(this instanceof RootNodeGroup) && !template.exprs.length && !template.html[0].includes('<')) {
-			//let doc = this.rootNg.startNode?.ownerDocument || document;
-			let textNode = document.createTextNode(template.html[0]);
-
-			this.startNode = this.endNode = textNode;
-			return [];
+		if (template.isText) {
+			this.startNode = this.endNode = Globals.doc.createTextNode(template.html[0]);
 		}
-		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];
-		}
-	}
+		else {
+			// Get a cached version of the parsed and instantiated html, and Paths:
+			const shell = Shell.get(template.html);
+			const shellFragment = shell.fragment.cloneNode(true);
 
-	/**
-	 * 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.  Only used for testing.  Normally uses this.paths.  */
-	applyExprs(exprs, paths=null) {
-		paths = paths || this.paths;
+			if (shellFragment.nodeType === 11) { // DocumentFragment
+				this.startNode = shellFragment.firstChild;
+				this.endNode = shellFragment.lastChild;
+			} else
+				this.startNode = this.endNode = shellFragment;
 
-		/*#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.
+			// Special setup for RootNodeGroup
+			if (this instanceof RootNodeGroup) {
 
-		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--;
-			}
+				let startingPathDepth = 0;
+				this.options = options;
+				if (shellFragment instanceof Text) {
+					if (!el)
+						throw new Error('Cannot create a standalone text node');
 
-			// 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.
+					this.root = el;
+					if (shellFragment.nodeValue.length)
+						this.root.append(shellFragment);
+				}
 
-			// 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()) {
+				else {
+					if (el) {
+						this.root = el;
+
+						// Save slot
+						// 1. Globals.currentSlotChildren is set if this is called via PathToComponent.applyComponent() calls render()
+						// 2. el.childNodes is set if render() is called manually for the first time.
+						let slotChildren;
+						if (Globals.currentSlotChildren || el.childNodes.length) {
+							slotChildren = Globals.doc.createDocumentFragment();
+							slotChildren.append(...(Globals.currentSlotChildren || el.childNodes));
+						}
 
-				if (!nextPath || !nextPath.isComponent() || nextPath.nodeMarker !== path.nodeMarker)
-					lastComponentPathIndex = i;
-				let isFirstComponentPath = !prevPath || !prevPath.isComponent() || prevPath.nodeMarker !== path.nodeMarker;
+						// If el should replace the root node of the fragment.
+						if (isReplaceEl(shellFragment, this.root.tagName)) {
+							this.root.append(...shellFragment.children[0].childNodes);
 
-				if (isFirstComponentPath) {
+							// Copy attributes
+							for (let attrib of shellFragment.children[0].attributes)
+								if (!this.root.hasAttribute(attrib.name))
+									this.root.setAttribute(attrib.name, attrib.value);
 
-					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];
-					}
+							// Go one level deeper into all of shell's paths.
+							startingPathDepth = 1;
+						}
 
-					this.applyComponentExprs(path.nodeMarker, componentProps);
+						else {
+							let isEmpty = shellFragment.childNodes.length === 1 && shellFragment.childNodes[0].nodeType === 3 && shellFragment.childNodes[0].textContent === '';
+							if (!isEmpty)
+								this.root.append(...shellFragment.childNodes);
+						}
 
-					// Set attributes on component.
-					for (let j=i; j<=lastComponentPathIndex; j++)
-						paths[j].apply(pathExprs[j]);
-				}
-			}
 
-			// Else apply it normally
-			else
-				path.apply(pathExprs[i]);
+						// Setup slot children (deprecated)
+						if (slotChildren) {
+							// Named slots
+							for (let slot of el.querySelectorAll('slot[name]')) {
+								let name = slot.getAttribute('name')
+								if (name) {
+									let slotChildren2 = slotChildren.querySelectorAll(`[slot='${name}']`);
+									slot.append(...slotChildren2);
+								}
+							}
+							// Unnamed slots
+							let unamedSlot = el.querySelector('slot:not([name])')
+							if (unamedSlot)
+								unamedSlot.append(slotChildren);
+							// No slots
+							else
+								el.append(slotChildren);
+						}
+					}
 
+					// Instantiate as a standalone element.
+					else {
+						let onlyChild = getSingleEl(shellFragment);
+						this.root = onlyChild || shellFragment; // We return the whole fragment when calling h() with a collection of nodes.
+						if (onlyChild)
+							startingPathDepth = 1;
+					}
 
-		} // end for(path of this.paths)
+					// Exclude the path to ourself.  Otherwise we get infinite recursion.
+					// let paths = [...shell.paths];
+					// if (paths[0] instanceof PathToComponent)
+					// 	paths.shift();
 
+					this.setPathsFromFragment(this.root, shell.paths, startingPathDepth);
+					this.activateEmbeds(this.root, shell, startingPathDepth);
+				}
+				this.startNode = this.endNode = this.root;
 
-		// TODO: Only do this if we have ExprPaths within styles?
-		this.updateStyles();
+				Globals.rootNodeGroups.set(this.root, this);
+			} // end if RootNodeGroup
 
+			else if (shell) {
+				if (shell.paths.length) {
+					this.setPathsFromFragment(shellFragment, shell.paths);
+				}
 
+				this.activateEmbeds(shellFragment, shell);
+			}
+		}
 
-		// Invalidate the nodes cache because we just changed it.
-		this.nodesCache = null;
+		//#IFDEV
+		this.verify();
+		//#ENDIF
+	}
 
-		// 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*/
 
+	/**
+	 * Use the paths to insert the given expressions.
+	 * Dispatches expression handling to other functions depending on the path type.
+	 * @param exprs {(*|*[]|function|Template)[]}
+	 * @param changed {boolean} If true, the expr's have changed since the last time thsi function was called.
+	 * @param includeNonComponents {boolean}
+	 * We still need to call PathToComponent.apply() even if changed=false so the user can handle the rendering. */
+	applyExprs(exprs, changed=true, includeNonComponents=true) {
 
 		/*#IFDEV*/
-		this.verify();/*#ENDIF*/
-	}
+		this.verify();
+		/*#ENDIF*/
 
-	/**
-	 * Create a nested Component or call render with the new props.
-	 * @param el {Solarite:HTMLElement}
-	 * @param props {Object} */
-	applyComponentExprs(el, props) {
-
-		// TODO: Does a hash of this already exist somewhere?
-		// Perhaps if Components were treated as child NodeGroups, which would need to be the child of an ExprPath,
-		// then we could re-use the hash and logic from NodeManager?
-		let newHash = getObjectHash(props);
-
-		let isPreHtmlElement = el.hasAttribute('solarite-placeholder');
-		let isPreIsElement = el.hasAttribute('_is')
-
-
-		// Instantiate a placeholder.
-		if (isPreHtmlElement || isPreIsElement)
-			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.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.
-			//}
-		}
+		let paths = this.paths;
 
-		Globals.componentArgsHash.set(el, newHash);
-	}
+		// Things to consider:
+		// 1. Paths consume a varying number of expressions.
+		//    An PathToAttribs may use multipe expressions.  E.g. <div class="${1} ${2}">
+		//    While an PathToComponent uses zero.
+		// 2. An PathToComponent references other Paths that set its attribute values.
+		// 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; // Update exprs at paths.
+		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--) {
+			if (i===0 && path instanceof PathToComponent && path.nodeMarker === this.getRootNode())
+				continue;
 
-	/**
-	 * We swap the placeholder element for the real element so we can pass its dynamic attributes
-	 * to its constructor.
-	 *
-	 * The logic of this function is complex and could use cleaning up.
-	 *
-	 * @param el
-	 * @param isPreHtmlElement {?boolean} True if the element's tag name ends with -solarite-placeholder
-	 * @param props {Object} Attributes with dynamic values.
-	 * @return {HTMLElement} */
-	instantiateComponent(el, isPreHtmlElement=undefined, props=undefined) {
-		if (isPreHtmlElement === undefined)
-			isPreHtmlElement = !el.hasAttribute('_is');
-
-		let tagName = (isPreHtmlElement
-			? el.tagName.slice(0, -21) // Remove -SOLARITE-PLACEHOLDER
-			: el.getAttribute('is')).toLowerCase();
-
-
-		// 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 attribs = {};
-		for (let name in props || {})
-			attribs[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) {
-			for (let attrib of el.attributes) {
-				let attribName = Util.dashesToCamel(attrib.name);
-				if (!attribs.hasOwnProperty(attribName) && attribName !== 'solarite-placeholder')
-					attribs[attribName] = attrib.value;
+			// Get the expressions associated with this path.
+			let exprCount = path.getExpressionCount();
+			pathExprs[i] = exprs.slice(exprIndex-exprCount, exprIndex); // slice() probably doesn't allocate if the JS vm implements copy on write.
+			exprIndex -= exprCount;
+
+			// Component expressions don't have a corresponding user-provided expression.
+			// They use expressions from the paths that provide their attributes.
+			if (path instanceof PathToComponent) {
+				let attribExprs = pathExprs.slice(i+1, i+1 + path.attribPaths.length); // +1 b/c we move forward from the component path.
+				path.apply(attribExprs, true, changed);
 			}
+			else if (includeNonComponents)
+				path.apply(pathExprs[i]);
 		}
 
-		// Create the web component.
-		// Get the children that aren't Solarite's comment placeholders.
-		let children = [...el.childNodes].filter(node => node.nodeType !== Node.COMMENT_NODE || !node.nodeValue.startsWith('ExprPath'));
-		let newEl = new Constructor(attribs, children);
+		// 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 === 0);
+		/*#ENDIF*/
 
-		if (!isPreHtmlElement)
-			newEl.setAttribute('is', el.getAttribute('is').toLowerCase());
 
-		// Replace the placeholder tag with the instantiated web component.
-		el.replaceWith(newEl);
+		if (includeNonComponents) {
 
-		// 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);
+			// TODO: Only do this if we have Paths within styles?
+			this.updateStyles();
 
+			// Invalidate the nodes cache because we just changed it.
+			this.nodesCache = null;
 
-		// Update paths to use replaced element.
-		for (let path of this.paths) {
-			if (path.nodeMarker === el)
-				path.nodeMarker = newEl;
-			if (path.nodeBefore === el)
-				path.nodeBefore = newEl;
 		}
-		if (this.startNode === el)
-			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' && attrib.name !== 'solarite-placeholder')
-				newEl.setAttribute(attrib.name, attrib.value);
-
-		// Set dynamic attributes if they are primitive types.
-		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 is a non-boolean primitive, set the attribute value.
-			else if (['number', 'bigint', 'string'].includes(typeof val))
-				newEl.setAttribute(name, val);
-		}
+		/*#IFDEV*/
+		this.verify();
+		/*#ENDIF*/
+	}
+
+	// TODO: Give it a better name.
+	applyExprs2(exprs) {
 
-		return newEl;
 	}
 
 	/**
@@ -376,10 +291,6 @@ export default class NodeGroup {
 		return result;
 	}
 
-	getParentNode() {
-		return this.startNode?.parentNode
-	}
-
 	/**
 	 * Get the root element of the NodeGroup's RootNodeGroup.
 	 * @returns {HTMLElement|DocumentFragment} */
@@ -394,21 +305,15 @@ export default class NodeGroup {
 	}
 
 	/**
-	 * Requires the nodeCache to be present. */
-	removeAndSaveOrphans() {
-		/*#IFDEV*/assert(this.nodesCache);/*#ENDIF*/
-		let fragment = document.createDocumentFragment();
-		for (let node of this.getNodes())
-			fragment.append(node);
-	}
-
-
-	updatePaths(fragment, paths, offset) {
-		// Update paths to point to the fragment.
-		let pathLength = paths.length;
+	 * Copy paths in fragment to this.paths.
+	 * @param fragment {DocumentFragment|HTMLElement}
+	 * @param paths
+	 * @param startingPathDepth {int} */
+	setPathsFromFragment(fragment, paths, startingPathDepth=0) {
+		let pathLength = paths.length; // For faster iteration
 		this.paths.length = pathLength;
 		for (let i=0; i<pathLength; i++) {
-			let path = paths[i].clone(fragment, offset)
+			let path = paths[i].clone(fragment, startingPathDepth)
 			path.parentNg = this;
 			this.paths[i] = path;
 		}
@@ -423,98 +328,6 @@ export default class NodeGroup {
 			}
 	}
 
-	//#IFDEV
-	/**
-	 * @deprecated
-	 * 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 === 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)
-				}
-				else if (item instanceof ExprPath)
-					return setIndent(item.debug, 1)
-			}).flat(), 1)
-		]
-	}
-
-	get debugNodes() { return this.getNodes() }
-
-
-	get debugNodesHtml() { return this.getNodes().map(n => n.outerHTML || n.textContent) }
-
-	verify() {
-		if (!window.verify)
-			return;
-
-		assert(this.startNode)
-		assert(this.endNode)
-		//assert(this.startNode !== this.endNode) // This can be true.
-		assert(this.startNode.parentNode === this.endNode.parentNode)
-
-		// Only if connected:
-		assert(!this.startNode.parentNode || this.startNode === this.endNode || this.startNode.compareDocumentPosition(this.endNode) === Node.DOCUMENT_POSITION_FOLLOWING)
-
-		// if (this.parentPath)
-		// 	assert(this.parentPath.nodeGroups.includes(this));
-
-		for (let path of this.paths) {
-			assert(path.parentNg === this)
-
-			// Fails for detached NodeGroups.
-			// NodeGroups get detached when their nodes are removed by udomdiff()
-			let parentNode = this.getParentNode();
-			if (parentNode)
-				assert(this.getParentNode().contains(path.getParentNode()))
-			path.verify();
-			// TODO: Make sure path nodes are all within our own node range.
-		}
-		return true;
-	}
-	//#ENDIF
-
-	findStaticComponents(root, shell, pathOffset=0) {
-		let result = [];
-
-		// 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?
-				result.push(el);
-		}
-		return result;
-	}
-
-	instantiateStaticComponents(staticComponents) {
-		for (let el of staticComponents)
-			this.instantiateComponent(el)
-	}
-
 	/**
 	 * @param root {HTMLElement|DocumentFragment}
 	 * @param shell {Shell}
@@ -530,10 +343,10 @@ export default class NodeGroup {
 				for (let path of shell.ids) {
 					if (pathOffset)
 						path = path.slice(0, -pathOffset);
-					let el = resolveNodePath(root, path);
+					let el = Path.resolve(root, path);
 					Util.bindId(rootEl, el);
 				}
-				}
+			}
 
 			// styles
 			if (options?.styles !== false) {
@@ -544,7 +357,7 @@ export default class NodeGroup {
 						path = path.slice(0, -pathOffset);
 
 					/** @type {HTMLStyleElement} */
-					let style = resolveNodePath(root, path);
+					let style = Path.resolve(root, path);
 					if (rootEl.nodeType === 1) {
 						Util.bindStyles(style, rootEl);
 						this.styles.set(style, style.textContent);
@@ -557,140 +370,82 @@ export default class NodeGroup {
 				for (let path of shell.scripts) {
 					if (pathOffset)
 						path = path.slice(0, -pathOffset);
-					let script = resolveNodePath(root, path);
+					let script = Path.resolve(root, path);
 					eval(script.textContent)
 				}
 			}
 		}
 	}
-}
-
-
-export class RootNodeGroup extends NodeGroup {
-
-	/**
-	 * Root node at the top of the hierarchy.
-	 * @type {HTMLElement} */
-	root;
 
-	/**
-	 * When we call renerWatched() we re-render these expressions, then clear this to a new Map()
-	 * @type {Map<ExprPath, ValueOp|WholeArrayOp|ArraySpliceOp[]>} */
-	exprsToRender = new Map();
-
-	/**
-	 *
-	 * @param template
-	 * @param el
-	 * @param options {?object}
-	 */
-	constructor(template, el, options) {
-		super(template);
-
-		this.options = options;
-
-		this.rootNg = this;
-		let [fragment, shell] = this.init(template);
-
-		if (fragment instanceof Text) {
-
-			if (el) {
-				this.startNode = el;
-				this.endNode = el;
-				if (fragment.nodeValue.length)
-					el.append(fragment);
-				this.root = el;
-			}
-			Globals.nodeGroups.set(this.root, this);
-		}
-		else {
+	//#IFDEV
+	getParentNode() {
+		return this.startNode?.parentNode
+	}
 
-			// 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 slotChildren;
-				if (el.childNodes.length) {
-					slotChildren = document.createDocumentFragment();
-					slotChildren.append(...el.childNodes);
-				}
+	get debug() {
+		return [
+			`parentNode: ${this.parentNode?.tagName?.toLowerCase()}`,
+			'nodes:',
+			...setIndent(this.getNodes().map(item => {
+				if (item?.nodeType) {
 
-				this.root = el;
+					let tree = nodeToArrayTree(item, nextNode => {
 
-				// If el should replace the root node of the fragment.
-				if (isReplaceEl(fragment, el)) {
-					el.append(...fragment.children[0].childNodes);
+						let path = this.paths.find(path=>(path instanceof PathToNodes) && path.getNodes().includes(nextNode));
+						if (path)
+							return [`Path.nodes:`]
 
-					// 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);
+						return [];
+					})
 
-					// 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);
+					// TODO: How to indend nodes belonging to a path vs those that just occur after the path?
+					return flattenAndIndent(tree)
 				}
+				else if (item instanceof Path)
+					return setIndent(item.debug, 1)
+			}).flat(), 1)
+		]
+	}
 
-				// Setup children
-				if (slotChildren) {
-
-					// Named slots
-					for (let slot of el.querySelectorAll('slot[name]')) {
-						let name = slot.getAttribute('name')
-						if (name) {
-							let slotChildren2 = slotChildren.querySelectorAll(`[slot='${name}']`);
-							slot.append(...slotChildren2);
-						}
-					}
-
-					// Unnamed slots
-					let unamedSlot = el.querySelector('slot:not([name])')
-					if (unamedSlot)
-						unamedSlot.append(slotChildren);
-
-					// No slots
-					else
-						el.append(slotChildren);
-				}
+	get debugNodes() { return this.getNodes() }
 
-				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.
+	get debugNodesHtml() { return this.getNodes().map(n => n.outerHTML || n.textContent) }
 
-				Globals.nodeGroups.set(this.root, this);
-				if (singleEl) {
-					root = singleEl;
-					offset = 1;
-				}
-			}
+	verify() {
+		if (!window.verify)
+			return;
 
-			this.updatePaths(root, shell.paths, offset);
+		assert(this.startNode)
+		assert(this.endNode)
+		//assert(this.startNode !== this.endNode) // This can be true.
+		assert(this.startNode.parentNode === this.endNode.parentNode)
 
-			// 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);
+		// Only if connected:
+		assert(!this.startNode.parentNode || this.startNode === this.endNode || this.startNode.compareDocumentPosition(this.endNode) === Node.DOCUMENT_POSITION_FOLLOWING)
 
-			this.activateEmbeds(root, shell, offset);
+		// if (this.parentPath)
+		// 	assert(this.parentPath.nodeGroups.includes(this));
 
-			// Apply exprs
-			this.applyExprs(template.exprs);
+		for (let path of this.paths) {
+			assert(path.parentNg === this)
 
-			this.instantiateStaticComponents(staticComponents);
+			// Fails for detached NodeGroups.
+			// NodeGroups get detached when their nodes are removed by udomdiff()
+			let parentNode = this.getParentNode();
+			if (parentNode)
+				assert(this.getParentNode().contains(path.getParentNode()))
+			path.verify();
+			// TODO: Make sure path nodes are all within our own node range.
 		}
+		return true;
 	}
+	//#ENDIF
 }
 
+
+
+
 function getSingleEl(fragment) {
 	let nonempty = [];
 	for (let n of fragment.childNodes) {
@@ -706,10 +461,10 @@ function getSingleEl(fragment) {
 /**
  * Does the fragment have one child that's an element matching the tagname of el?
  * @param fragment {DocumentFragment}
- * @param el {HTMLElement}
+ * @param tagName {string}
  * @returns {boolean} */
-function isReplaceEl(fragment, el) {
+function isReplaceEl(fragment, tagName) {
 	return fragment.children.length===1
-		&& el.tagName.includes('-') // TODO: Check for solarite-placeholder attribute instead?
-		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
+		&& tagName.includes('-')
+		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === tagName;
 }