solarite 0.1.0

package/src/solarite/createSolarite.js

@@ -0,0 +1,267 @@
+import Util from "../util/Util.js";
+import {assert} from "../util/Errors.js";
+import delve from "../util/delve.js";
+import {getArg, ArgType} from "./getArg.js";
+import {getObjectHash} from "./hash.js";
+import NodeGroupManager from "./NodeGroupManager.js";
+import r, {rendered} from "./r.js";
+import {camelToDashes} from "./Util.js";
+import {watchGet, watchSet} from "./watch.js";
+
+
+function defineClass(Class, tagName, extendsTag) {
+	if (!customElements.getName(Class)) { // If not previously defined.
+		tagName = tagName || camelToDashes(Class.name)
+		if (!tagName.includes('-'))
+			tagName += '-element';
+
+		let options = null;
+		if (extendsTag)
+			options = {extends: extendsTag}
+
+		customElements.define(tagName, Class, options)
+	}
+}
+
+/**
+ * @type {Object<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
+let elementClasses = {};
+
+/**
+ * Store which instances of Solarite have already been added to the DOM. * @type {WeakSet<HTMLElement>}
+ */
+let connected = new WeakSet();
+
+/**
+ * Create a version of the Solarite class that extends from the given tag name.
+ * Reasons to inherit from this instead of HTMLElement.  None of these are all that useful.
+ * 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.  Child elements are added before constructor is called.  But they're also passed to the constructor.
+ * 4.  We can use this.html = r`...` to set html.
+ * 5.  We have the onConnect, onFirstConnect, and onDisconnect methods.  These could be standalone though.
+ * 6.  Can we extend from other element types like TR?
+ *
+ * @param extendsTag {?string}
+ * @return {Class} */
+export default function createSolarite(extendsTag=null) {
+
+	let BaseClass = HTMLElement;
+	if (extendsTag && !extendsTag.includes('-')) {
+		extendsTag = extendsTag.toLowerCase();
+
+		BaseClass = elementClasses[extendsTag];
+		if (!BaseClass) { // TODO: Use Cache
+			BaseClass = document.createElement(extendsTag).constructor;
+			elementClasses[extendsTag] = BaseClass
+		}
+	}
+
+	/**
+	 * Intercept the construct call to auto-define the class before the constructor is called.
+	 * @type {HTMLElement} */
+	let HTMLElementAutoDefine = new Proxy(BaseClass, {
+		construct(Parent, args, Class) {
+			defineClass(Class, null, extendsTag)
+
+			// This is a good place to manipulate any args before they're sent to the constructor.
+			// Such as loading them from attributes, if I could find a way to do so.
+
+			// This line is equivalent the to super() call.
+			return Reflect.construct(Parent, args, Class);
+		}
+	});
+
+	return class Solarite extends HTMLElementAutoDefine {
+		
+		
+		/**
+		 * TODO: Make these standalone functions.
+		 * Callbacks.
+		 * Use onConnect.push(() => ...); to add new callbacks. */
+		onConnect = Util.callback();
+		
+		onFirstConnect = Util.callback();
+		onDisconnect = Util.callback();
+
+		/**
+		 * @param options {RenderOptions} */
+		constructor(options={}) {
+			super();
+
+
+
+			// TODO: Is options.render ever used?
+			if (options.render===true)
+				this.render();
+
+			else if (options.render===false)
+				rendered.add(this); // Don't render on connectedCallback()
+
+			// Add children before constructor code executes.
+			// PendingChildren is setup in NodeGroup.createNewComponent()
+			// TODO: Match named slots.
+			let ch = NodeGroupManager.pendingChildren.pop();
+			if (ch)
+				(this.querySelector('slot') || this).append(...ch);
+
+
+			Object.defineProperty(this, 'html', {
+				set(html) {
+					rendered.add(this);
+					if (typeof html === 'string') {
+						console.warn("Assigning to this.html without the r template prefix.")
+						this.innerHTML = html;
+					}
+					else
+						this.modifications = r(this, html, options);
+				}
+			})
+
+			/*
+			let pthis = new Proxy(this, {
+				get(obj, prop) {
+					return Reflect.get(obj, prop)
+				}
+			});
+			this.render = this.render.bind(pthis);
+			*/
+		}
+
+		/**
+		 * Call render() only if it hasn't already been called.	 */
+		renderFirstTime() {
+			if (!rendered.has(this) && this.render)
+				this.render();
+		}
+		
+		/**
+		 * Called automatically by the browser. */
+		connectedCallback() {
+			this.renderFirstTime();
+			if (!connected.has(this)) {
+				connected.add(this);
+				this.onFirstConnect();
+			}
+			this.onConnect();
+		}
+		
+		disconnectedCallback() {
+			this.onDisconnect();
+		}
+
+
+		static define(tagName=null) {
+			defineClass(this, tagName, extendsTag)
+		}
+
+
+		renderWatched() {
+			let ngm = NodeGroupManager.get(this);
+
+			let nodeGroupUpdates = [];
+
+			for (let change of ngm.changes) {
+				if (change.action === 'set') {
+					for (let transformerInfo of change.transformerInfo) {
+
+						let oldHash = transformerInfo.hash;
+
+						let newObj = delve(watchSet(transformerInfo.path[0]), transformerInfo.path.slice(1));
+						let newTemplate = transformerInfo.transformer(newObj);
+						let newHash = getObjectHash(newTemplate);
+						let ngs = [...ngm.nodeGroupsAvailable.data[oldHash]];
+						for (let ng of ngs) {
+							nodeGroupUpdates.push([ng, oldHash, newHash, newTemplate.exprs, transformerInfo]);
+						}
+					}
+				}
+
+				else if (change.action === 'delete') {
+					for (let hash of change.value) {
+						let ngs = [...ngm.nodeGroupsAvailable.getAll(hash)]; // deletes from nodeGroupsAvailable.
+
+						for (let ng of ngs) {
+							if (ng.parentPath)
+								ng.parentPath.clearNodesCache();
+
+							for (let node of ng.getNodes())
+								node.remove();
+
+							// TODO: Update ancestor NodeGroup exactKeys
+						}
+					}
+				}
+				else if (change.action === 'insert') {
+
+					let beforeNg = change.beforeTemplate ? ngm.getNodeGroup(change.beforeTemplate, true) : null;
+					let arrayPath = [change.root, ...change.path];
+
+					// Get anchor so we can use it to get the parent
+					// TODO: Should this be watchGet(change.root) ?
+					for (let loopInfo of ngm.getLoopInfo([change.root, ...change.path.slice(0, -1)])) {
+
+						// Change.extra is aTemplate telling us where to insert before.
+						let beforeNode = beforeNg?.startNode || loopInfo.template.parentPath.nodeMarker;
+
+						// Loop over every item added to the array.
+						let i = 0; // TODO: How to get real insert index.
+						for (let obj of change.value) {
+
+							// Same logic as forEach() function.
+
+							let callback = loopInfo.itemTransformer;
+							let path = [...arrayPath.slice(0, -1), (arrayPath.at(-1) * 1 + i) + ''];
+
+							// Shortened logic found in watchGet(), but not any faster?
+							// the watchSet() is what makes this slower!
+							// let obj = delve(watchSet(path[0]), path.slice(1));
+							// let template = callback(obj);
+							// let serializedPath = serializePath(path);
+							// pathToTransformer.add(serializedPath, new TransformerInfo(path, callback, template)); // Uses a Set() to ensure no duplicates.
+
+							let template = watchGet(path, callback);
+							i++;
+
+
+							//let template = loopInfo.itemTransformer(obj); // What if it takes more than one obj argument?
+
+							// Create new NodeGroup
+							let ng = ngm.getNodeGroup(template, false, true);
+							ng.parentPath = beforeNg?.parentPath || loopInfo.template.parentPath;
+							/*#IFDEV*/
+							assert(ng.parentPath);/*#ENDIF*/
+							for (let node of ng.getNodes())
+								beforeNode.parentNode.insertBefore(node, beforeNode);
+
+							if (ng.parentPath) // This check is needed for the forEachSpliceInsert test, but why?
+								ng.parentPath.clearNodesCache();
+						}
+
+						// TODO: Update ancestor NodeGroup exactKeys
+					}
+				}
+			}
+
+			// Update them all at once, that way we can reassign the same value twice.
+			for (let [ng, oldHash, newHash, exprs, ti] of nodeGroupUpdates) {
+				ng.applyExprs(exprs);
+				ngm.nodeGroupsAvailable.data[oldHash].delete(ng);
+				ng.exactKey = ti.hash = newHash;
+				ngm.nodeGroupsAvailable.add(ng.exactKey, ng); // Add back to Map with new key.
+			}
+
+
+			ngm.changes = [];
+
+			return []; // TODO
+		}
+		
+		/**
+		 * @deprecated Use the getArg() function instead. */
+		getArg(name, val=null, type=ArgType.String) {
+			return getArg(this, name, val, type);
+		}
+	}
+}
+

package/src/solarite/getArg.js

@@ -0,0 +1,99 @@
+
+
+
+/**
+ * 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.
+ *
+ * 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
+ * example.  Note that constructor args are embedded in an object, and must be all lower-case because
+ * Browsers make all html attribute names lowercase.
+ *
+ * @example
+ * 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);
+ * }
+ *
+ * @param el {HTMLElement}
+ * @param name {string} Attribute name.  Not case-sensitive.
+ * @param val {*} Default value to use if attribute doesn't exist.
+ * @param type {ArgType|function|*[]}
+ *     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.
+ * @return {*} */
+export function getArg(el, name, val=null, type=ArgType.String) {
+	let attrVal = el.getAttribute(name);
+	if (attrVal !== null) // If attribute doesn't exist.
+		val = attrVal;
+		
+	if (Array.isArray(type))
+		return type.includes(val) ? val : undefined;
+	
+	if (typeof type === 'function')
+		return type(val);
+	
+	// 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;
+		return !['false', '0', false, 0, null, undefined].includes(lAttrVal);
+	}
+	
+	// Attribute doesn't exist
+	switch (type) {
+		case ArgType.Int:
+			return parseInt(val);
+		case ArgType.Float:
+			return parseFloat(val);
+		case ArgType.String:
+			return val || '';
+		case ArgType.JSON:
+			try {
+				return JSON.parse(val);
+			} catch (e) {
+				return val;
+			}
+		case ArgType.Eval:
+			try {
+				return eval(`(${val})`);
+			} catch (e) {
+				return val;
+			}
+		default:
+			return val;
+	}
+}
+
+/**
+ * @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',
+	
+	/**
+	 * Parse the string value as JSON.
+	 * If it's not parsable, return the value as a string. */
+	JSON: 'JSON',
+	
+	/**
+	 * Evaluate the string as JavaScript using the eval() function.
+	 * If it can't be evaluated, return the original string. */
+	Eval: 'Eval'
+}
+export {ArgType};

package/src/solarite/hash.js

@@ -0,0 +1,101 @@
+let lastObjectId = 1>>>0; // Is a 32-bit int faster to increment than JavaScript's Number, which is a 64-bit float?
+let objectIds = new WeakMap();
+
+/**
+ * @param obj {Object|string|Node}
+ * @param prefix
+ * @returns {string} */
+export function getObjectId(obj, prefix=null) {
+	
+	
+	
+	//#IFDEV
+	// Slower but useful for debugging:
+	if (!prefix) {
+		if (Array.isArray(obj))
+			prefix = 'Array';
+		else if (typeof obj === 'function')
+			prefix = 'Func';
+		else if (typeof obj === 'object')
+			prefix = 'Obj'
+		}
+	//#ENDIF
+	
+	prefix = prefix || '~\f';
+	
+	// if (typeof obj === 'function')
+	// 	return obj.toString();
+	
+	let result = objectIds.get(obj);
+	if (!result) { // convert to string, store in result, then add 1 to lastObjectId.
+		result = prefix+(lastObjectId++); // We use a unique prefix to ensure it doesn't collide w/ strings not from getObjectId()
+		objectIds.set(obj, result)
+	}
+	return result;
+}
+
+/**
+ * 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. */
+let isHashing = true;
+function toJSON() {
+	//return (isHashing && !Array.isArray(this)) ? getObjectId(this) : this
+	return isHashing ? getObjectId(this) : this
+}
+// Node.prototype.toJSON = toJSON;
+// Function.prototype.toJSON = toJSON;
+
+
+/**
+ * Get a string that uniquely maps to the values of the given object.
+ * If a value in obj changes, calling getObjectHash(obj) will then return a different hash.
+ * This is used by NodeGroupManager to create a hash that represents the current values of a NodeGroup.
+ *
+ * Relies on the Node and Function prototypes being overridden above.
+ *
+ * @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 {
+		result = JSON.stringify(obj);
+	}
+	catch(e){
+		result = getObjectHashCircular(obj);
+	}
+	isHashing = false;
+	return result;
+}
+
+/**
+ * Having this separate might help the optimzer for getObjectHash() ?
+ * @param obj
+ * @returns {string} */
+function getObjectHashCircular(obj) {
+
+	//console.log('circular')
+	// Slower version that handles circular references.
+	// Just adding any callback at all, even one that just returns the value, makes JSON.stringify() twice as slow.
+	const seen = new Set();
+	return JSON.stringify(obj, (key, value) => {
+		if (typeof value === 'object' && value !== null) {
+			if (seen.has(value))
+				return getObjectId(value);
+			seen.add(value);
+		}
+		return value;
+	});
+}

package/src/solarite/r.js

@@ -0,0 +1,143 @@
+import Template from "./Template.js";
+import NodeGroupManager from "./NodeGroupManager.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.
+ *
+ * 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()
+ * 4. event binding
+ * 5. TODO:  list more
+ *
+ * Currently supported:
+ * 1. r`<b>Hello${'World'}!`           // Create Template that can later be used to create nodes.
+ *
+ * 2. r(el, template, ?options)        // Render the template created by #1 to element.
+ * 3. r(el, options)`<b>${'Hi'}</b>`   // Create template and render its nodes to el.
+ *
+ * 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 includes properly handling nested components and r`` sub-expressions.
+ * 8. r(template)                      // Render Template created by #1.
+ * 9. r(() => r`<b>Hello</b>`);        // Create dynamic element that has a render() function.
+ *
+ * @param htmlStrings {?HTMLElement|string|string[]|function():Template}
+ * @param exprs {*[]|string|Template}
+ * @return {Node|HTMLElement|Template} */
+export default function r(htmlStrings=undefined, ...exprs) {
+
+    // 1. Path if used as a template tag.
+    if (Array.isArray(htmlStrings)) {
+        return new Template(htmlStrings, exprs);
+    }
+
+    else if (htmlStrings instanceof Node) {
+        let parent = htmlStrings, template = exprs[0];
+
+        // 2. Render template created by #4 to element.
+        if (exprs[0] instanceof Template) {
+            let ngm = NodeGroupManager.get(parent);
+            let options = exprs[1];
+            ngm.render(template, options);
+
+            // Append on the first go.
+            if (!parent.childNodes.length && this) {
+                // TODO: Is htis ever executed?
+                debugger;
+                parent.append(this.rootNg.getParentNode());
+            }
+        }
+
+        // 3
+        else if (!exprs.length || exprs[0]) {
+            if (parent.shadowRoot)
+                parent.innerHTML = ''; // Remove shadowroot.  TODO: This could mess up paths?
+
+            let options = exprs[0];
+            return (htmlStrings, ...exprs) => {
+                rendered.add(parent)
+                let template = r(htmlStrings, ...exprs);
+                let ngm = NodeGroupManager.get(parent);
+                return ngm.render(template, options);
+            }
+        }
+
+        // null for expr[0], remove whole element.
+        else {
+            let ngm = NodeGroupManager.get(parent);
+            ngm.render(null, exprs[1])
+        }
+    }
+
+    else if (typeof htmlStrings === 'string' || htmlStrings instanceof String) {
+        // 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.
+        if (templateEl.content.childNodes.length === 1)
+            return templateEl.content.firstChild;
+
+        // 6. Otherwise return DocumentFragment.
+        return templateEl.content;
+    }
+
+    // 7. Create a static element
+    else if (htmlStrings === undefined) {
+        return (htmlStrings, ...exprs) => {
+            //rendered.add(parent)
+            let template = r(htmlStrings, ...exprs);
+            return template.toNode();
+        }
+    }
+
+    // 8.
+    else if (htmlStrings instanceof Template) {
+        let ngm = new NodeGroupManager();
+        return ngm.render(htmlStrings);
+    }
+
+    // 9. Create dynamic element with render() function.
+    else if (typeof htmlStrings === 'function') {
+        let getTemplate = htmlStrings;
+        let template = getTemplate();
+
+        if (typeof template === 'string')
+            throw new Error(`Please add the "r" prefix before the string "${template}"`)
+
+        let ngm = new NodeGroupManager();
+        template.replaceMode = true;
+        let el = ngm.render(template);
+
+        el.render = (function() {
+            template = getTemplate();
+            ngm.render(template)
+        }).bind(el);
+
+        return el;
+    }
+    else
+        throw new Error('Unsupported arguments.')
+}
+
+
+
+
+
+
+/**
+ * Elements that have been rendered to by r() at least once.
+ * @type {WeakSet<HTMLElement>} */
+let rendered = new WeakSet();
+export {rendered}