solarite 0.3.1 → 0.4.0

package/src/h.js

@@ -1,7 +1,6 @@
 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";
 
 /**
  * Convert strings to HTMLNodes.
@@ -11,173 +10,126 @@ import {assert} from "./assert.js";
  * Features beyond what standard js tagged template strings do:
  * 1. r`` 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.
+ *
+ * Add children to an element.
+ * 3. h(el, h`<b>${'Hi'}</b>`, ?options)
+ * 4. h(el, ?options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
  *
- * 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.
+ * Create top-level element
+ * 5. h()`Hello<b>${'World'}!</b>`
  *
- * 9. h({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
- * 10. h(string, object, ...)          // JSX TODO
+ * 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} */
 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
-		if (!(exprs[0] instanceof Template)) {
-			if (parent.shadowRoot)
-				parent.innerHTML = ''; // Remove shadowroot.  TODO: This could mess up paths?
-
-			let options = exprs[0];
-
-			// 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;
-		}
-
-		// 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());
-			}
-		}
+	// 1. Tagged template
+	if (Array.isArray(arguments[0])) {
+		return new Template(arguments[0], exprs);
 	}
 
-	// 3. Path if used as a template tag.
-	else if (Array.isArray(htmlStrings)) {
-		return new Template(htmlStrings, exprs);
-	}
+	// 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];
 
-	else if (typeof htmlStrings === 'string' || htmlStrings instanceof String) {
-		// 10. JSX
-		if (typeof exprs[0] === 'object') {
-			let tag = htmlStrings;
+		// 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);
 
-			let templateHtmlStrings = [];
-			let templateExprs = [];
-
-			// 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?
+			return Template.fromJsx(tag, props, children);
+		}
 
-			assert(templateHtmlStrings.length === templateExprs.length+1);
-			return new Template(templateHtmlStrings, templateExprs);
+		// 2b. Plain html string => template
+		else {
+			let html = tagOrHtml;
+			// If it starts with whitespace, trim both ends.
+			// TODO: Also trim if it ends with whitespace?
+			if (html.match(/^\s^</))
+				html = html.trim();
+			return new Template([html], []);
 		}
+	}
 
+	else if (arguments[0] instanceof HTMLElement || arguments[0] instanceof DocumentFragment) {
 
-		// If it starts with a string, trim both ends.
-		// TODO: Also trim if it ends with whitespace?
-		if (htmlStrings.match(/^\s^</))
-			htmlStrings = htmlStrings.trim();
+		// 3. Render template to element.
+		if (arguments[1] instanceof Template) {
 
-		// 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;
+			/** @type Template */
+			let template = arguments[1];
+			let parent = arguments[0];
+			let options = arguments[2]; // deprecated?
+			template.render(parent, options);
+		}
 
-		// 4+5. Return Node if there's one child.
-		let relevantNodes = Util.trimEmptyNodes(templateEl.content.childNodes);
-		if (relevantNodes.length === 1)
-			return relevantNodes[0];
+		// 4. Render tagged template to element
+		else {
+			let parent = arguments[0], options = arguments[1];
 
-		// 6. Otherwise return DocumentFragment.
-		return templateEl.content;
-	}
+			// Remove shadowroot.  TODO: This could mess up paths?
+			if (parent.shadowRoot)
+				parent.innerHTML = '';
 
-	// 7. Create a static element
-	else if (htmlStrings === undefined) {
-		return (htmlStrings, ...exprs) => {
-			//Globals.rendered.add(parent)
-			let template = h(htmlStrings, ...exprs);
-			return template.render();
+			// Return a tagged template function that applies the tagged template to parent.
+			let taggedTemplate = (htmlStrings, ...exprs) => {
+				Globals.rendered.add(parent)
+				let template = new Template(htmlStrings, exprs);
+				return template.render(parent, options);
+			}
+			return taggedTemplate;
 		}
 	}
 
-	// 8.
-	else if (htmlStrings instanceof Template) {
-		return htmlStrings.render();
+	// 5. Create a static element  h()'<div></div>' (Deprecated?)
+	else if (!arguments.length) {
+		return (htmlStrings, ...exprs) => {
+				let template = h(htmlStrings, ...exprs);
+				return toEl(template); // Go to path 6.
+			}
 	}
 
-
-	// 9. Create dynamic element with render() function.
+	// 6. Help toEl() with objects.
+	// Special rebound render path, called by normal path.
+	// 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;
-		}
 	}
-
 	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/toEl.js

@@ -0,0 +1,84 @@
+import Globals from "./Globals.js";
+import {Template} from "./Solarite.js";
+import Util from "./Util.js";
+
+/**
+ * Convert a template, string, or object into a DOM Node or Element
+ *
+ * 1. h('Hello');                      // Create single text node.
+ * 2. h('<b>Hello</b>');               // Create single HTMLElement
+ * 3. h('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
+ * 4. h(template)                      // Render Template created by h`<html>` or h();
+ * 5. h({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^</) || html.match(/>\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

@@ -28,11 +28,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 +49,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 +58,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 +94,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 +145,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 +157,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 +169,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
 			}
 		}
 	}

package/src/watch.js

@@ -28,7 +28,7 @@ class WatchExample extends Solarite {
 	}
 
 	render() {
-		r(this)`
+		h(this)`
 		<watch-example>
 			${() => this.name + '!'}
 
@@ -397,7 +397,7 @@ class ProxyHandler {
  * TODO
  *
  *
- * @param root {HTMLElement} An instance of a Web Component that uses r() to render its content.
+ * @param root {HTMLElement} An instance of a Web Component that uses h() to render its content.
  * @param field {string} The name of a top-level property of root.
  * @param value {string|Symbol} The default value. */
 export default function watch(root, field, value=unusedArg) {