solarite 0.3.1 → 0.4.0

package/src/NodeGroup.js

@@ -1,11 +1,10 @@
 import {assert} from "./assert.js";
-import ExprPath, {ExprPathType, resolveNodePath} from "./ExprPath.js";
-import {getObjectHash} from "./hash.js";
-import Shell from "./Shell.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 ExprPath, {ExprPathType, resolveNodePath} from "./ExprPath.js";
+import Globals from './Globals.js';
 
 /** @typedef {boolean|string|number|function|Object|Array|Date|Node|Template} Expr */
 
@@ -55,30 +54,39 @@ export default class NodeGroup {
 	 * @type {?Map<HTMLStyleElement, string>} */
 	styles;
 
+	dynamicComponents = new Set();
+	staticComponents = [];
+
+	/** @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) {
+		this.rootNg = parentPath?.parentNg?.rootNg || this;
+		this.parentPath = parentPath;
+
 		if (!(this instanceof RootNodeGroup)) {
 
-			let [fragment, shell] = this.init(template, parentPath);
+			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 activateStaticComponents() after their children have been created.
-				let staticComponents = this.findStaticComponents(fragment, shell);
+				// 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(staticComponents);
+				this.instantiateStaticComponents(this.staticComponents);
 			}
 			else if (shell)
 				this.activateEmbeds(fragment, shell);
@@ -89,47 +97,33 @@ export default class NodeGroup {
 	 * 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();
-
-		this.parentPath = parentPath;
-		this.rootNg = parentPath?.parentNg?.rootNg || this;
-
+	 * @returns {[DocumentFragment, Shell]} The Shell created from the template,a nd the fragment cloned from the Shell.*/
+	populateFromTemplate(template) {
 		/*#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.exactKey = template.getExactKey();
+		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]);
-
+		if (template.isText) {
+			let textNode = Globals.doc.createTextNode(template.html[0]);
 			this.startNode = this.endNode = textNode;
 			return [];
 		}
+
+		// 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);
 
-			if (fragment instanceof DocumentFragment) {
+			if (fragment?.nodeType === 11) { // DocumentFragment
 				let childNodes = fragment.childNodes;
 				this.startNode = childNodes[0];
 				this.endNode = childNodes[childNodes.length - 1];
 			}
-			else {
+			else
 				this.startNode = this.endNode = fragment;
-			}
+
 			return [fragment, shell];
 		}
 	}
@@ -168,6 +162,7 @@ export default class NodeGroup {
 				exprIndex--;
 			}
 
+
 			// 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.
@@ -176,11 +171,11 @@ export default class NodeGroup {
 			// 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()) {
+			if (path.nodeMarker !== this.rootNg.root && path.isComponent) {
 
-				if (!nextPath || !nextPath.isComponent() || nextPath.nodeMarker !== path.nodeMarker)
+				if (!nextPath || !nextPath.isComponent || nextPath.nodeMarker !== path.nodeMarker)
 					lastComponentPathIndex = i;
-				let isFirstComponentPath = !prevPath || !prevPath.isComponent() || prevPath.nodeMarker !== path.nodeMarker;
+				let isFirstComponentPath = !prevPath || !prevPath.isComponent || prevPath.nodeMarker !== path.nodeMarker;
 
 				if (isFirstComponentPath) {
 
@@ -190,7 +185,7 @@ export default class NodeGroup {
 						componentProps[attrName] = pathExprs[j].length > 1 ? pathExprs[j].join('') : pathExprs[j][0];
 					}
 
-					this.applyComponentExprs(path.nodeMarker, componentProps);
+					this.handleComponent(path.nodeMarker, componentProps, true);
 
 					// Set attributes on component.
 					for (let j=i; j<=lastComponentPathIndex; j++)
@@ -209,7 +204,10 @@ export default class NodeGroup {
 		// TODO: Only do this if we have ExprPaths within styles?
 		this.updateStyles();
 
-
+		// 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.
 
 		// Invalidate the nodes cache because we just changed it.
 		this.nodesCache = null;
@@ -225,50 +223,39 @@ export default class NodeGroup {
 	}
 
 	/**
-	 * 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);
-
+	 * 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')
-
-
-		// Instantiate a placeholder.
+		let isPreIsElement = el.hasAttribute('_is');
+		let attribs, children;
 		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 = {};
+			[el, attribs, children] = this.instantiateComponent(el, isPreHtmlElement, props);
+		if (doRender && el.render) {
+			if (!attribs) {
+				attribs = Util.attribsToObject(el);
 				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.
-			//}
+					attribs[Util.dashesToCamel(name)] = props[name];
+				children = el.childNodes;
+			}
+			el.render(attribs, children);
 		}
-
-		Globals.componentArgsHash.set(el, newHash);
+		return el;
 	}
-
+	
 	/**
 	 * 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()
 	 *
-	 * The logic of this function is complex and could use cleaning up.
-	 *
-	 * @param el
+	 * @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} */
+	 * @return {[HTMLElement, attribs:Object, children:Node[]]}} */
 	instantiateComponent(el, isPreHtmlElement=undefined, props=undefined) {
 		if (isPreHtmlElement === undefined)
 			isPreHtmlElement = !el.hasAttribute('_is');
@@ -283,24 +270,17 @@ export default class NodeGroup {
 		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) {
-			for (let attrib of el.attributes) {
-				let attribName = Util.dashesToCamel(attrib.name);
-				if (!args.hasOwnProperty(attribName) && attribName !== 'solarite-placeholder')
-					args[attribName] = attrib.value;
-			}
-		}
+		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 ch = [...el.childNodes].filter(node => node.nodeType !== Node.COMMENT_NODE || !node.nodeValue.startsWith('ExprPath'));
-		let newEl = new Constructor(args, ch);
+		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());
@@ -326,7 +306,7 @@ export default class NodeGroup {
 		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)
@@ -350,7 +330,7 @@ export default class NodeGroup {
 				newEl.setAttribute(name, val);
 		}
 
-		return newEl;
+		return [newEl, attribs, children];
 	}
 
 	/**
@@ -397,18 +377,21 @@ export default class NodeGroup {
 	 * Requires the nodeCache to be present. */
 	removeAndSaveOrphans() {
 		/*#IFDEV*/assert(this.nodesCache);/*#ENDIF*/
-		let fragment = document.createDocumentFragment();
+		let fragment = Globals.doc.createDocumentFragment();
 		for (let node of this.getNodes())
 			fragment.append(node);
 	}
 
 
-	updatePaths(fragment, paths, offset) {
-		// Update paths to point to the fragment.
+	/**
+	 * @param fragment {DocumentFragment}
+	 * @param paths
+	 * @param startingPathDepth {int} */
+	updatePaths(fragment, paths, startingPathDepth) {
 		let pathLength = paths.length;
 		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;
 		}
@@ -435,7 +418,7 @@ export default class NodeGroup {
 			`parentNode: ${this.parentNode?.tagName?.toLowerCase()}`,
 			'nodes:',
 			...setIndent(this.getNodes().map(item => {
-				if (item instanceof Node) {
+				if (item?.nodeType) {
 
 					let tree = nodeToArrayTree(item, nextNode => {
 
@@ -490,7 +473,7 @@ export default class NodeGroup {
 	}
 	//#ENDIF
 
-	findStaticComponents(root, shell, pathOffset=0) {
+	findStaticComponents(root, shell, startingPathDepth=0) {
 		let result = [];
 
 		// static components.  These are WebComponents that do not have any constructor arguments that are expressions.
@@ -498,8 +481,8 @@ export default class NodeGroup {
 		// 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);
+			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.
@@ -511,8 +494,9 @@ export default class NodeGroup {
 	}
 
 	instantiateStaticComponents(staticComponents) {
-		for (let el of staticComponents)
-			this.instantiateComponent(el)
+		// 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);
 	}
 
 	/**
@@ -533,7 +517,7 @@ export default class NodeGroup {
 					let el = resolveNodePath(root, path);
 					Util.bindId(rootEl, el);
 				}
-				}
+			}
 
 			// styles
 			if (options?.styles !== false) {
@@ -566,150 +550,3 @@ export default class NodeGroup {
 }
 
 
-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 {
-
-			// 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);
-				}
-
-				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) && 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);
-
-					// No slots
-					else
-						el.append(slotChildren);
-				}
-
-				root = el;
-
-				this.startNode = el;
-				this.endNode = el;
-			} else {
-				let singleEl = getSingleEl(fragment);
-				this.root = singleEl || fragment; // We return the whole fragment when calling r() with a collection of nodes.
-
-				Globals.nodeGroups.set(this.root, this);
-				if (singleEl) {
-					root = singleEl;
-					offset = 1;
-				}
-			}
-
-			this.updatePaths(root, shell.paths, offset);
-
-			// Static web components can sometimes have children created via expressions.
-			// But calling applyExprs() will mess up the shell's path to them.
-			// So we find them first, then call activateStaticComponents() after their children have been created.
-			let staticComponents = this.findStaticComponents(root, shell, offset);
-
-			this.activateEmbeds(root, shell, offset);
-
-			// Apply exprs
-			this.applyExprs(template.exprs);
-
-			this.instantiateStaticComponents(staticComponents);
-		}
-	}
-}
-
-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 fragment.children.length===1
-		&& el.tagName.includes('-') // TODO: Check for solarite-placeholder attribute instead?
-		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
-}

package/src/RootNodeGroup.js

@@ -0,0 +1,153 @@
+import Globals from './Globals.js';
+import NodeGroup from './NodeGroup.js';
+
+
+export default 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 {Template}
+	 * @param el {?HTMLElement} Optional, pre-existing htmlElement tat will be the root.
+	 * @param options {?object} */
+	constructor(template, el, options) {
+		super(template);
+
+		this.options = options;
+
+		let [fragment, shell] = this.populateFromTemplate(template);
+
+		let startingPathDepth = 0;
+
+
+		if (fragment instanceof Text) {
+
+			if (el) {
+				this.startNode = el;
+				this.endNode = el;
+				if (fragment.nodeValue.length)
+					el.append(fragment);
+				this.root = el;
+			}
+			else
+				throw new Error('Cannot create a standalone text node');
+			Globals.nodeGroups.set(this.root, this);
+		}
+
+
+		else {
+
+			// If adding NodeGroup to an element.
+			if (el) {
+				this.root = el;
+
+				// Save slot children
+				let slotChildren;
+				if (el.childNodes.length) {
+					slotChildren = Globals.doc.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);
+
+					// 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.
+					startingPathDepth = 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);
+
+					// No slots
+					else
+						el.append(slotChildren);
+				}
+
+				this.startNode = el;
+				this.endNode = el;
+			}
+
+			// Instantiate as a standalone element.
+			else {
+				let singleEl = getSingleEl(fragment);
+				this.root = singleEl || fragment; // We return the whole fragment when calling h() with a collection of nodes.
+
+				if (singleEl)
+					startingPathDepth = 1;
+			}
+			Globals.nodeGroups.set(this.root, this);
+			this.updatePaths(this.root, shell.paths, startingPathDepth);
+
+			// 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.
+			this.staticComponents = this.findStaticComponents(this.root, shell, startingPathDepth);
+
+			this.activateEmbeds(this.root, shell, startingPathDepth);
+
+			// Apply exprs
+			this.applyExprs(template.exprs);
+
+			this.instantiateStaticComponents(this.staticComponents);
+		}
+
+
+	}
+}
+
+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 fragment.children.length===1
+		&& el.tagName.includes('-') // TODO: Check for solarite-placeholder attribute instead?
+		&& fragment.children[0].tagName.replace('-SOLARITE-PLACEHOLDER', '') === el.tagName;
+}