solarite 0.4.0 → 0.5.0

package/src/Solarite.js

@@ -8,31 +8,141 @@ JavasCript UI library
 https://vorticode.github.io/solarite/ */
 import h from './h.js';
 export default h;
-export {default as h, default as r} from './h.js'; //Named exports for h() are deprecated.
-export {getArg, ArgType} from './getArg.js';
+export {default as delve} from './delve.js';
 export {default as Template} from './Template.js';
 export {default as toEl} from './toEl.js';
-
+import Template from './Template.js';
 
 // Experimental:
 //--------------
+export {default as Globals} from './Globals.js';
+export {default as SolariteUtil} from './Util.js';
+
+// Deprecated:
+//--------------
+export {default as h} from './h.js'; // Named exports for h() are deprecated.
+export {getArg, ArgType} from './getArg.js';
 export {setArgs} from './getArg.js';
+export {default as r} from './h.js';
+export function t(html) {
+	return new Template([html], []);
+}
+//export {default as watch, renderWatched} from './watch.js'; // unfinished
+
+// Only used for tests:
+//--------------
+export {default as HtmlParser} from './HtmlParser.js';
+export {default as NodeGroup} from './NodeGroup.js';
+export {default as Shell} from './Shell.js';
 
-import createSolarite from "./createSolarite.js";
+
+
+
+
+// Solarite Class:
+//--------------
+import Util from "./Util.js";
+import Globals from "./Globals.js";
 
 /**
- * TODO: The Proxy and the multiple base classes mess up 'instanceof Solarite'
- * @type {Node|Class<HTMLElement>|function(tagName:string):Node|Class<HTMLElement>} */
-const Solarite = new Proxy(createSolarite(), {
-	apply(self, _, args) {
-		return createSolarite(...args)
+ * Intercept the construct call to auto-define the class before the constructor is called. */
+let HTMLElementAutoDefine = new Proxy(HTMLElement, {
+	construct(Parent, args, Class) {
+
+		// 1. Call customElements.define() automatically.
+		Util.defineClass(Class);
+
+		// 2. This line is equivalent the to super() call to HTMLElement:
+		return Reflect.construct(Parent, args, Class);
 	}
 });
 
+/**
+ * Solarite provides more features if your web component extends Solarite instead of HTMLElement.
+ *
+ * Reasons to inherit from Solarite instead of HTMLElement.
+ * 1.  customElements.define() is called automatically when you create the first instance.
+ * 2.  Calls render() when added to the DOM, if it hasn't been called already.
+ * 3.  Populates the attribs argument to the constructor when instantiated from regular html outside a template string.
+ *         It parses JSON from DOM attribute values surrouned with '${...}'
+ * 4.  Shows an error if render() isn't defined.
+ *
+ * Advantages to inheriting from HTMLElement
+ * 1.  We can inherit from things like HTMLTableRowElement directly.
+ * 2.  There's less magic, since everyone is familiar with defining custom elements.
+ * 3.  No confusion about how the class name becomes a tag name.
+ * @extends {HTMLElement} */
+export class Solarite extends HTMLElementAutoDefine {
 
-/** @type {HTMLElement|Class} */
-export {Solarite}
-export {default as Globals} from './Globals.js';
-export {default as SolariteUtil} from './Util.js';
+	/**
+	 * @param attribs {?Record<string, any>} */
+	constructor(attribs=null) {
+		super();
+
+		if (attribs) {
+			if (typeof attribs !== 'object')
+				throw new Error('First argument to custom element constructor must be an object.');
+
+			// 1. Populate attribs if it's an empty object.
+			if (attribs && !Object.keys(attribs).length) {
+				let attribs2 =  Solarite.getAttribs(this);
+				for (let name in attribs2) {
+					attribs[name] = attribs2[name];
+				}
+			}
+
+			// 2. Populate fields from attribs.
+			// This does nothing because the fields are overwritten by the child class after this super() constructor executes.
+			//for (let name in attribs || {}) {
+			//	if (name in this) {
+			//		const descriptor = Object.getOwnPropertyDescriptor(this, name);
+			//		if (!descriptor || descriptor.writable || descriptor.set)
+			//			this[name] = attribs[name];
+			//	}
+			//}
+		}
+
+		// 3. Wrap render function so it always provides the attribs argument.
+		// Disabled because this gives us strings for attribute values when we call render manually.
+		// Instead of values given from ${...} expressions.
+		// let originalRender = this.render;
+		// this.render = (attribs, changed=true) => {
+		// 	if (!attribs) // If we have to look up the attribs, we don't know if they changed or not.
+		// 		attribs = Solarite.getAttribs(this);
+		// 	originalRender.call(this, attribs, changed);
+		// }
+	}
+
+	'render'() {
+		throw new Error('render() is not defined for ' + this.constructor.name);
+	}
+
+	/**
+	 * Call render() only if it hasn't already been called.	 */
+	'renderFirstTime'() {
+		if (!Globals.rendered.has(this)) {
+			let attribs = Solarite.getAttribs(this);
+			this.render(attribs); // calls Globals.rendered.add(this); inside the call to h()'...'.
+		}
+	}
+
+	/**
+	 * Called automatically by the browser. */
+	'connectedCallback'() { // quoted so terser doesn't remove it.
+		this.renderFirstTime();
+	}
+
+	static 'define'(tagName=null) {
+		Util.defineClass(this, tagName);
+	}
 
-//export {default as watch, renderWatched} from './watch.js'; // unfinished
+	static 'getAttribs'(el) {
+		let result = Util.attribsToObject(el);
+		for (let name in result) {
+			let val = result[name];
+			if (val.startsWith('${') && val.endsWith('}'))
+				result[name] = JSON.parse(val.slice(2, -1));
+		}
+		return result;
+	}
+}

package/src/Template.js

@@ -1,8 +1,7 @@
-import {assert} from "./assert.js";
+import assert from "./assert.js";
 import {getObjectHash, getObjectId} from "./hash.js";
 import Globals from "./Globals.js";
 import RootNodeGroup from "./RootNodeGroup.js";
-import Util from "./Util.js";
 
 /**
  * The html strings and evaluated expressions from an html tagged template.
@@ -10,11 +9,11 @@ import Util from "./Util.js";
  * Although the reference to the html strings is shared among templates. */
 export default class Template {
 
-	/** @type {(Template|string|function)|(Template|string|function)[]} Evaulated expressions.  */
-	exprs = []
+	/** @type {Expr[]} Evaulated expressions.  */
+	'exprs' = []
 
 	/** @type {string[]} */
-	html = [];
+	'html' = [];
 
 	/** @type {Array} Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
 	hashedFields;
@@ -25,8 +24,9 @@ export default class Template {
 	 *
 	 * @param htmlStrings {string[]}
 	 * @param exprs {*[]} */
-	constructor(htmlStrings, exprs) {
+	constructor(htmlStrings=[''], exprs=[]) {
 		this.html = htmlStrings;
+
 		this.exprs = exprs;
 
 		//this.trace = new Error().stack.split(/\n/g)
@@ -50,51 +50,50 @@ export default class Template {
 	 * Called by JSON.serialize when it encounters a Template.
 	 * This prevents the hashed version from being too large. */
 	toJSON() {
-		if (!this.hashedFields)
+		if (this.hashedFields===undefined)
 			this.hashedFields = [getObjectId(this.html), this.exprs];
 
 		return this.hashedFields
 	}
 
 	/**
-	 * Render the main template, which may indirectly call renderTemplate() to create children.
-	 * @param el {HTMLElement}
+	 * Render the main (root) template.
+	 * @param el {?HTMLElement} Null if we're rendering to a standalone element.
 	 * @param options {RenderOptions}
 	 * @return {?DocumentFragment|HTMLElement} */
-	render(el=null, options={}) {
-		let ng;
-		let standalone = !el;
-		let firstTime = false;
-
-		// Rendering a standalone element.
-		// TODO: figure out when to not use RootNodeGroup
-		if (standalone) {
-			ng = new RootNodeGroup(this, null, options);
-			el = ng.getRootNode();
-			Globals.nodeGroups.set(el, ng); // Why was this commented out?
-			firstTime = true;
+	'render'(el=null, options={}) {
+
+
+
+		let ng = el && Globals.rootNodeGroups.get(el);
+		if (!ng) {
+			ng = new RootNodeGroup(this, null, el, options);
+			if (!el) // null if it's a standalone elment.
+				el = ng.getRootNode();
+			Globals.rootNodeGroups.set(el, ng); // All tests still pass if this is commented out!
 		}
-		else {
-			ng = Globals.nodeGroups.get(el);
-			if (!ng) {
-				ng = new RootNodeGroup(this, el, options);
-				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.`);		}
+		// Make sure the expresion count matches match the Path "hole" count.
+		// 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 {
-				ng.applyExprs(this.exprs);
-			}
+		if (this.html?.length === 1 && !this.html[0]) // An empty string.
+			el.innerHTML = ''; // Fast path for empty component.
+		else {
+
+			let oldKey = ng.exactKey;
+			let newKey = this.getExactKey();
+			ng.applyExprs(this.exprs, oldKey !== newKey);
+			ng.exactKey = newKey;
+
+			//if (firstTime)
+			//	ng.instantiateStaticComponents(ng.staticComponents);
 		}
 
 		ng.exprsToRender = new Map();
@@ -102,7 +101,7 @@ export default class Template {
 	}
 
 	getExactKey() {
-		if (!this.exactKey) {
+		if (this.exactKey===undefined) {
 			if (this.exprs.length)
 				this.exactKey = getObjectHash(this);// calls this.toJSON().
 			else // Don't hash plain html.
@@ -113,7 +112,7 @@ export default class Template {
 
 	getCloseKey() {
 		//console.log(this.exprs.length)
-		if (!this.closeKey) {
+		if (this.closeKey===undefined) {
 			if (this.exprs.length)
 				this.closeKey = /*'@' + */this.toJSON()[0];
 			else

package/src/Util.js

@@ -20,6 +20,8 @@ let Util = {
 
 	/**
 	 * Convert HTMLElement attributes to an object.
+	 * Converts dash (kebob-case) attribute names to camelCase.
+	 * See also Solarite.getAttribs()
 	 * @param el {HTMLElement}
 	 * @param ignore {?string} Optionally ignore this attribute.
 	 * @return {Object} */
@@ -135,43 +137,14 @@ let Util = {
 		return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
 	},
 
-	/**
-	 * A generator function that recursively traverses and flattens a value.
-	 *
-	 * - If the input is an array, it recursively traverses and flattens the array.
-	 * - If the input is a function, it calls the function, replaces the function
-	 *   with its result, and flattens the result if necessary. It will recursively
-	 *   call functions that return other functions.
-	 * - Otherwise it yields the value as is.
-	 *
-	 * This function does not create a new array for the flattened values. Instead,
-	 * it lazily yields each item as it is encountered. This can be more memory-efficient
-	 * for large or deeply nested structures.
-	 *
-	 * @param {any} value - The value to flatten. Can be an array, object, function, or primitive.
-	 * @yields {any} - The next item in the flattened structure.
-	 *
-	 * @example
-	 * const complexArray = [
-	 *     1,
-	 *     [2, () => 3, [4, () => [5, 6]], { a: 'object' }],
-	 *     () => () => 7,
-	 *     () => [() => 8, 9],
-	 * ];	 *
-	 * for (const item of flatten(complexArray))
-	 *     console.log(item);  // Outputs: 1, 2, 3, 4, 5, 6, { a: 'object' }, 7, 8, 9
-	 */
-	// *flatten(value) {
-	// 	if (Array.isArray(value)) {
-	// 		for (const item of value) {
-	// 			yield* Util.flatten(item);  // Recursively flatten arrays
-	// 		}
-	// 	} else if (typeof value === 'function') {
-	// 		const result = value();
-	// 		yield* Util.flatten(result);  // Recursively flatten the result of a function
-	// 	} else
-	// 		yield value;  // Yield primitive values as is
-	// },
+	defineClass(Class, tagName) {
+		if (!customElements[getName](Class)) { // If not previously defined.
+			tagName = tagName || Util.camelToDashes(Class.name)
+			if (!tagName.includes('-')) // Browsers require that web components always have a dash in the name.
+				tagName += '-element';
+			customElements[define](tagName, Class)
+		}
+	},
 
 	/**
 	 * Get the value of an input as the most appropriate JavaScript type.
@@ -261,7 +234,7 @@ let Util = {
 
 	/**
 	 * Use an array as the value of a map, appending to it when we add.
-	 * Used by watch.js.
+	 * Used only by watch.js.
 	 * @param map {Map|WeakMap|Object}
 	 * @param key
 	 * @param value */
@@ -275,6 +248,11 @@ let Util = {
 			result.push(value);
 	},
 
+	saveOrphans(nodes) {
+		let fragment = Globals.doc.createDocumentFragment();
+		fragment.append(...nodes);
+	},
+
 	/**
 	 * Remove nodes from the beginning and end that are not:
 	 * 1.  Elements.
@@ -301,6 +279,12 @@ let Util = {
 	}
 };
 
+
+
+// Trick to prevent minifier from renaming these methods.
+let define = 'define';
+let getName = 'getName';
+
 export default Util;
 
 

package/src/assert.js

@@ -1,10 +1,10 @@
-//#IFDEV
+
 /*@__NO_SIDE_EFFECTS__*/
-export function assert(val) {
+export default function assert(val) {
+	//#IFDEV
 	if (!val) {
-		debugger;
+		//debugger;
 		throw new Error('Assertion failed: ' + val);
 	}
+	//#ENDIF
 }
-
-//#ENDIF

package/src/getArg.js

@@ -2,10 +2,11 @@ import Util from "./Util.js";
 
 
 /**
+ * @deprecated Inherit from Solarite and pass arribs to super() instead.
  * There are three ways to create an instance of a Solarite Component:
- * 1.  new ComponentName();                                         // direct class instantiation
- * 2.  this.html = r`<div><component-name></component-name></div>;  // as a child of another RedComponent.
- * 3.  <body><component-name></component-name></body>               // in the Document html.
+ * 1.  new ComponentName(3);                                               // direct class instantiation
+ * 2.  h(this)`<div><component-name user-id=${3}></component-name></div>;  // as a child of another Component.
+ * 3.  <body><component-name user-id="3"></component-name></body>          // in the Document html.
  *
  * When created via #3, Solarite has no way to pass attributes as arguments to the constructor.  So to make
  * sure we get the correct value via all three paths, we write our constructors according to the following
@@ -13,40 +14,38 @@ import Util from "./Util.js";
  * Browsers make all html attribute names lowercase.
  *
  * @example
- * constructor({name, userid=1}={}) {
+ * constructor({name, userId=1}={}) {
  *     super();
  *
  *     // Get value from "name" attriute if persent, otherwise from name constructor arg.
  *     this.name = getArg(this, 'name', name);
  *
  *     // Optionally convert the value to an integer.
- *     this.userId = getArg(this, 'userid', userid, ArgType.Int);
+ *     this.userId = getArg(this, 'user-id', userId, ArgType.Int);
  * }
  *
  * @param el {HTMLElement}
  * @param attributeName {string} Attribute name.  Not case-sensitive.
- * @param defaultValue {*} Default value to use if attribute doesn't exist.
+ * @param defaultValue {*} Default value to use if attribute doesn't exist.  Typically the argument from the constructor.
  * @param type {ArgType|function|Class|*[]}
  *     If an array, use the value if it's in the array, otherwise return undefined.
  *     If it's a function, pass the value to the function and return the result.
- * @param fallback {*} If the defaultValue is undefiend and type can't be parsed as the given type, use this value.
- *     TODO: Should this be merged with the defaultValue argument?
- * @return {*} Undefined if attribute isn't set.  */
-export function getArg(el, attributeName, defaultValue=undefined, type=ArgType.String, fallback=undefined) {
+ * @return {*} Undefined if attribute isn't set and there's no defaultValue, or if the value couldn't be parsed as the type.  */
+export function getArg(el, attributeName, defaultValue=undefined, type=ArgType.String) {
 	let val = defaultValue;
 	let attrVal = el.getAttribute(attributeName) || el.getAttribute(Util.camelToDashes(attributeName));
 	if (attrVal !== null) // If attribute doesn't exist.
 		val = attrVal;
-		
+
 	if (Array.isArray(type))
-		return type.includes(val) ? val : fallback;
-	
+		return type.includes(val) ? val : undefined;
+
 	if (typeof type === 'function') {
 		return type.constructor
 			? new type(val) // arg type is custom Class
 			: type(val); // arg type is custom function
 	}
-	
+
 	// If bool, it's true as long as it exists and its value isn't falsey.
 	if (type===ArgType.Bool) {
 		let lAttrVal = typeof val === 'string' ? val.toLowerCase() : val;
@@ -54,20 +53,17 @@ export function getArg(el, attributeName, defaultValue=undefined, type=ArgType.S
 			return false;
 		if (['true', true].includes(lAttrVal) || parseFloat(lAttrVal) !== 0)
 			return true;
-		return fallback;
+		return undefined;
 	}
-	
+
 	// Attribute doesn't exist
-	let result;
 	switch (type) {
 		case ArgType.Int:
-			result = parseInt(val);
-			return isNaN(result) ? fallback : result;
+			return parseInt(val);
 		case ArgType.Float:
-			result = parseFloat(val);
-			return isNaN(result) ? fallback : result;
+			return parseFloat(val);
 		case ArgType.String:
-			return [undefined, null, false].includes(val) ? '' : val+'';
+			return [undefined, null, false].includes(val) ? '' : (val+'');
 		case ArgType.Json:
 		case ArgType.Eval:
 			if (typeof val === 'string' && val.length)
@@ -89,6 +85,7 @@ export function getArg(el, attributeName, defaultValue=undefined, type=ArgType.S
 
 
 /**
+ * @deprecated for Solarite.getAttribs()
  * Experimental.  Set multiple arguments/attributes all at once.
  * @param el {HTMLElement}
  * @param args {Record<string, any>}
@@ -97,6 +94,10 @@ export function getArg(el, attributeName, defaultValue=undefined, type=ArgType.S
  * @example
  * constructor({user, path}={}) {
  *     setArgs(this, arguments[0], {user: User, path: ArgType.String});
+ *
+ *     // Equivalent to:
+ *     this.user = getArg(this, user, 'user', User); // or new User(user);
+ *     this.path = getArg(this, path, 'path', ArgType.String);
  * }
  */
 export function setArgs(el, args, types) {
@@ -106,15 +107,16 @@ export function setArgs(el, args, types) {
 
 
 /**
+ * @deprecated
  * @enum */
 var ArgType = {
-	
+
 	/**
 	 * false, 0, null, undefined, '0', and 'false' (case-insensitive) become false.
 	 * Anything else, including empty string becomes true.
 	 * Empty string is true because attributes with no value should be evaulated as true. */
 	Bool: 'Bool',
-	
+
 	Int: 'Int',
 	Float: 'Float',
 	String: 'String',

package/src/h.js

@@ -1,6 +1,7 @@
 import Template from "./Template.js";
 import Globals from "./Globals.js";
 import toEl from "./toEl.js";
+import Util from "./Util.js";
 
 /**
  * Convert strings to HTMLNodes.
@@ -8,7 +9,7 @@ import toEl from "./toEl.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 h()
  * 4. event binding
@@ -26,7 +27,7 @@ import toEl from "./toEl.js";
  *
  * 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(el, ?options)`<b>${'Hi'}</b>`   // typical path used in render(). Create template and render its nodes to el.
  *
  * Create top-level element
  * 5. h()`Hello<b>${'World'}!</b>`
@@ -34,10 +35,10 @@ import toEl from "./toEl.js";
  * 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) {
 
-	// 1. Tagged template
+	// 1. Tagged template: h`<div>...</div>`
 	if (Array.isArray(arguments[0])) {
 		return new Template(arguments[0], exprs);
 	}
@@ -55,11 +56,10 @@ export default function h(htmlStrings=undefined, ...exprs) {
 			return Template.fromJsx(tag, props, children);
 		}
 
-		// 2b. Plain html string => template
+		// 2b. Plain html string => template: h('<div>...</div>')
 		else {
 			let html = tagOrHtml;
-			// If it starts with whitespace, trim both ends.
-			// TODO: Also trim if it ends with whitespace?
+			// If it starts with whitespace and then a tag, trim it.
 			if (html.match(/^\s^</))
 				html = html.trim();
 			return new Template([html], []);
@@ -68,44 +68,43 @@ export default function h(htmlStrings=undefined, ...exprs) {
 
 	else if (arguments[0] instanceof HTMLElement || arguments[0] instanceof DocumentFragment) {
 
-		// 3. Render template to element.
+		// 3. Render template to element: h(el, template)
 		if (arguments[1] instanceof Template) {
 
 			/** @type Template */
 			let template = arguments[1];
 			let parent = arguments[0];
-			let options = arguments[2]; // deprecated?
+			let options = arguments[2];
 			template.render(parent, options);
 		}
 
-		// 4. Render tagged template to element
+		// 4. Render tagged template to element: h(el)`<div>...</div>`
 		else {
 			let parent = arguments[0], options = arguments[1];
 
-			// Remove shadowroot.  TODO: This could mess up paths?
+			// Remove shadowroot if present.  TODO: This could mess up paths?
 			if (parent.shadowRoot)
 				parent.innerHTML = '';
 
 			// Return a tagged template function that applies the tagged template to parent.
-			let taggedTemplate = (htmlStrings, ...exprs) => {
+			let renderTemplate = (htmlStrings, ...exprs) => {
 				Globals.rendered.add(parent)
 				let template = new Template(htmlStrings, exprs);
 				return template.render(parent, options);
 			}
-			return taggedTemplate;
+			return renderTemplate;
 		}
 	}
 
-	// 5. Create a static element  h()'<div></div>' (Deprecated?)
+	// 5. Create a static element: h()`<div></div>`
 	else if (!arguments.length) {
 		return (htmlStrings, ...exprs) => {
-				let template = h(htmlStrings, ...exprs);
-				return toEl(template); // Go to path 6.
-			}
+			let template = h(htmlStrings, ...exprs);
+			return toEl(template);
+		}
 	}
 
-	// 6. Help toEl() with objects.
-	// Special rebound render path, called by normal path.
+	// 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 arguments[0] === 'object' && Globals.objToEl.has(arguments[0])) {
@@ -121,7 +120,7 @@ export default function h(htmlStrings=undefined, ...exprs) {
 			Globals.objToEl.set(obj, el);
 		}
 
-		// h(this)`<div>...</div>
+		// h(this)`<div>...</div>`
 		else
 			return function(...args) {
 				let template = h(...args);
@@ -129,6 +128,10 @@ export default function h(htmlStrings=undefined, ...exprs) {
 				Globals.objToEl.set(obj, el);
 			}.bind(obj);
 	}
+	// TODO: Handle other primitive types?
+	else if (Util.isFalsy(arguments[0]))
+		return new Template();
+
 	else
 		throw new Error('h() does not support argument of type: ' + (arguments[0] ? typeof arguments[0] : arguments[0]))
 }