solarite 0.3.2 → 0.5.0

package/src/h.js

@@ -1,7 +1,7 @@
 import Template from "./Template.js";
-import Util from "./Util.js";
 import Globals from "./Globals.js";
-import {assert} from "./assert.js";
+import toEl from "./toEl.js";
+import Util from "./Util.js";
 
 /**
  * Convert strings to HTMLNodes.
@@ -9,175 +9,130 @@ import {assert} from "./assert.js";
  * Using h() as a function() will always create a DOM element.
  *
  * Features beyond what standard js tagged template strings do:
- * 1. r`` sub-expressions
+ * 1. h`` sub-expressions
  * 2. functions, nodes, and arrays of nodes as sub-expressions.
- * 3. html-escape all expressions by default, unless wrapped in r()
+ * 3. html-escape all expressions by default, unless wrapped in h()
  * 4. event binding
  * 5. TODO:  list more
  *
+ * General rule:
+ * If h() is a function with null or an HTMLElement as its first argument create a Node.
+ * Otherwise create a template
+ *
  * Currently supported:
- * 1. h(el, options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
- * 2. h(el, template, ?options)        // Render the Template created by #1 to element.
  *
- * 3. h`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
+ * Create Tempataes
+ * 1. h`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
+ * 2. h('<b>Hello</b><u>Goodbye</u>'); // Create Template from string, that can later be used to create nodes.
  *
- * 4. h('Hello');                      // Create single text node.
- * 5. h('<b>Hello</b>');               // Create single HTMLElement
- * 6. h('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
- * 7. h()`Hello<b>${'World'}!</b>`     // Same as 4-6, but evaluates the string as a Solarite template, which
- *                                     // includes properly handling nested components and r`` sub-expressions.
- * 8. h(template)                      // Render Template created by #1.
+ * Add children to an element.
+ * 3. h(el, h`<b>${'Hi'}</b>`, ?options)
+ * 4. h(el, ?options)`<b>${'Hi'}</b>`   // typical path used in render(). Create template and render its nodes to el.
  *
- * 9. h({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
- * 10. h(string, object, ...)          // JSX TODO
+ * Create top-level element
+ * 5. h()`Hello<b>${'World'}!</b>`
+ *
+ * 6. h(string, object, ...)           // Used for JSX
  * @param htmlStrings {?HTMLElement|string|string[]|function():Template|{render:function()}}
  * @param exprs {*[]|string|Template|Object}
- * @return {Node|HTMLElement|Template} */
+ * @return {Node|HTMLElement|Template|Function} */
 export default function h(htmlStrings=undefined, ...exprs) {
 
-	if (htmlStrings === undefined && !exprs.length && arguments.length)
-		throw new Error('h() cannot be called with undefined.');
-
-	// TODO: Make this a more flat if/else and call other functions for the logic.
-	if (htmlStrings instanceof Node) {
-		let parent = htmlStrings, template = exprs[0];
+	// 1. Tagged template: h`<div>...</div>`
+	if (Array.isArray(arguments[0])) {
+		return new Template(arguments[0], exprs);
+	}
 
-		// 1
-		if (!(exprs[0] instanceof Template)) {
-			if (parent.shadowRoot)
-				parent.innerHTML = ''; // Remove shadowroot.  TODO: This could mess up paths?
+	// 2. String to template, or JSX factory form h(tag, props, ...children)
+	else if (typeof arguments[0] === 'string' || arguments[0] instanceof String) {
+		let tagOrHtml = arguments[0];
 
-			let options = exprs[0];
+		// 2a. JSX: h("tag", {props}, ...children)
+		if (exprs.length && (typeof exprs[0] === 'object' || exprs[0] === null)) {
+			let tag = tagOrHtml + '';
+			let props = exprs[0] || {};
+			let children = exprs.slice(1);
 
-			// Return a tagged template function that applies the tagged themplate to parent.
-			let taggedTemplate = (htmlStrings, ...exprs) => {
-				Globals.rendered.add(parent)
-				let template = new Template(htmlStrings, exprs);
-				return template.render(parent, options);
-			}
-			return taggedTemplate;
+			return Template.fromJsx(tag, props, children);
 		}
 
-		// 2. Render template created by #4 to element.
-		else { // instanceof Template
-			let options = exprs[1];
-			template.render(parent, options);
-
-			// Append on the first go.
-			if (!parent.childNodes.length && this) {
-				// TODO: Is this ever executed?
-				debugger;
-				parent.append(this.rootNg.getParentNode());
-			}
+		// 2b. Plain html string => template: h('<div>...</div>')
+		else {
+			let html = tagOrHtml;
+			// If it starts with whitespace and then a tag, trim it.
+			if (html.match(/^\s^</))
+				html = html.trim();
+			return new Template([html], []);
 		}
 	}
 
-	// 3. Path if used as a template tag.
-	else if (Array.isArray(htmlStrings)) {
-		return new Template(htmlStrings, exprs);
-	}
-
-	else if (typeof htmlStrings === 'string' || htmlStrings instanceof String) {
-		// 10. JSX
-		if (typeof exprs[0] === 'object') {
-			let tag = htmlStrings;
-			let props = exprs[0] || {};
-			let children = exprs.slice(1);
-
-			let templateHtmlStrings = [];
-			let templateExprs = [];
+	else if (arguments[0] instanceof HTMLElement || arguments[0] instanceof DocumentFragment) {
 
-			// TODO How to know which children are static html and which are expression placeholders?
-			// Perhaps we have to treat every text child as a string?
+		// 3. Render template to element: h(el, template)
+		if (arguments[1] instanceof Template) {
 
-			assert(templateHtmlStrings.length === templateExprs.length+1);
-			return new Template(templateHtmlStrings, templateExprs);
+			/** @type Template */
+			let template = arguments[1];
+			let parent = arguments[0];
+			let options = arguments[2];
+			template.render(parent, options);
 		}
 
+		// 4. Render tagged template to element: h(el)`<div>...</div>`
+		else {
+			let parent = arguments[0], options = arguments[1];
 
-		// If it starts with a string, trim both ends.
-		// TODO: Also trim if it ends with whitespace?
-		if (htmlStrings.match(/^\s^</))
-			htmlStrings = htmlStrings.trim();
-
-		// We create a new one each time because otherwise
-		// the returned fragment will have its content replaced by a subsequent call.
-		let templateEl = document.createElement('template');
-		templateEl.innerHTML = htmlStrings;
-
-		// 4+5. Return Node if there's one child.
-		let relevantNodes = Util.trimEmptyNodes(templateEl.content.childNodes);
-		if (relevantNodes.length === 1)
-			return relevantNodes[0];
+			// Remove shadowroot if present.  TODO: This could mess up paths?
+			if (parent.shadowRoot)
+				parent.innerHTML = '';
 
-		// 6. Otherwise return DocumentFragment.
-		return templateEl.content;
+			// Return a tagged template function that applies the tagged template to parent.
+			let renderTemplate = (htmlStrings, ...exprs) => {
+				Globals.rendered.add(parent)
+				let template = new Template(htmlStrings, exprs);
+				return template.render(parent, options);
+			}
+			return renderTemplate;
+		}
 	}
 
-	// 7. Create a static element
-	else if (htmlStrings === undefined) {
+	// 5. Create a static element: h()`<div></div>`
+	else if (!arguments.length) {
 		return (htmlStrings, ...exprs) => {
-			//Globals.rendered.add(parent)
 			let template = h(htmlStrings, ...exprs);
-			return template.render();
+			return toEl(template);
 		}
 	}
 
-	// 8.
-	else if (htmlStrings instanceof Template) {
-		return htmlStrings.render();
-	}
-
-
-	// 9. Create dynamic element with render() function.
+	// 6. Help toEl() with objects: h(this)`<div>...</div>` inside an object's render()
+	// Intercepts the main h(this)`...` function call inside render().
 	// TODO: This path doesn't handle embeds like data-id="..."
-	else if (typeof htmlStrings === 'object') {
-		let obj = htmlStrings;
+	else if (typeof arguments[0] === 'object' && Globals.objToEl.has(arguments[0])) {
+		let obj = arguments[0];
 
-		if (obj.constructor.name !== 'Object') 
+		if (obj.constructor.name !== 'Object')
 			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
 
+		// Jsx with h(this, <jsx>)
+		if (arguments[1] instanceof Template) {
+			let template = arguments[1];
+			let el = template.render();
+			Globals.objToEl.set(obj, el);
+		}
 
-		// Special rebound render path, called by normal path.
-		// Intercepts the main r`...` function call inside render().
-		if (Globals.objToEl.has(obj)) {
+		// h(this)`<div>...</div>`
+		else
 			return function(...args) {
-			   let template = h(...args);
-			   let el = template.render();
+				let template = h(...args);
+				let el = template.render();
 				Globals.objToEl.set(obj, el);
 			}.bind(obj);
-		}
-
-		// Normal path
-		else {
-			Globals.objToEl.set(obj, null);
-			obj[renderF](); // Calls the Special rebound render path above, when the render function calls r(this)
-			let el = Globals.objToEl.get(obj);
-			Globals.objToEl.delete(obj);
-
-			for (let name in obj)
-				if (typeof obj[name] === 'function')
-					el[name] = obj[name].bind(el);  // Make the "this" of functions be el.
-					// TODO: But this doesn't work for passing an object with functions as a constructor arg via an attribute:
-					// <my-element arg=${{myFunc() { return this }}}
-				else
-					el[name] = obj[name];
-
-			// Bind id's
-			// This doesn't work for id's referenced by attributes.
-			// for (let idEl of el.querySelectorAll('[id],[data-id]')) {
-			// 	Util.bindId(el, idEl);
-			// 	Util.bindId(obj, idEl);
-			// }
-			// TODO: Bind styles
-
-			return el;
-		}
 	}
+	// TODO: Handle other primitive types?
+	else if (Util.isFalsy(arguments[0]))
+		return new Template();
 
 	else
-		throw new Error('Unsupported arguments.')
+		throw new Error('h() does not support argument of type: ' + (arguments[0] ? typeof arguments[0] : arguments[0]))
 }
 
-// Trick to prevent minifier from renaming this function.
-let renderF = 'render';

package/src/hash.js

@@ -9,8 +9,8 @@ export function getObjectId(obj) {
 	// 	return obj.toString(); // This fails to detect when a function's bound variables changes.
 	
 	let result = objectIds.get(obj);
-	if (!result) { // convert to string, store in result, then add 1 to lastObjectId.
-		result = '~\f' + (lastObjectId++); // We use a unique, 2-byte prefix to ensure it doesn't collide w/ strings not from getObjectId()
+	if (result===undefined) { // convert to string, store in result, then add 1 to lastObjectId.
+		result = '~@' + (lastObjectId++); // We use a unique, 2-byte prefix to ensure it doesn't collide w/ strings not from getObjectId()
 		objectIds.set(obj, result)
 	}
 	return result;
@@ -20,7 +20,8 @@ export function getObjectId(obj) {
  * Control how JSON.stringify() handles Nodes and Functions.
  * Normally, we'd pass a replacer() function argument to JSON.stringify() to handle Nodes and Functions.
  * But that makes JSON.stringify() take twice as long to run.
- * Adding a toJSON method globally on these object prototypes doesn't incur that performance penalty. */
+ * Adding a toJSON method globally on these object prototypes doesn't incur that performance penalty.
+ * TODO: This needs to be benchmarked again after the json rewrite in Chrome 138. */
 let isHashing = true;
 function toJSON() {
 	return isHashing ? getObjectId(this) : this
@@ -48,26 +49,27 @@ export function getObjectHash(obj) {
 	// Sometimes these get unassigned by Chrome and Brave 119, as well as Firefox, seemingly randomly!
 	// The same tests sometimes pass, sometimes fail, even after browser and OS restarts.
 	// So we check the assignments on every run of getObjectHash()
+	// TODO: Cache references to Node.prototype and Function.prototype:
 	if (Node.prototype.toJSON !== toJSON) {
 		Node.prototype.toJSON = toJSON;
 		if (Function.prototype.toJSON !== toJSON) // Will it only unmap one but not the other?
 			Function.prototype.toJSON = toJSON;
 	}
 
-	let result;
 	isHashing = true;
 	try {
-		result = JSON.stringify(obj);
+		return JSON.stringify(obj);
 	}
 	catch(e) {
-		result = getObjectHashCircular(obj);
+		return getObjectHashCircular(obj);
+	}
+	finally {
+		isHashing = false;
 	}
-	isHashing = false;
-	return result;
 }
 
 /**
- * Slower hashing method that supports.
+ * Slower hashing method that supports circular references.
  * @param obj
  * @returns {string} */
 function getObjectHashCircular(obj) {

package/src/toEl.js

@@ -0,0 +1,83 @@
+import Globals from "./Globals.js";
+import Template from "./Template.js";
+import Util from "./Util.js";
+
+/**
+ * Convert a template, string, or object into a DOM Node or Element
+ *
+ * 1. toEl('Hello');                      // Create single text node.
+ * 2. toEl('<b>Hello</b>');               // Create single HTMLElement
+ * 3. toEl('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
+ * 4. toEl(template)                      // Render Template created by h`<html>` or h();
+ * 5. toEl({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
+ * @param arg {string|Template|{render:()=>void}}
+ * @returns {Node|DocumentFragment|HTMLElement} */
+export default function toEl(arg) {
+
+	if (typeof arg === 'string') {
+		let html = arg;
+
+		// If it's an element with whitespace before or after it, trim both ends.
+		if (html.match(/^\s^<\S+/) || html.match(/\S+>\s+$/))
+			html = html.trim();
+
+		// We create a new one each time because otherwise
+		// the returned fragment will have its content replaced by a subsequent call.
+		let templateEl = Globals.doc.createElement('template');
+		templateEl.innerHTML = html;
+
+		// 1+2. Return Node if there's one child.
+		let relevantNodes = Util.trimEmptyNodes(templateEl.content.childNodes);
+		if (relevantNodes.length === 1)
+			return relevantNodes[0];
+
+		// 3. Otherwise return DocumentFragment.
+		return templateEl.content;
+	}
+
+	// 4.
+	if (arg instanceof Template) {
+		return arg.render();
+	}
+
+	// 5. Create dynamic element from an object with a render() function.
+	// TODO: This path doesn't handle embeds like data-id="..."
+	else if (arg && typeof arg === 'object') {
+		let obj = arg;
+
+		if (obj.constructor.name !== 'Object')
+			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
+
+		// Normal path
+		if (!Globals.objToEl.has(obj)) {
+			Globals.objToEl.set(obj, null);
+			obj[renderF](); // Calls the Special rebound render path above, when the render function calls h(this)
+			let el = Globals.objToEl.get(obj);
+			Globals.objToEl.delete(obj);
+
+			for (let name in obj)
+				if (typeof obj[name] === 'function')
+					el[name] = obj[name].bind(el);  // Make the "this" of functions be el.
+					// TODO: But this doesn't work for passing an object with functions as a constructor arg via an attribute:
+				// <my-element arg=${{myFunc() { return this }}}
+				else
+					el[name] = obj[name];
+
+			// Bind id's
+			// This doesn't work for id's referenced by attributes.
+			// for (let idEl of el.querySelectorAll('[id],[data-id]')) {
+			// 	Util.bindId(el, idEl);
+			// 	Util.bindId(obj, idEl);
+			// }
+			// TODO: Bind styles
+
+			return el;
+		}
+	}
+
+	throw new Error('toEl() does not support argument of type: ' + (arg ? typeof arg : arg));
+}
+
+
+// Trick to prevent minifier from renaming this function.
+let renderF = 'render';

package/src/udomdiff.js

@@ -16,8 +16,6 @@
  * PERFORMANCE OF THIS SOFTWARE.
  */
 
-import NodeGroup from "./NodeGroup.js";
-
 /**
  * @param {Node} parentNode The container where children live
  * @param {Node[]} a The list of current/live children
@@ -28,11 +26,6 @@ import NodeGroup from "./NodeGroup.js";
  * @returns {Node[]} The same list of future children.
  */
 const udomdiff = (parentNode, a, b, before) => {
-	//#IFDEV
-	// if (parentNode instanceof ExprPath)
-	// 	parentNode.verify();
-	//#ENDIF
-
 	const bLength = b.length;
 	let aEnd = a.length;
 	let bEnd = bLength;
@@ -54,13 +47,6 @@ const udomdiff = (parentNode, a, b, before) => {
 			while (bStart < bEnd) {
 				let bNode = b[bStart++];
 				parentNode.insertBefore(bNode, node);
-
-				//#IFDEV
-				if (bNode instanceof NodeGroup)
-					bNode.verify();
-				// if (parentNode instanceof ExprPath)
-				// 	parentNode.verify();
-				//#ENDIF
 			}
 		}
 		// remove head or tail: fast path
@@ -70,13 +56,6 @@ const udomdiff = (parentNode, a, b, before) => {
 				let aNode = a[aStart];
 				if (!map || !map.has(aNode)) {
 					parentNode.removeChild(aNode);
-
-					//#IFDEV
-					if (aNode instanceof NodeGroup)
-						aNode.verify();
-					// if (parentNode instanceof ExprPath)
-					// 	parentNode.verify();
-					//#ENDIF
 				}
 				aStart++;
 			}
@@ -113,24 +92,10 @@ const udomdiff = (parentNode, a, b, before) => {
 				a2,
 				b2.nextSibling
 			);
-			//#IFDEV
-			if (a2 instanceof NodeGroup)
-				a2.verify();
-			// if (parentNode instanceof ExprPath)
-			// 	parentNode.verify();
-			//#ENDIF
 
 			let bNode = b[--bEnd];
 			parentNode.insertBefore(bNode, node);
 
-			//#IFDEV
-			if (bNode instanceof NodeGroup)
-				bNode.verify();
-			// if (parentNode instanceof ExprPath)
-			// 	parentNode.verify();
-
-			//#ENDIF
-
 			// mark the future index as identical (yeah, it's dirty, but cheap 👍)
 			// The main reason to do this, is that when a[aEnd] will be reached,
 			// the loop will likely be on the fast path, as identical to b[bEnd].
@@ -178,14 +143,6 @@ const udomdiff = (parentNode, a, b, before) => {
 						while (bStart < index) {
 							let bNode = b[bStart++];
 							parentNode.insertBefore(bNode, node);
-
-							//#IFDEV
-							if (bNode instanceof NodeGroup)
-								bNode.verify();
-							// if (parentNode instanceof ExprPath)
-							// 	parentNode.verify();
-
-							//#ENDIF
 						}
 					}
 						// if the effort wasn't good enough, fallback to a replace,
@@ -198,13 +155,6 @@ const udomdiff = (parentNode, a, b, before) => {
 							bNode,
 							aNode
 						);
-
-						//#IFDEV
-						if (aNode instanceof NodeGroup)
-							aNode.verify();
-						// if (parentNode instanceof ExprPath)
-						// 	parentNode.verify();
-						//#ENDIF
 					}
 				}
 				// otherwise move the source forward, 'cause there's nothing to do
@@ -217,13 +167,6 @@ const udomdiff = (parentNode, a, b, before) => {
 			else {
 				let aNode = a[aStart++];
 				parentNode.removeChild(aNode);
-
-				//#IFDEV
-				if (aNode instanceof NodeGroup)
-					aNode.verify();
-				// if (parentNode instanceof ExprPath)
-				// 	parentNode.verify();
-				//#ENDIF
 			}
 		}
 	}