solarite 0.1.0 → 0.2.0

package/src/solarite/NodeGroup.js

@@ -2,13 +2,14 @@ import {assert} from "../util/Errors.js";
 import ExprPath, {PathType, resolveNodePath} from "./ExprPath.js";
 import {getObjectHash} from "./hash.js";
 import Shell from "./Shell.js";
-import Template from "./Template.js";
 import udomdiff from "./udomdiff.js";
-import {watchFunction} from './watch2.js';
-import Util, {div, findArrayDiff, flattenAndIndent, isEvent, nodeToArrayTree, setIndent} from "./Util.js";
-import NodeGroupManager from "./NodeGroupManager.js";
+import Util, {arraySame, flattenAndIndent, isEvent, nodeToArrayTree, setIndent} from "./Util.js";
+//import NodeGroupManager from "./NodeGroupManager.js";
+import delve from "../util/delve.js";
+import Globals from "./Globals.js";
 
-/** @typedef {boolean|string|number|function|Object|Array|Date|Node} Expr */
+
+/** @typedef {boolean|string|number|function|Object|Array|Date|Node|Template} Expr */
 
 /**
  * A group of Nodes instantiated from a Shell, with Expr's filled in.
@@ -21,32 +22,29 @@ import NodeGroupManager from "./NodeGroupManager.js";
  * */
 export default class NodeGroup {
 
-	/** @Type {NodeGroupManager} */
-	manager;
+	/**
+	 * @Type {RootNodeGroup} */
+	rootNg;
 
 	/** @type {ExprPath} */
 	parentPath;
 
-	/** @type {Node} First node of NodeGroup. Should never be null. */
+	/** @type {Node|HTMLElement} First node of NodeGroup. Should never be null. */
 	startNode;
 
-	/** @type {Node} A node that never changes that this NodeGroup should always insert its nodes before.
+	/** @type {Node|HTMLElement} A node that never changes that this NodeGroup should always insert its nodes before.
 	 * An empty text node will be created to insertBefore if there's no other NodeMarker and this isn't at the last position.*/
 	endNode;
 
 	/** @type {ExprPath[]} */
 	paths = [];
 
-	/** @type {string} */
+	/** @type {string} Key that matches the template and the expressions. */
 	exactKey;
 
-	/** @type {string} */
+	/** @type {string} Key that only matches the template. */
 	closeKey;
 
-	/** @type {boolean} Used by NodeGroupManager. */
-	inUse;
-
-
 	/**
 	 * @internal
 	 * @type {Node[]} Cached result of getNodes() used only for improving performance.*/
@@ -56,206 +54,97 @@ export default class NodeGroup {
 	 * @type {?Map<HTMLStyleElement, string>} */
 	styles;
 
-	/**
-	 * If rendering a Template with replaceMode=true, pseudoRoot points to the element where the attributes are rendered.
-	 * But pseudoRoot is outside of this.getNodes().
-	 * NodeGroupManager.render() copies the attributes from pseudoRoot to the actual web component root element.
-	 * @type {?HTMLElement} */
-	pseudoRoot;
-
 	currentComponentProps = {};
 	
 
 	/**
 	 * Create an "instantiated" NodeGroup from a Template and add it to an element.
 	 * @param template {Template}  Create it from the html strings and expressions in this template.
-	 * @param manager {?NodeGroupManager}
-	 * @returns {NodeGroup} */
-	constructor(template, manager=null) {
-
-		// Used for forEach()
-		this.template = template;
-		this.manager = manager;
-		
-		// new!
-		template.nodeGroup = this;
-
-		// Get a cached version of the parsed and instantiated html, and ExprPaths.
-		let shell = Shell.get(template.html);
-
-		let fragment = shell.fragment.cloneNode(true);
+	 * @param parentPath {?ExprPath} */
+	constructor(template, parentPath=null) {
+		if (!(this instanceof RootNodeGroup)) {
+			let [fragment, shell] = this.init(template, parentPath);
 
-		// Figure out value of replaceMode option if it isn't set,
-		// Assume replaceMode if there's only one child element and its tagname matches the root el.
-		let replaceMode = typeof template.replaceMode === 'boolean'
-			? template.replaceMode
-			: fragment.children.length===1 &&
-				fragment.firstElementChild?.tagName.replace(/-REDCOMPONENT-PLACEHOLDER$/, '')
-				=== manager?.rootEl?.tagName
-		if (replaceMode) {
-			this.pseudoRoot = fragment.firstElementChild;
-			// if (!manager.rootEl)
-			// 	manager.rootEl = this.pseudoRoot;
-			/*#IFDEV*/assert(this.pseudoRoot)/*#ENDIF*/
-		}
-
-		let childNodes = replaceMode
-			? fragment.firstElementChild.childNodes
-			: fragment.childNodes;
-
-
-		this.startNode = childNodes[0]
-		this.endNode = childNodes[childNodes.length - 1]
+			this.updatePaths(fragment, shell.paths);
 
+			this.activateEmbeds(fragment, shell);
 
-		// Update paths
-		for (let oldPath of shell.paths) {
-			let path = oldPath.clone(fragment)
-			path.parentNg = this;
-			this.paths.push(path);
+			// Apply exprs
+			this.applyExprs(template.exprs);
 		}
-		
-
-		// Update web component placeholders.
-		// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
-		// Is this list needed at all?
-		//for (let component of shell.components)
-		//	this.components.push(resolveNodePath(this.startNode.parentNode, getNodePath(component)))
-
-		/*#IFDEV*/this.verify();/*#ENDIF*/
-
-		this.activateEmbeds(fragment, shell);
-		
-		/*#IFDEV*/
-		assert(this.paths.length <= template.exprs.length);
-		if (template.exprs.length)
-			assert(this.paths.length);
-		/*#ENDIF*/
-
-		// Apply exprs
-		this.applyExprs(template.exprs);
-
-		/*#IFDEV*/this.verify();/*#ENDIF*/
 	}
 
-	activateEmbeds(root, shell) {
+	/**
+	 * Common init shared by RootNodeGroup and NodeGroup constructors.
+	 * But in a separate function because they need to do this at a different step.
+	 * @param template {Template}  Create it from the html strings and expressions in this template.
+	 * @param parentPath {?ExprPath}
+	 * @param exactKey {?string} Optional, if already calculated.
+	 * @param closeKey {?string}
+	 * @returns {[DocumentFragment, Shell]} */
+	init(template, parentPath=null, exactKey=null, closeKey=null) {
+		this.exactKey = exactKey || template.getExactKey();
+		this.closeKey = closeKey || template.getCloseKey();
 
-		// static components
-		// Must happen before ids.
-		for (let path of shell.staticComponents) {
-			let el = resolveNodePath(root, path)
+		this.parentPath = parentPath;
+		this.rootNg = parentPath?.parentNg?.rootNg || this;
 
-			// Shell doesn't know if a web component is the pseudoRoot so we have to detect it here.
-			if (el.tagName !== this.pseudoRoot?.tagName)
-				this.createNewComponent(el)
-		}
+		/*#IFDEV*/assert(this.rootNg);/*#ENDIF*/
 
-		if (this.manager.rootEl) {
+		/** @type {Template} */
+		this.template = template;
 
-			// ids
-			if (this.manager.options.ids !== false)
-				for (let path of shell.ids) {
-					let el = resolveNodePath(root, path);
-					let id = el.getAttribute('data-id') || el.getAttribute('id')
-					this.manager.rootEl[id] = el;
-				}
+		// new!  Is this needed?
+		template.nodeGroup = this;
 
-			// styles
-			if (this.manager.options.styles !== false) {
-				if (shell.styles.length)
-					this.styles = new Map();
-				for (let path of shell.styles) {
-					let style = resolveNodePath(root, path);
-					Util.bindStyles(style, this.manager.rootEl);
-					this.styles.set(style, style.textContent);
-				}
+		// Get a cached version of the parsed and instantiated html, and ExprPaths.
+		let shell = Shell.get(template.html);
+		let fragment = shell.fragment.cloneNode(true);
 
-			}
-			// scripts
-			if (this.manager.options.scripts !== false) {
-				for (let path of shell.scripts) {
-					let script = resolveNodePath(root, path);
-					eval(script.textContent)
-				}
-			}
-		}
-	}
+		let childNodes = fragment.childNodes;
+		this.startNode = childNodes[0];
+		this.endNode = childNodes[childNodes.length - 1];
 
-	updateStyles() {
-		if (this.styles)
-			for (let [style, oldText] of this.styles) {
-				let newText = style.textContent;
-				if (oldText !== newText)
-					Util.bindStyles(style, this.manager.rootEl);
-			}
+		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)[]} */
-	applyExprs(exprs) {
-		
+	 * @param exprs {(*|*[]|function|Template)[]}
+	 * @param paths {?ExprPath[]} Optional.  */
+	applyExprs(exprs, paths=null) {
+		paths = paths || this.paths;
+
 		/*#IFDEV*/this.verify();/*#ENDIF*/
+
 		// Update exprs at paths.
 		let exprIndex = exprs.length-1, expr, lastNode;
 
 		// We apply them in reverse order so that a <select> box has its options created from an expression
 		// before its value attribute is set via an expression.
-		for (let path of this.paths.toReversed()) {
+		for (let path of paths.toReversed()) {
 			expr = exprs[exprIndex];
 
 			// Nodes
-			if (path.type === PathType.Content) {
-				this.applyNodeExpr(path, expr);
-				/*#IFDEV*/path.verify()/*#ENDIF*/
-			}
-
-			// Attributes
-			else {
-				let node = path.nodeMarker; // path.resolve(result);
-				let node2 = (this.manager.rootEl && node === this.pseudoRoot) ? this.manager.rootEl : node;
-				/*#IFDEV*/assert(node);/*#ENDIF*/
-
-				// This is necessary both here and below.
-				if (lastNode && lastNode !== this.pseudoRoot && lastNode !== node && Object.keys(this.currentComponentProps).length) {
-					this.applyComponentExprs(lastNode, this.currentComponentProps);
-					this.currentComponentProps = {};
-				}
-
-				if (path.type === PathType.Multiple)
-					path.applyMultipleAttribs(node2, expr)
 
-				// Capture attribute expressions to later send to the constructor of a web component.
-				// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
-				else if (path.nodeMarker !== this.pseudoRoot && path.type === PathType.Component)
-					this.currentComponentProps[path.attrName] = expr;
-				
-				else if (path.type === PathType.Comment) {
-					// Expressions inside Html comments.  Deliberately empty because we won't waste time updating them.
-				}
-				else {
+			// This is necessary both here and below.
+			if (lastNode && lastNode !== this.rootNg.root && lastNode !== path.nodeMarker && Object.keys(this.currentComponentProps).length) {
+				this.applyComponentExprs(lastNode, this.currentComponentProps);
+				this.currentComponentProps = {};
+			}
 
-					// Event attribute value
-					if (path.attrValue===null && (typeof expr === 'function' || Array.isArray(expr)) && isEvent(path.attrName)) {
-						let root = this.manager.rootEl || this.startNode.parentNode;  // latter is used when constructing a whole element.
-						path.applyEventAttrib(node2, expr, root);
-					}
+			exprIndex = path.apply(expr, exprs, exprIndex, this.currentComponentProps);
 
-					// Regular attribute value.
-					else
-						exprIndex = path.applyValueAttrib(node2, exprs, exprIndex);
-				}
+			lastNode = path.nodeMarker;
 
-				lastNode = path.nodeMarker;
-			}
 
 			exprIndex--;
 		} // end for(path of this.paths)
 
 
 		// Check again after we iterate through all paths to apply to a component.
-		if (lastNode && lastNode !== this.pseudoRoot && Object.keys(this.currentComponentProps).length) {
+		if (lastNode && lastNode !== this.rootNg.root && Object.keys(this.currentComponentProps).length) {
 			this.applyComponentExprs(lastNode, this.currentComponentProps);
 			this.currentComponentProps = {};
 		}
@@ -274,228 +163,32 @@ export default class NodeGroup {
 	}
 
 	/**
-	 * Insert/replace the nodes created by a single expression.
-	 * Called by applyExprs()
-	 * This function is recursive, as the functions it calls also call it.
-	 * TODO: Move this to ExprPath?
-	 * @param path {ExprPath}
-	 * @param expr {Expr}
-	 * @return {Node[]} New Nodes created. */
-	applyNodeExpr(path, expr) {
-		/*#IFDEV*/path.verify();/*#ENDIF*/
-
-		/** @type {(Node|NodeGroup|Expr)[]} */
-		let newNodes = [];
-		let oldNodeGroups = path.nodeGroups;
-		/*#IFDEV*/assert(!oldNodeGroups.includes(null))/*#ENDIF*/
-		let secondPass = []; // indices
-
-		// First Pass
-		//for (let ng of path.nodeGroups) // TODO: Is this necessary?
-		//	ng.parentPath = null;
-		path.nodeGroups = [];
-		this.applyOneExpr(expr, path, newNodes, secondPass);
-		this.existingTextNodes = null;
-
-		// TODO: Create an array of old vs Nodes and NodeGroups together.
-		// If they're all the same, skip the next steps.
-		// Or calculate it in the loop above as we go?  Have a path.lastNodeGroups property?
-
-		// Second pass to find close-match NodeGroups.
-		let flatten = false;
-		if (secondPass.length) {
-			for (let [nodesIndex, ngIndex] of secondPass) {
-				let ng = this.manager.getNodeGroup(newNodes[nodesIndex], false);
-				
-				ng.parentPath = path;
-				let ngNodes = ng.getNodes();
-
-				/*#IFDEV*/assert(!(newNodes[nodesIndex] instanceof NodeGroup))/*#ENDIF*/
-				
-				if (ngNodes.length === 1)
-					newNodes[nodesIndex] = ngNodes[0];
-				
-				else {
-					newNodes[nodesIndex] = ngNodes;
-					flatten = true;
-				}
-				path.nodeGroups[ngIndex] = ng;
-			}
-
-			if (flatten)
-				newNodes = newNodes.flat(); // TODO: Only if second pass happens?
-		}
-
-		/*#IFDEV*/assert(!path.nodeGroups.includes(null))/*#ENDIF*/
-
-
-	
-		let oldNodes = path.getNodes();
-		path.nodesCache = newNodes; // Replaces value set by path.getNodes()
-
-
-		// This pre-check makes it a few percent faster?
-		let diff = findArrayDiff(oldNodes, newNodes);
-		if (diff !== false) {
-
-			if (this.parentPath)
-				this.parentPath.clearNodesCache();
-
-			// Fast clear method
-			let isNowEmpty = oldNodes.length && !newNodes.length;
-			if (!isNowEmpty || !path.fastClear(oldNodes, newNodes))
-
-				// Rearrange nodes.
-				udomdiff(path.parentNode, oldNodes, newNodes, path.nodeMarker)
-
-			this.saveOrphans(oldNodeGroups, oldNodes);
-		}
-		/*#IFDEV*/path.verify();/*#ENDIF*/
-	}
-	
-	/**
-	 * Find NodeGroups that had their nodes removed and add those nodes to a Fragment so
-	 * they're not lost forever and the NodeGroup's internal structure is still consistent.
-	 * Called from NodeGroup.applyNodeExpr().
-	 * @param oldNodeGroups {NodeGroup[]}
-	 * @param oldNodes {Node[]} */
-	saveOrphans(oldNodeGroups, oldNodes) {
-		let oldNgMap = new Map();
-		for (let ng of oldNodeGroups) {
-			oldNgMap.set(ng.startNode, ng)
-			
-			// TODO: Is this necessary?
-			// if (ng.parentPath)
-			// 	ng.parentPath.clearNodesCache();
-		}
-
-		for (let i=0, node; node = oldNodes[i]; i++) {
-			let ng;
-			if (!node.parentNode && (ng = oldNgMap.get(node))) {
-				let fragment = document.createDocumentFragment();
-				let endNode = ng.endNode;
-				while (node !== endNode) {
-					fragment.append(node)
-					i++;
-					node = oldNodes[i];
-				}
-				fragment.append(endNode);
-			}
-		}
-	}
-
-	// TODO: Move to ExprPath?
-	applyOneExpr(expr, path, newNodes, secondPass) {
-		
-		if (expr instanceof Template) {
-			expr.parentPath = path;
-			expr.nodegroup = this;
-			
-			//if (window.debug && expr.exprs[0] === 'Banana' && path.nodeGroups.length === 0)
-			//if (window.debug && expr.exprs[0] === 'Banana')
-			//	debugger;
-			
-			let ng = this.manager.getNodeGroup(expr, true);
-			
-			
-			if (ng) {
-				//#IFDEV
-				// Make sure the nodeCache of the ExprPath we took it from is sitll valid.
-				if (ng.parentPath)
-					ng.parentPath.verify();
-				//#ENDIF
-				
-				
-				// TODO: Track ranges of changed nodes and only pass those to udomdiff?
-				// But will that break the swap benchmark?
-				newNodes.push(...ng.getNodes());
-				path.nodeGroups.push(ng);
-			}
-			
-			// If expression, evaluate later to find partial match.
-			else {
-				secondPass.push([newNodes.length, path.nodeGroups.length])
-				newNodes.push(expr)
-				path.nodeGroups.push(null); // placeholder
-			}
-		}
-
-		// Node created by an expression.
-		else if (expr instanceof Node) {
-
-			// DocumentFragment created by an expression.
-			if (expr instanceof DocumentFragment)
-				newNodes.push(...expr.childNodes);
-			else
-				newNodes.push(expr);
-		}
-
-		else if (Array.isArray(expr))
-			for (let subExpr of expr)
-				this.applyOneExpr(subExpr, path, newNodes, secondPass)
-
-		else if (typeof expr === 'function') {
-			expr = watchFunction(expr, this.manager)
-			
-			this.applyOneExpr(expr, path, newNodes, secondPass)
-		}
-
-		// Text
-		else {
-			// Convert falsy values (but not 0) to empty string.
-			// Convert numbers to string so they compare the same.
-			let text = (expr === undefined || expr === false || expr === null) ? '' : expr + '';
-
-			// Fast path for updating the text of a single text node.
-			let first = path.nodeBefore.nextSibling;
-			if (first.nodeType === 3 && first.nextSibling === path.nodeMarker && !newNodes.includes(first)) {
-				if (first.textContent !== text)
-					first.textContent = text;
-				
-				newNodes.push(first);
-			}
-
-			else {
-				// TODO: Optimize this into a Set or Map or something?
-				if (!this.existingTextNodes)
-					this.existingTextNodes = path.getNodes().filter(n => n.nodeType === 3);
-				
-				let idx = this.existingTextNodes.findIndex(n => n.textContent === text);
-				if (idx !== -1)
-					newNodes.push(...this.existingTextNodes.splice(idx, 1))
-				else
-					newNodes.push(path.parentNode.ownerDocument.createTextNode(text));
-			}
-		}
-	}
-
-	/**
-	 * Create a nested RedComponent or call render with the new props.
+	 * 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.tagName.endsWith('-REDCOMPONENT-PLACEHOLDER');
+
+		let isPreHtmlElement = el.tagName.endsWith('-SOLARITE-PLACEHOLDER');
 		let isPreIsElement = el.hasAttribute('_is')
-		
-		
+
+
 		// Instantiate a placeholder.
 		if (isPreHtmlElement || isPreIsElement)
 			el = this.createNewComponent(el, isPreHtmlElement, props);
-		
-		// Update params of placeholder.
+
+		// Call render() with the same params that would've been passed to the constructor.
 		else if (el.render) {
-			let oldHash = componentHash.get(el);
+			let oldHash = Globals.componentHash.get(el);
 			if (oldHash !== newHash)
 				el.render(props); // Pass new values of props to render so it can decide how it wants to respond.
 		}
-		
-		componentHash.set(el, newHash);
+
+		Globals.componentHash.set(el, newHash);
 	}
 	
 	/**
@@ -513,8 +206,8 @@ export default class NodeGroup {
 			isPreHtmlElement = !el.hasAttribute('_is');
 		
 		let tagName = (isPreHtmlElement
-			? el.tagName.endsWith('-REDCOMPONENT-PLACEHOLDER')
-				? el.tagName.slice(0, -25)
+			? el.tagName.endsWith('-SOLARITE-PLACEHOLDER')
+				? el.tagName.slice(0, -21)
 				: el.tagName
 			: el.getAttribute('is')).toLowerCase();
 
@@ -538,33 +231,43 @@ export default class NodeGroup {
 		// We pass the childNodes to the constructor so it can know about them,
 		// instead of only afterward when they're appended to the slot below.
 		// This is useful for a custom selectbox, for example.
-		// NodeGroupManager.pendingChildren stores the childen so the super construtor call to Solarite's constructor
+		// Globals.pendingChildren stores the childen so the super construtor call to Solarite's constructor
 		// can add them as children before the rest of the constructor code executes.
 		let ch = [... el.childNodes];
-		NodeGroupManager.pendingChildren.push(ch);  // pop() is called in Solarite constructor.
+		Globals.pendingChildren.push(ch);  // pop() is called in Solarite constructor.
 		let newEl = new Constructor(props, ch);
 
 		if (!isPreHtmlElement)
 			newEl.setAttribute('is', el.getAttribute('is').toLowerCase())
 		el.replaceWith(newEl);
-		
+
 		// Set children / slot children
 		// TODO: Match named slots.
 		// TODO: This only appends to slot if render() is called in the constructor.
 		//let slot = newEl.querySelector('slot') || newEl;
 		//slot.append(...el.childNodes);
-		
+
 		// Copy over event attributes.
 		for (let propName in props) {
 			let val = props[propName];
 			if (propName.startsWith('on') && typeof val === 'function')
 				newEl.addEventListener(propName.slice(2), e => val(e, newEl));
+
+			// Bind array based event attributes on value.
+			// This same logic is in ExprPath.applyValueAttrib() for non-components.
+			if ((propName === 'value' || propName === 'data-value') && Util.isPath(val)) {
+				let [obj, path] = [val[0], val.slice(1)];
+				newEl.value = delve(obj, path);
+				newEl.addEventListener('input', e => {
+					delve(obj, path, Util.getInputValue(newEl));
+				}, true); // We use capture so we update the values before other events added by the user.
+			}
 		}
 		
 		// If an id pointed at the placeholder, update it to point to the new element.
 		let id = el.getAttribute('data-id') || el.getAttribute('id');
 		if (id)
-			this.manager.rootEl[id] = newEl;
+			delve(this.getRootNode(), id.split(/\./g), newEl);
 		
 		
 		// Update paths to use replaced element.
@@ -633,6 +336,38 @@ export default class NodeGroup {
 		return this.startNode?.parentNode
 	}
 
+	/**
+	 * Get the root element of the NodeGroup's RootNodeGroup.
+	 * @returns {HTMLElement|DocumentFragment} */
+	getRootNode() {
+		return this.rootNg.root;
+	}
+
+	/**
+	 * @returns {RootNodeGroup} */
+	getRootNodeGroup() {
+		return this.rootNg;
+	}
+
+
+	updatePaths(fragment, paths, offset) {
+		// Update paths to point to the fragment.
+		this.paths.length = paths.length;
+		for (let i=0; i<paths.length; i++) {
+			let path = paths[i].clone(fragment, offset)
+			path.parentNg = this;
+			this.paths[i] = path;
+		}
+	}
+
+	updateStyles() {
+		if (this.styles)
+			for (let [style, oldText] of this.styles) {
+				let newText = style.textContent;
+				if (oldText !== newText)
+					Util.bindStyles(style, this.getRootNodeGroup().root);
+			}
+	}
 
 	//#IFDEV
 	/**
@@ -652,7 +387,7 @@ export default class NodeGroup {
 						
 						let path = this.paths.find(path=>path.type === PathType.Content && path.getNodes().includes(nextNode));
 						if (path)
-							return [`Path[${path.parentIndex}].nodes:`]
+							return [`Path.nodes:`]
 						
 						return [];
 					})
@@ -700,7 +435,184 @@ export default class NodeGroup {
 		return true;
 	}
 	//#ENDIF
+
+
+	/**
+	 * @param root {HTMLElement}
+	 * @param shell {Shell}
+	 * @param pathOffset {int} */
+	activateEmbeds(root, shell, pathOffset=0) {
+
+		// static components.  These are WebComponents not created by an expression.
+		// Must happen before ids.
+		for (let path of shell.staticComponents) {
+			if (pathOffset)
+				path = path.slice(0, -pathOffset);
+			let el = resolveNodePath(root, path);
+
+			// Shell doesn't know if a web component is the pseudoRoot so we have to detect it here.
+			if (root !== el/* && !isReplaceEl(root, el)*/) // TODO: is isReplaceEl necessary?
+				this.createNewComponent(el)
+		}
+
+		let rootEl = this.rootNg.root;
+		if (rootEl) {
+
+			// ids
+			if (this.options?.ids !== false)
+				for (let path of shell.ids) {
+					if (pathOffset)
+						path = path.slice(0, -pathOffset);
+					let el = resolveNodePath(root, path);
+					let id = el.getAttribute('data-id') || el.getAttribute('id');
+					if (id) { // If something hasn't removed the id.
+
+						// 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);
+					}
+				}
+
+			// styles
+			if (this.options?.styles !== false) {
+				if (shell.styles.length)
+					this.styles = new Map();
+				for (let path of shell.styles) {
+					if (pathOffset)
+						path = path.slice(0, -pathOffset);
+					let style = resolveNodePath(root, path);
+					Util.bindStyles(style, rootEl);
+					this.styles.set(style, style.textContent);
+				}
+
+			}
+			// scripts
+			if (this.options?.scripts !== false) {
+				for (let path of shell.scripts) {
+					if (pathOffset)
+						path = path.slice(0, -pathOffset);
+					let script = resolveNodePath(root, path);
+					eval(script.textContent)
+				}
+			}
+		}
+	}
 }
 
 
-let componentHash = new WeakMap()
+export class RootNodeGroup extends NodeGroup {
+
+	/**
+	 * Root node at the top of the hierarchy.
+	 * @type {HTMLElement} */
+	root;
+
+	/**
+	 *
+	 * @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 adding NodeGroup to an element.
+		let offset = 0;
+		let root = fragment; // TODO: Rename so it's not confused with this.root.
+		if (el) {
+
+			// Save slot children
+			let slotFragment;
+			if (el.childNodes.length) {
+				slotFragment = document.createDocumentFragment();
+				slotFragment.append(...el.childNodes);
+			}
+
+			this.root = el;
+
+			// If el should replace the root node of the fragment.
+			if (isReplaceEl(fragment, el)) {
+				el.append(...fragment.children[0].childNodes);
+
+				// Copy attributes
+				for (let attrib of fragment.children[0].attributes)
+					if (!el.hasAttribute(attrib.name))
+						el.setAttribute(attrib.name, attrib.value);
+
+				// Go one level deeper into all of shell's paths.
+				offset = 1;
+			}
+			else {
+				let isEmpty = fragment.childNodes.length === 1 && fragment.childNodes[0].nodeType === 3 && fragment.childNodes[0].textContent === '';
+				if (!isEmpty)
+					el.append(...fragment.childNodes);
+			}
+
+			// Setup slots
+			if (slotFragment) {
+				for (let slot of el.querySelectorAll('slot[name]')) {
+					let name = slot.getAttribute('name')
+					if (name) {
+						let slotChildren = slotFragment.querySelectorAll(`[slot='${name}']`);
+						slot.append(...slotChildren);
+					}
+				}
+				let unamedSlot = el.querySelector('slot:not([name])')
+				if (unamedSlot)
+					unamedSlot.append(slotFragment);
+				else
+					el.append(slotFragment);
+			}
+
+			root = el;
+			this.startNode = el;
+			this.endNode = el;
+		}
+		else {
+			let singleEl = getSingleEl(fragment);
+			this.root = singleEl || fragment; // We return the whole fragment when calling r() with a collection of nodes.
+			if (singleEl) {
+				root = singleEl;
+				offset = 1;
+			}
+		}
+
+		this.updatePaths(root, shell.paths, offset);
+
+		this.activateEmbeds(root, shell, offset);
+
+		// Apply exprs
+		this.applyExprs(template.exprs);
+	}
+}
+
+function getSingleEl(fragment) {
+	let nonempty = [];
+	for (let n of fragment.childNodes) {
+		if (n.nodeType === 1 || n.nodeType === 3 && n.textContent.trim().length) {
+			if (nonempty.length)
+				return null;
+			nonempty.push(n);
+		}
+	}
+	return nonempty[0];
+}
+
+/**
+ * Does the fragment have one child that's an element matching the tagname of el?
+ * @param fragment {DocumentFragment}
+ * @param el {HTMLElement}
+ * @returns {boolean} */
+function isReplaceEl(fragment, el) {
+	return el.tagName.includes('-')
+		&& fragment.children.length===1
+		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
+}