solarite 0.4.0 → 0.5.0

package/src/NodeGroup.js

@@ -1,10 +1,11 @@
-import {assert} from "./assert.js";
+import assert from "./assert.js";
 import Util, {flattenAndIndent, nodeToArrayTree, setIndent} from "./Util.js";
-import delve from "./delve.js";
 import Shell from "./Shell.js";
 import RootNodeGroup from './RootNodeGroup.js';
-import ExprPath, {ExprPathType, resolveNodePath} from "./ExprPath.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 */
 
@@ -13,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. */
@@ -31,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. */
@@ -54,283 +52,220 @@ export default class NodeGroup {
 	 * @type {?Map<HTMLStyleElement, string>} */
 	styles;
 
-	dynamicComponents = new Set();
-	staticComponents = [];
-
 	/** @type {Template} */
 	template;
 
+	/**
+	 * Root node at the top of the hierarchy.
+	 * Should be moved to RootNodeGroup
+	 * @type {HTMLElement} */
+	root;
+
 
 	/**
 	 * 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} */
-	constructor(template, parentPath=null) {
+	 * @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;
 
-		if (!(this instanceof RootNodeGroup)) {
-
-			let [fragment, shell] = this.populateFromTemplate(template);
-
-			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 instantiateStaticComponents() after their children have been created.
-				this.staticComponents = this.findStaticComponents(fragment, shell);
-
-				this.activateEmbeds(fragment, shell);
-
-				// Apply exprs
-				this.applyExprs(template.exprs);
-
-				this.instantiateStaticComponents(this.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.
-	 * @param template {Template}  Create it from the html strings and expressions in this template.
-	 * @returns {[DocumentFragment, Shell]} The Shell created from the template,a nd the fragment cloned from the Shell.*/
-	populateFromTemplate(template) {
 		/*#IFDEV*/assert(this.rootNg);/*#ENDIF*/
 		this.template = template;
-		this.exactKey = template.getExactKey();
 		this.closeKey = template.getCloseKey();
 
 		// If it's just a text node, skip a bunch of unnecessary steps.
 		if (template.isText) {
-			let textNode = Globals.doc.createTextNode(template.html[0]);
-			this.startNode = this.endNode = textNode;
-			return [];
+			this.startNode = this.endNode = Globals.doc.createTextNode(template.html[0]);
 		}
 
-		// Get a cached version of the parsed and instantiated html, and ExprPaths:
 		else {
-			let shell = Shell.get(template.html);
-			let fragment = shell.fragment.cloneNode(true);
+			// Get a cached version of the parsed and instantiated html, and Paths:
+			const shell = Shell.get(template.html);
+			const shellFragment = shell.fragment.cloneNode(true);
 
-			if (fragment?.nodeType === 11) { // DocumentFragment
-				let childNodes = fragment.childNodes;
-				this.startNode = childNodes[0];
-				this.endNode = childNodes[childNodes.length - 1];
-			}
-			else
-				this.startNode = this.endNode = fragment;
+			if (shellFragment.nodeType === 11) { // DocumentFragment
+				this.startNode = shellFragment.firstChild;
+				this.endNode = shellFragment.lastChild;
+			} else
+				this.startNode = this.endNode = shellFragment;
 
-			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.  Only used for testing.  Normally uses this.paths.  */
-	applyExprs(exprs, paths=null) {
-		paths = paths || this.paths;
-
-		/*#IFDEV*/
-		this.verify();/*#ENDIF*/
+			// Special setup for RootNodeGroup
+			if (this instanceof RootNodeGroup) {
 
-		// 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--;
-			}
 
+				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 el should replace the root node of the fragment.
+						if (isReplaceEl(shellFragment, this.root.tagName)) {
+							this.root.append(...shellFragment.children[0].childNodes);
+
+							// Copy attributes
+							for (let attrib of shellFragment.children[0].attributes)
+								if (!this.root.hasAttribute(attrib.name))
+									this.root.setAttribute(attrib.name, attrib.value);
+
+							// Go one level deeper into all of shell's paths.
+							startingPathDepth = 1;
+						}
+
+						else {
+							let isEmpty = shellFragment.childNodes.length === 1 && shellFragment.childNodes[0].nodeType === 3 && shellFragment.childNodes[0].textContent === '';
+							if (!isEmpty)
+								this.root.append(...shellFragment.childNodes);
+						}
+
+
+						// 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);
+						}
+					}
 
-				if (!nextPath || !nextPath.isComponent || nextPath.nodeMarker !== path.nodeMarker)
-					lastComponentPathIndex = i;
-				let isFirstComponentPath = !prevPath || !prevPath.isComponent || prevPath.nodeMarker !== path.nodeMarker;
+					// 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;
+					}
 
-				if (isFirstComponentPath) {
+					// Exclude the path to ourself.  Otherwise we get infinite recursion.
+					// let paths = [...shell.paths];
+					// if (paths[0] instanceof PathToComponent)
+					// 	paths.shift();
 
-					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];
-					}
+					this.setPathsFromFragment(this.root, shell.paths, startingPathDepth);
+					this.activateEmbeds(this.root, shell, startingPathDepth);
+				}
+				this.startNode = this.endNode = this.root;
 
-					this.handleComponent(path.nodeMarker, componentProps, true);
+				Globals.rootNodeGroups.set(this.root, this);
+			} // end if RootNodeGroup
 
-					// Set attributes on component.
-					for (let j=i; j<=lastComponentPathIndex; j++)
-						paths[j].apply(pathExprs[j]);
+			else if (shell) {
+				if (shell.paths.length) {
+					this.setPathsFromFragment(shellFragment, shell.paths);
 				}
+
+				this.activateEmbeds(shellFragment, shell);
 			}
+		}
 
-			// Else apply it normally
-			else
-				path.apply(pathExprs[i]);
+		//#IFDEV
+		this.verify();
+		//#ENDIF
+	}
 
 
-		} // end for(path of this.paths)
+	/**
+	 * 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*/
 
-		// TODO: Only do this if we have ExprPaths within styles?
-		this.updateStyles();
+		let paths = this.paths;
 
-		// Call render() on static web components. This makes the component.staticAttribs() test work.
-		for (let el of this.staticComponents)
-			if (el.render)
-				el.render(Util.attribsToObject(el)); // It has no expressions.
+		// 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;
 
-		// Invalidate the nodes cache because we just changed it.
-		this.nodesCache = null;
+			// 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]);
+		}
 
 		// 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*/
+		assert(exprIndex === 0);
+		/*#ENDIF*/
 
 
-		/*#IFDEV*/
-		this.verify();/*#ENDIF*/
-	}
+		if (includeNonComponents) {
+
+			// TODO: Only do this if we have Paths within styles?
+			this.updateStyles();
+
+			// Invalidate the nodes cache because we just changed it.
+			this.nodesCache = null;
 
-	/**
-	 * Unified path to ensure a child component is instantiated (if placeholder) and optionally rendered.
-	 * @param el {HTMLElement}
-	 * @param props {?Object}
-	 * @param doRender {boolean}
-	 * @return {HTMLElement} The (possibly replaced) element. */
-	handleComponent(el, props=null, doRender=true) {
-		let isPreHtmlElement = el.hasAttribute('solarite-placeholder');
-		let isPreIsElement = el.hasAttribute('_is');
-		let attribs, children;
-		if (isPreHtmlElement || isPreIsElement)
-			[el, attribs, children] = this.instantiateComponent(el, isPreHtmlElement, props);
-		if (doRender && el.render) {
-			if (!attribs) {
-				attribs = Util.attribsToObject(el);
-				for (let name in props || {})
-					attribs[Util.dashesToCamel(name)] = props[name];
-				children = el.childNodes;
-			}
-			el.render(attribs, children);
 		}
-		return el;
+
+		/*#IFDEV*/
+		this.verify();
+		/*#ENDIF*/
 	}
-	
-	/**
-	 * We swap the placeholder element for the real element so we can pass its dynamic attributes
-	 * to its constructor.
-	 * This is only called by handleComponent()
-	 * This does not call render()
-	 *
-	 * @param el {HTMLElement}
-	 * @param isPreHtmlElement {?boolean} True if the element's tag name ends with -solarite-placeholder
-	 * @param props {Object} Attributes with dynamic values.
-	 * @return {[HTMLElement, attribs:Object, children:Node[]]}} */
-	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.`)
-
-		// 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.
-		let attribs = Util.attribsToObject(el, 'solarite-placeholder');
-		for (let name in props || {})
-			attribs[Util.dashesToCamel(name)] = props[name];
-
-
-		// 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 (!isPreHtmlElement)
-			newEl.setAttribute('is', el.getAttribute('is').toLowerCase());
-
-		// Replace the placeholder tag with the instantiated web component.
-		el.replaceWith(newEl);
-
-		// 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)
-				path.nodeMarker = newEl;
-			if (path.nodeBefore === el)
-				path.nodeBefore = newEl;
-		}
-		if (this.startNode === el)
-			this.startNode = newEl;
-		if (this.endNode === el)
-			this.endNode = newEl;
-
-		// This is used only if inheriting from the Solarite class.
-		// 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);
-		}
+	// TODO: Give it a better name.
+	applyExprs2(exprs) {
 
-		return [newEl, attribs, children];
 	}
 
 	/**
@@ -356,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} */
@@ -374,21 +305,12 @@ export default class NodeGroup {
 	}
 
 	/**
-	 * Requires the nodeCache to be present. */
-	removeAndSaveOrphans() {
-		/*#IFDEV*/assert(this.nodesCache);/*#ENDIF*/
-		let fragment = Globals.doc.createDocumentFragment();
-		for (let node of this.getNodes())
-			fragment.append(node);
-	}
-
-
-	/**
-	 * @param fragment {DocumentFragment}
+	 * Copy paths in fragment to this.paths.
+	 * @param fragment {DocumentFragment|HTMLElement}
 	 * @param paths
 	 * @param startingPathDepth {int} */
-	updatePaths(fragment, paths, startingPathDepth) {
-		let pathLength = paths.length;
+	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, startingPathDepth)
@@ -406,12 +328,59 @@ 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('')};
+	 * @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 (options?.ids !== false) {
+				for (let path of shell.ids) {
+					if (pathOffset)
+						path = path.slice(0, -pathOffset);
+					let el = Path.resolve(root, path);
+					Util.bindId(rootEl, el);
+				}
+			}
+
+			// styles
+			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 = Path.resolve(root, path);
+					if (rootEl.nodeType === 1) {
+						Util.bindStyles(style, rootEl);
+						this.styles.set(style, style.textContent);
+					}
+				}
+
+			}
+			// scripts
+			if (options?.scripts !== false) {
+				for (let path of shell.scripts) {
+					if (pathOffset)
+						path = path.slice(0, -pathOffset);
+					let script = Path.resolve(root, path);
+					eval(script.textContent)
+				}
+			}
+		}
+	}
+
+	//#IFDEV
+	getParentNode() {
+		return this.startNode?.parentNode
+	}
 
 	get debug() {
 		return [
@@ -422,7 +391,7 @@ export default class NodeGroup {
 
 					let tree = nodeToArrayTree(item, nextNode => {
 
-						let path = this.paths.find(path=>path.type === ExprPathType.Content && path.getNodes().includes(nextNode));
+						let path = this.paths.find(path=>(path instanceof PathToNodes) && path.getNodes().includes(nextNode));
 						if (path)
 							return [`Path.nodes:`]
 
@@ -432,7 +401,7 @@ export default class NodeGroup {
 					// 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)
+				else if (item instanceof Path)
 					return setIndent(item.debug, 1)
 			}).flat(), 1)
 		]
@@ -472,81 +441,30 @@ export default class NodeGroup {
 		return true;
 	}
 	//#ENDIF
+}
 
-	findStaticComponents(root, shell, startingPathDepth=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 (startingPathDepth)
-				path = path.slice(0, -startingPathDepth);
-			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) {
-		// TODO: Why do we not call render() on the static component here?  The tests pass either way.
-		for (let i in staticComponents)
-			staticComponents[i] = this.handleComponent(staticComponents[i], null, false);
-	}
-
-	/**
-	 * @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 (options?.ids !== false) {
-				for (let path of shell.ids) {
-					if (pathOffset)
-						path = path.slice(0, -pathOffset);
-					let el = resolveNodePath(root, path);
-					Util.bindId(rootEl, el);
-				}
-			}
 
-			// styles
-			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);
-					if (rootEl.nodeType === 1) {
-						Util.bindStyles(style, rootEl);
-						this.styles.set(style, style.textContent);
-					}
-				}
 
-			}
-			// scripts
-			if (options?.scripts !== false) {
-				for (let path of shell.scripts) {
-					if (pathOffset)
-						path = path.slice(0, -pathOffset);
-					let script = resolveNodePath(root, path);
-					eval(script.textContent)
-				}
-			}
+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 tagName {string}
+ * @returns {boolean} */
+function isReplaceEl(fragment, tagName) {
+	return fragment.children.length===1
+		&& tagName.includes('-')
+		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === tagName;
+}