solarite 0.2.3 → 0.3.0

package/src/solarite/Shell.js

@@ -1,7 +1,8 @@
 import {assert} from "../util/Errors.js";
-import ExprPath, {PathType, getNodePath} from "./ExprPath.js";
-import {div, htmlContext, isEvent} from "./Util.js";
+import ExprPath, {ExprPathType, getNodePath} from "./ExprPath.js";
+import {isEvent} from "./Util.js";
 import Globals from "./Globals.js";
+import HtmlParser from "./HtmlParser.js";
 
 /**
  * A Shell is created from a tagged template expression instantiated as Nodes,
@@ -9,105 +10,75 @@ import Globals from "./Globals.js";
  * Only one Shell is created for all the items in a loop.
  *
  * When a NodeGroup is created from a Template's html strings,
- * the NodeGroup then clones the Shell's fragmentn to be its nodes. */
+ * the NodeGroup then clones the Shell's fragment to be its nodes. */
 export default class Shell {
 
 	/**
-	 * @type {DocumentFragment} DOM parent of the shell nodes. */
+	 * @type {DocumentFragment|Text} DOM parent of the shell's nodes. */
 	fragment;
 
 	/** @type {ExprPath[]} Paths to where expressions should go. */
 	paths = [];
 
-	// Embeds and ids
-	events = [];
+	// Elements with events.  Not yet used.
+	// events = [];
 
 	/** @type {int[][]} Array of paths */
 	ids = [];
+
+	/** @type {int[][]} Array of paths */
 	scripts = [];
+
+	/** @type {int[][]} Array of paths */
 	styles = [];
 
+	/** @type {int[][]} Array of paths.  Used by activateEmbeds() to quickly find components. */
 	staticComponents = [];
 
+	/** @type {{path:int[], attribs:Object<string, string>}[]} */
+	//componentAttribs = [];
+
 
 
 	/**
 	 * Create the nodes but without filling in the expressions.
 	 * This is useful because the expression-less nodes created by a template can be cached.
-	 * @param html {string[]} */
+	 * @param html {string[]} Html strings, split on places where an expression exists.  */
 	constructor(html=null) {
 		if (!html)
 			return;
 
 		//#IFDEV
-		this.html = html.join('');
+		this._html = html.join('');
 		//#ENDIF
 
-		// 1.  Add placeholders
-		// We increment the placeholder char as we go because nodes can't have the same attribute more than once.
-		let placeholder = 0xe000; // https://en.wikipedia.org/wiki/Private_Use_Areas  6400.
-
-		let buffer = [];
-		let commentPlaceholder = `<!--!✨!-->`;
-		let componentNames = {};
-
-		htmlContext(null); // Reset the context.
-		for (let i=0; i<html.length; i++) {
-			let lastHtml = html[i];
-			let context = htmlContext(lastHtml);
-
-			// Swap out Embedded Solarite Components with ${} attributes.
-			// Later, NodeGroup.render() will search for these and replace them with the real components.
-			// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-			if (context === htmlContext.Attribute) {
-
-				let lastIndex, lastMatch;
-				lastHtml.replace(/<[a-z][a-z0-9]*-[a-z0-9-]+/ig, (match, index) => {
-					lastIndex = index+1; // +1 for after opening <
-					lastMatch = match.slice(1);
-				})
-
-				if (lastMatch) {
-					let newTagName = lastMatch + '-solarite-placeholder';
-					lastHtml = lastHtml.slice(0, lastIndex) + newTagName + lastHtml.slice(lastIndex + lastMatch.length);
-					componentNames[lastMatch] = newTagName
-				}
-			}
-
-			buffer.push(lastHtml);
-			//console.log(lastHtml, context)
-			if (i < html.length-1)
-				if (context === htmlContext.Text)
-					buffer.push(commentPlaceholder) // Comment Placeholder. because we can't put text in between <tr> tags for example.
-				else
-					buffer.push(String.fromCharCode(placeholder+i));
+		if (html.length === 1 && !html[0].match(/[<&]/)) {
+			this.fragment = document.createTextNode(html[0]);
+			return;
 		}
 
-		// 2. Create elements from html with placeholders.
+
+		// 1.  Add placeholders
+		let joinedHtml = Shell.addPlaceholders(html);
+
 		let template = document.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
-		let joinedHtml = buffer.join('');
-
-		// Replace '-solarite-placeholder' close tags.
-		// TODO: is there a better way?  What if the close tag is inside a comment?
-		for (let name in componentNames)
-			joinedHtml = joinedHtml.replaceAll(`</${name}>`, `</${componentNames[name]}>`);
-		
-        if (joinedHtml)
-		    template.innerHTML = joinedHtml;
-        else // Create one text node, so shell isn't empty and NodeGroups created from it have something to point the startNode and endNode at.
-            template.content.append(document.createTextNode(''))
+		if (joinedHtml)
+			template.innerHTML = joinedHtml;
+		else // Create one text node, so shell isn't empty and NodeGroups created from it have something to point the startNode and endNode at.
+			template.content.append(document.createTextNode(''))
 		this.fragment = template.content;
 
-		// 3. Find placeholders
+		// 2. Find placeholders
 		let node;
 		let toRemove = [];
-		const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
+		let placeholdersUsed = 0;
+		const walker = document.createTreeWalker(this.fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
 		while (node = walker.nextNode()) {
 
 			// Remove previous after each iteration, so paths will still be calculated correctly.
 			toRemove.map(el => el.remove());
 			toRemove = [];
-
+			
 			// Replace attributes
 			if (node.nodeType === 1) {
 				for (let attr of [...node.attributes]) { // Copy the attributes array b/c we remove attributes as we go.
@@ -115,7 +86,8 @@ export default class Shell {
 					// Whole attribute
 					let matches = attr.name.match(/^[\ue000-\uf8ff]$/)
 					if (matches) {
-						this.paths.push(new ExprPath(null, node, PathType.Multiple));
+						this.paths.push(new ExprPath(null, node, ExprPathType.AttribMultiple));
+						placeholdersUsed ++;
 						node.removeAttribute(matches[0]);
 					}
 
@@ -124,16 +96,17 @@ export default class Shell {
 						let parts = attr.value.split(/[\ue000-\uf8ff]/g);
 						if (parts.length > 1) {
 							let nonEmptyParts = (parts.length === 2 && !parts[0].length && !parts[1].length) ? null : parts;
-							let type = isEvent(attr.name) ? PathType.Event : PathType.Value;
+							let type = isEvent(attr.name) ? ExprPathType.Event : ExprPathType.AttribValue;
 
 							this.paths.push(new ExprPath(null, node, type, attr.name, nonEmptyParts));
+							placeholdersUsed += parts.length - 1;
 							node.setAttribute(attr.name, parts.join(''));
 						}
 					}
 				}
 			}
 			// Replace comment placeholders
-			else if (node.nodeType === Node.COMMENT_NODE && node.nodeValue === '!✨!') {
+			else if (node.nodeType === 8 && node.nodeValue === '!✨!') {
 
 				// Get or create nodeBefore.
 				let nodeBefore = node.previousSibling; // Can be the same as another Path's nodeMarker.
@@ -158,12 +131,14 @@ export default class Shell {
 				}
 				/*#IFDEV*/assert(nodeMarker);/*#ENDIF*/
 
-
-
-				let path = new ExprPath(nodeBefore, nodeMarker, PathType.Content);
-
+				let path = new ExprPath(nodeBefore, nodeMarker, ExprPathType.Content);
 				this.paths.push(path);
+				placeholdersUsed ++;
 			}
+
+			else if (node.nodeType === 3 && node.parentNode?.tagName === 'TEXTAREA' && node.textContent.includes('<!--!✨!-->'))
+				throw new Error(`Textarea can't have expressions inside them. Use <textarea value="\${...}"> instead.`);
+
 			
 			
 			// Sometimes users will comment out a block of html code that has expressions.
@@ -174,8 +149,9 @@ export default class Shell {
 				let parts = node.textContent.split(/[\ue000-\uf8ff]/g);
 				for (let i=0; i<parts.length-1; i++) {
 					let path = new ExprPath(node.previousSibling, node)
-					path.type = PathType.Comment;
+					path.type = ExprPathType.Comment;
 					this.paths.push(path);
+					placeholdersUsed ++;
 				}
 			}
 
@@ -193,8 +169,9 @@ export default class Shell {
 					}
 
 					for (let i=0, node; node=placeholders[i]; i++) {
-						let path = new ExprPath(node.previousSibling, node, PathType.Content);
+						let path = new ExprPath(node.previousSibling, node, ExprPathType.Content);
 						this.paths.push(path);
+						placeholdersUsed ++;
 
 						/*#IFDEV*/path.verify();/*#ENDIF*/
 					}
@@ -206,17 +183,17 @@ export default class Shell {
 		}
 		toRemove.map(el => el.remove());
 
+		// Less than or equal because there can be one path to multiple expressions
+		// if those expressions are in the same attribute value.
+		if (placeholdersUsed !== html.length-1)
+			throw new Error(`Could not parse expressions in template.  Check for duplicate attributes or malformed html: ${html.join('${...}')}`);
+
 		// Handle solarite-placeholder's.
-		// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
-		//if (componentNames.size)
-		//	this.components = [...this.fragment.querySelectorAll([...componentNames].join(','))]
 
-		// Rename "is" attributes so the Web Components don't instantiate until we have the values of their PathExpr arguments.
+		// 3. Rename "is" attributes so the Web Components don't instantiate until we have the values of their PathExpr arguments.
 		// that happens in NodeGroup.applyComponentExprs()
-		for (let el of this.fragment.querySelectorAll('[is]')) {
-			el.setAttribute('_is', el.getAttribute('is'))
-		//	this.components.push(el);
-		}
+		for (let el of this.fragment.querySelectorAll('[is]'))
+			el.setAttribute('_is', el.getAttribute('is'));
 
 		for (let path of this.paths) {
 			if (path.nodeBefore)
@@ -224,16 +201,63 @@ export default class Shell {
 			path.nodeMarkerPath = getNodePath(path.nodeMarker)
 
 			// Cache so we don't have to calculate this later inside NodeGroup.applyExprs()
-			if (path.type === PathType.Value && path.nodeMarker.nodeType === 1 && /*path.nodeMarker !== template.content.children[0] &&*/
+			if (path.type === ExprPathType.AttribValue && path.nodeMarker.nodeType === 1 &&
 				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
-				path.type = PathType.Component;
+				path.type = ExprPathType.ComponentAttribValue;
 			}
 		}
 
 		this.findEmbeds();
 
 		/*#IFDEV*/this.verify();/*#ENDIF*/
-	} // end constructor
+	}
+
+	/**
+	 * 1. Add a Unicode placeholder char for where expressions go within attributes.
+	 * 2. Add a comment placeholder for where expressions are children of other nodes.
+	 * 3. Append -solarite-placeholder to the tag names of custom components so that we can wait to instantiate them later.
+	 * @param htmlChunks {string[]}
+	 * @returns {string} */
+	static addPlaceholders(htmlChunks) {
+		let tokens = [];
+
+		function addToken(token, context) {
+
+			if (context === HtmlParser.Tag) {
+				// Find Solarite Components tags and append -solarite-placeholder to their tag names.
+				// This way we can gather their constructor arguments and their children before we call their constructor.
+				// Later, NodeGroup.createNewComponent() will replace them with the real components.
+				// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
+				token = token.replace(/^<\/?[a-z][a-z0-9]*-[a-z0-9-]+/i, match => match + '-solarite-placeholder');
+			}
+			tokens.push(token)
+		}
+
+		let htmlParser = new HtmlParser(); // Reset the context.
+		for (let i = 0; i < htmlChunks.length; i++) {
+			let lastHtml = htmlChunks[i];
+
+			// Append -solarite-placholder to web component tags, so we can pass args to them when they're instantiated.
+			let lastIndex = 0;
+			let context = htmlParser.parse(lastHtml, (html, index, oldContext, newContext) => {
+				if (lastIndex !== index) {
+					let token = html.slice(lastIndex, index);
+					addToken(token, oldContext);
+				}
+				lastIndex = index;
+			});
+
+			// Insert placeholders
+			if (i < htmlChunks.length - 1) {
+				if (context === HtmlParser.Text)
+					tokens.push(commentPlaceholder) // Comment Placeholder. because we can't put text in between <tr> tags for example.
+				else
+					tokens.push(String.fromCharCode(attribPlaceholder + i));
+			}
+		}
+
+		return tokens.join('');
+	}
 
 	/**
 	 * We find the path to every embed here once in the Shell, instead of every time a NodeGroup is instantiated.
@@ -245,36 +269,30 @@ export default class Shell {
 	 * this.staticComponents */
 	findEmbeds() {
 		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('scripts'), el => getNodePath(el))
+
+		// TODO: only find styles that have ExprPaths in them?
 		this.styles = Array.prototype.map.call(this.fragment.querySelectorAll('style'), el => getNodePath(el))
 
 		let idEls = this.fragment.querySelectorAll('[id],[data-id]');
-		
 
 		// Check for valid id names.
 		for (let el of idEls) {
 			let id = el.getAttribute('data-id') || el.getAttribute('id')
-			if (div.hasOwnProperty(id))
+			if (Globals.div.hasOwnProperty(id))
 				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement id property.`)
 		}
 
-
 		this.ids = Array.prototype.map.call(idEls, el => getNodePath(el))
 
-		// Events (not yet used)
 		for (let el of this.fragment.querySelectorAll('*')) {
-			for (let attrib of el.attributes)
-				if (isEvent(attrib.name))
-					this.events.push([attrib.name, getNodePath(el)])
-
 			if (el.tagName.includes('-') || el.hasAttribute('_is'))
 
-				// Dynamic components have attributes with expression values.
+				// Dynamic components are components that have attributes with expression values.
 				// They are created from applyExprs()
 				// But static components are created in a separate path inside the NodeGroup constructor.
 				if (!this.paths.find(path => path.nodeMarker === el))
 					this.staticComponents.push(getNodePath(el));
 		}
-
 	}
 
 	/**
@@ -303,3 +321,11 @@ export default class Shell {
 	//#ENDIF
 }
 
+
+const commentPlaceholder = `<!--!✨!-->`;
+
+
+// We increment the placeholder char as we go because nodes can't have the same attribute more than once.
+const attribPlaceholder = 0xe000; // https://en.wikipedia.org/wiki/Private_Use_Areas  6400.
+
+

package/src/solarite/Solarite.js

@@ -3,6 +3,8 @@
  * MIT License
  * https://vorticode.github.io/solarite/
  */
+/** @jsx r */
+/** @jsxFrag null */
 
 
 import createSolarite from "./createSolarite.js";
@@ -16,10 +18,12 @@ let Solarite = new Proxy(createSolarite(), {
 	}
 });
 
+import h from './h.js';
+export default h;
 
 /** @type {HTMLElement|Class} */
 export {Solarite}
-export {default as r} from './r.js';
+export {default as h, default as r} from './h.js';
 export {getArg, ArgType} from './getArg.js';
 export {default as Template} from './Template.js';
 export {default as Globals} from './Globals.js';
@@ -28,7 +32,7 @@ import Util from './Util.js';
 let getInputValue = Util.getInputValue;
 export {getInputValue};
 export {default as delve} from '../util/delve.js';
+export {default as SolariteUtil} from './Util.js';
 
 //Experimental:
-//export {forEach, watchGet, watchSet} from './watch.js' // old, unfinished
-//export {watch} from './watch2.js'; // unfinished
+//export {default as watch, renderWatched} from './watch.js'; // unfinished

package/src/solarite/Template.js

@@ -18,19 +18,9 @@ export default class Template {
 	/** @type {Array} Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
 	hashedFields;
 
-	/**
-    * @deprecated
-    * @type {ExprPath} Used with forEach() from watch.js
-	 * Set in ExprPath.apply() */
-	parentPath;
-
 	/** @type {NodeGroup} */
 	nodeGroup;
 
-	/**
-	 * @type {string[][]} */
-	paths = [];
-
 	/**
 	 *
 	 * @param htmlStrings {string[]}
@@ -81,39 +71,54 @@ export default class Template {
 		if (standalone) {
 			ng = new RootNodeGroup(this, null, options);
 			el = ng.getRootNode();
-			Globals.nodeGroups.set(el, ng);
+			Globals.nodeGroups.set(el, ng); // Why was this commented out?
 			firstTime = true;
 		}
 		else {
 			ng = Globals.nodeGroups.get(el);
 			if (!ng) {
 				ng = new RootNodeGroup(this, el, options);
-				Globals.nodeGroups.set(el, ng);
+				Globals.nodeGroups.set(el, ng); // Why was this commented out?
 				firstTime = true;
 			}
-		}
+
+			// This can happen if we try manually rendering one template to a NodeGroup that was created expecting a different template.
+			// These don't always have the same length, for example if one attribute has multiple expressions.
+			if (ng.paths.length === 0 && this.exprs.length || ng.paths.length > this.exprs.length)
+				throw new Error(`Solarite Error:  Parent HTMLElement ${ng.template.html.join('${...}')} and ${ng.paths.length} \${value} placeholders can't accomodate a Template with ${this.exprs.length} values.`);		}
 
 		// Creating the root nodegroup also renders it.
 		// If we didn't just create it, we need to render it.
 		if (!firstTime) {
 			if (this.html?.length === 1 && !this.html[0])
 				el.innerHTML = ''; // Fast path for empty component.
-			else
+			else {
 				ng.applyExprs(this.exprs);
+			}
 		}
 
+		ng.exprsToRender = new Map();
 		return el;
 	}
 
 	getExactKey() {
-		if (!this.exactKey)
-			this.exactKey = getObjectHash(this); // calls this.toJSON().
+		if (!this.exactKey) {
+			if (this.exprs.length)
+				this.exactKey = getObjectHash(this);// calls this.toJSON().
+			else // Don't hash plain html.
+				this.exactKey = this.html[0];
+		}
 		return this.exactKey;
 	}
 
 	getCloseKey() {
-		if (!this.closeKey)
-			this.closeKey = '@'+this.toJSON()[0];
+		//console.log(this.exprs.length)
+		if (!this.closeKey) {
+			if (this.exprs.length)
+				this.closeKey = /*'@' + */this.toJSON()[0];
+			else
+				this.closeKey = this.html[0];
+		}
 		// Use the joined html when debugging?  But it breaks some tests.
 		//return '@'+this.html.join('|')