solarite 0.2.4 → 0.3.0

package/src/solarite/{r.js → h.js}

@@ -1,11 +1,12 @@
 import Template from "./Template.js";
 import Util from "./Util.js";
 import Globals from "./Globals.js";
+import {assert} from "../util/Errors.js";
 
 /**
  * Convert strings to HTMLNodes.
- * Using r as a tag will always create a Template.
- * Using r() as a function() will always create a DOM element.
+ * Using h`...` as a tag will always create a Template.
+ * Using h() as a function() will always create a DOM element.
  *
  * Features beyond what standard js tagged template strings do:
  * 1. r`` sub-expressions
@@ -15,24 +16,25 @@ import Globals from "./Globals.js";
  * 5. TODO:  list more
  *
  * Currently supported:
- * 1. r(el, options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
- * 2. r(el, template, ?options)        // Render the Template created by #1 to element.
+ * 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. r`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
+ * 3. h`<b>Hello</b> ${'World'}!`      // Create Template that can later be used to create nodes.
  *
- * 4. r('Hello');                      // Create single text node.
- * 5. r('<b>Hello</b>');               // Create single HTMLElement
- * 6. r('<b>Hello</b><u>Goodbye</u>'); // Create document fragment because there's more than one node.
- * 7. r()`Hello<b>${'World'}!</b>`     // Same as 4-6, but evaluates the string as a Solarite template, which
+ * 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. r(template)                      // Render Template created by #1.
- *
- * 9. r({render(){...}})              // Pass an object with a render method, and optionally other props/methods.
+ * 8. h(template)                      // Render Template created by #1.
  *
+ * 9. h({render(){...}})               // Pass an object with a render method, and optionally other props/methods.
+ * 10. h(string, object, ...)          // JSX TODO
  * @param htmlStrings {?HTMLElement|string|string[]|function():Template|{render:function()}}
  * @param exprs {*[]|string|Template|Object}
  * @return {Node|HTMLElement|Template} */
-export default function r(htmlStrings=undefined, ...exprs) {
+export default function h(htmlStrings=undefined, ...exprs) {
+
 
 	// TODO: Make this a more flat if/else and call other functions for the logic.
 	if (htmlStrings instanceof Node) {
@@ -84,6 +86,23 @@ export default function r(htmlStrings=undefined, ...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 = [];
+
+			// 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?
+
+			assert(templateHtmlStrings.length === templateExprs.length+1);
+			return new Template(templateHtmlStrings, templateExprs);
+		}
+
+
 		// If it starts with a string, trim both ends.
 		// TODO: Also trim if it ends with whitespace?
 		if (htmlStrings.match(/^\s^</))
@@ -107,7 +126,7 @@ export default function r(htmlStrings=undefined, ...exprs) {
 	else if (htmlStrings === undefined) {
 		return (htmlStrings, ...exprs) => {
 			//Globals.rendered.add(parent)
-			let template = r(htmlStrings, ...exprs);
+			let template = h(htmlStrings, ...exprs);
 			return template.render();
 		}
 	}
@@ -119,13 +138,19 @@ export default function r(htmlStrings=undefined, ...exprs) {
 
 
 	// 9. Create dynamic element with render() function.
+	// TODO: This path doesn't handle embeds like data-id="..."
 	else if (typeof htmlStrings === 'object') {
 		let obj = htmlStrings;
 
+		if (obj.constructor.name !== 'Object') 
+			throw new Error(`Solarate Web Component class ${obj.constructor?.name} must extend HTMLElement.`);
+
+
 		// Special rebound render path, called by normal path.
+		// Intercepts the main r`...` function call inside render().
 		if (Globals.objToEl.has(obj)) {
 			return function(...args) {
-			   let template = r(...args);
+			   let template = h(...args);
 			   let el = template.render();
 				Globals.objToEl.set(obj, el);
 			}.bind(obj);
@@ -134,20 +159,33 @@ export default function r(htmlStrings=undefined, ...exprs) {
 		// Normal path
 		else {
 			Globals.objToEl.set(obj, null);
-			obj.render(); // Calls the Special rebound render path above, when the render function calls r(this)
+			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);
+					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.')
-}
+}
+
+// Trick to prevent minifier from renaming this function.
+let renderF = 'render';

package/src/solarite/hash.js

@@ -10,7 +10,7 @@ export function getObjectId(obj) {
 	
 	let result = objectIds.get(obj);
 	if (!result) { // convert to string, store in result, then add 1 to lastObjectId.
-		result = (lastObjectId++); // We use a unique prefix to ensure it doesn't collide w/ strings not from getObjectId()
+		result = '~\f' + (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;
@@ -29,14 +29,7 @@ function toJSON() {
 
 // Node.prototype.toJSON = toJSON;
 // Function.prototype.toJSON = toJSON;
-// 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()
-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;
-}
+
 
 /**
  * Get a string that uniquely maps to the values of the given object.
@@ -51,6 +44,16 @@ if (Node.prototype.toJSON !== toJSON) {
  * @param obj {*}
  * @returns {string} */
 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()
+	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 {