solarite 0.1.0 → 0.1.1

package/src/solarite/Shell.js

@@ -56,7 +56,7 @@ export default class Shell {
 
 			// Swap out Embedded Solarite Components with ${} attributes.
 			// Later, NodeGroup.render() will search for these and replace them with the real components.
-			// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
+			// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
 			if (context === htmlContext.Attribute) {
 
 				let lastIndex, lastMatch;
@@ -66,7 +66,7 @@ export default class Shell {
 				})
 
 				if (lastMatch) {
-					let newTagName = lastMatch + '-redcomponent-placeholder';
+					let newTagName = lastMatch + '-solarite-placeholder';
 					lastHtml = lastHtml.slice(0, lastIndex) + newTagName + lastHtml.slice(lastIndex + lastMatch.length);
 					componentNames[lastMatch] = newTagName
 				}
@@ -85,7 +85,7 @@ export default class Shell {
 		let template = document.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
 		let joinedHtml = buffer.join('');
 
-		// Replace '-redcomponent-placeholder' close tags.
+		// Replace '-solarite-placeholder' close tags.
 		// TODO: is there a better way?  What if the close tag is inside a comment?
 		for (let name in componentNames)
 			joinedHtml = joinedHtml.replaceAll(`</${name}>`, `</${componentNames[name]}>`);
@@ -210,8 +210,8 @@ export default class Shell {
 		}
 		toRemove.map(el => el.remove());
 
-		// Handle redcomponent-placeholder's.
-		// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
+		// Handle solarite-placeholder's.
+		// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
 		//if (componentNames.size)
 		//	this.components = [...this.fragment.querySelectorAll([...componentNames].join(','))]
 

package/src/solarite/Solarite.js

@@ -14,6 +14,9 @@ let Solarite = new Proxy(createSolarite(), {
 export {Solarite}
 export {default as r} from './r.js';
 export {getArg, ArgType} from './getArg.js';
+export {default as Template} from './Template.js';
 
-export {forEach, watchGet, watchSet} from './watch.js' // old, unfinished
-export {watch} from './watch2.js'; // unfinished
+
+//Experimental:
+//export {forEach, watchGet, watchSet} from './watch.js' // old, unfinished
+//export {watch} from './watch2.js'; // unfinished

package/src/solarite/Template.js

@@ -1,6 +1,7 @@
 import {assert} from "../util/Errors.js";
 import {getObjectId} from "./hash.js";
 import NodeGroupManager from "./NodeGroupManager.js";
+import NodeGroup from "./NodeGroup.js";
 
 
 /**
@@ -23,11 +24,11 @@ export default class Template {
 	/** Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
 	hashedFields;
 
-    /**
-     * @deprecated
-     * @type {ExprPath} Used with forEach() from watch.js
-   	 * Set in NodeGroup.applyOneExpr() */
-    parentPath;
+	/**
+    * @deprecated
+    * @type {ExprPath} Used with forEach() from watch.js
+	 * Set in ExprPath.apply() */
+	parentPath;
 	
 	/** @type {NodeGroup} */
 	nodeGroup;
@@ -71,11 +72,133 @@ export default class Template {
 		return this.hashedFields
 	}
 
-	toNode() {
-		let ngm = new NodeGroupManager();
-		return ngm.render(this);
+	/**
+	 * Render the main template, which may indirectly call renderTemplate() to create children.
+	 * @param el {HTMLElement}
+	 * @param options {RenderOptions}
+	 * @return {?DocumentFragment|HTMLElement} */
+	render(el=null, options={}) {
+
+		let ng;
+		if (!el) {
+			ng = new NodeGroup(this);
+			el = ng.getParentNode();
+		}
+
+		let ngm = NodeGroupManager.get(el);
+		if (ng)
+			ng.manager = ngm;
+
+		//#IFDEV
+		ngm.modifications = {
+			created: [],
+			updated: [],
+			moved: [],
+			deleted: []
+		};
+		//#ENDIF
+
+		ngm.options = options;
+		ngm.clearSubscribers = false; // Used for deprecated watch() path?
+		ngm.mutationWatcherEnabled = false;
+
+		// Fast path for empty component.
+		if (this.html?.length === 1 && !this.html[0]) {
+			el.innerHTML = '';
+		}
+		else {
+
+			// Find or create a NodeGroup for the template.
+			// This updates all nodes from the template.
+			let close;
+			let exact = ngm.getNodeGroup(this, true);
+			if (!exact) {
+				close = ngm.getNodeGroup(this, false);
+			}
+
+			let firstTime = !ngm.rootNg;
+			ngm.rootNg = exact || close;
+
+			// Reparent NodeGroup
+			// TODO: Move this to NodeGroup?
+			let parent = ngm.rootNg.getParentNode();
+
+
+			// If this is the first time rendering this element.
+			if (firstTime) {
+
+				// Save slot children
+				let fragment;
+				if (el.childNodes.length) {
+					fragment = document.createDocumentFragment();
+					fragment.append(...el.childNodes);
+				}
+
+				// Add rendered elements.
+				if (parent instanceof DocumentFragment)
+					el.append(parent);
+				else if (parent)
+					el.append(...parent.childNodes)
+
+				// Apply slot children
+				if (fragment) {
+					for (let slot of el.querySelectorAll('slot[name]')) {
+						let name = slot.getAttribute('name')
+						if (name)
+							slot.append(...fragment.querySelectorAll(`[slot='${name}']`))
+					}
+					let unamedSlot = el.querySelector('slot:not([name])')
+					if (unamedSlot)
+						unamedSlot.append(fragment)
+				}
+			}
+
+			ngm.rootEl = el;
+
+			// this.rootNg was rendered as childrenOnly=true
+			// Apply attributes from a root element to the real root element.
+			let ng = ngm.rootNg;
+			if (ng.pseudoRoot && ng.pseudoRoot !== el) {
+				/*#IFDEV*/assert(el)/*#ENDIF*/
+
+				// Remove old attributes
+				// for (let attrib of this.rootEl.attributes)
+				// 	if (attrib.name !== 'is' && attrib.name !== 'data-style' && !ng.pseudoRoot.hasAttribute(attrib.name))
+				// 		this.rootEl.removeAttribute(attrib.name)
+
+				// Add/set new attributes
+				if (firstTime)
+					for (let attrib of ng.pseudoRoot.attributes)
+						if (!el.hasAttribute(attrib.name))
+							el.setAttribute(attrib.name, attrib.value);
+
+				// ng.startNode = ng.endNode = this.rootEl;
+				// ng.nodesCache = [ng.startNode]
+				// for (let path of ng.paths) {
+				// 	if (path.nodeMarker === ng.rootEl)
+				// 		path.nodeMarker = this.rootEl;
+				// 	path.nodesCache = null;
+				// 	/*#IFDEV*/assert(path.nodeBefore !== ng.rootEl)/*#ENDIF*/
+				// }
+				//
+				// ng.rootEl = this.rootEl;
+			}
+
+			/*#IFDEV*/ngm.rootNg.verify();/*#ENDIF*/
+			ngm.reset(); // Mark all NodeGroups as available, for next render.
+			/*#IFDEV*/ngm.rootNg.verify();/*#ENDIF*/
+
+			window.ngm = ngm;
+		}
+
+		ngm.mutationWatcherEnabled = true;
+		return el;
+		//#IFDEV
+		//return ngm.modifications;
+		//#ENDIF
 	}
 
+
 	getCloseKey() {
 		// Use the joined html when debugging?
 		//return '@'+this.html.join('|')

package/src/solarite/createSolarite.js

@@ -1,12 +1,15 @@
 import Util from "../util/Util.js";
-import {assert} from "../util/Errors.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";
+
+
+//import {watchGet, watchSet} from "./watch.js";
+
 
 
 function defineClass(Class, tagName, extendsTag) {
@@ -39,9 +42,15 @@ let connected = new WeakSet();
  * 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.
+ * 5.  We have the onConnect, onFirstConnect, and onDisconnect methods.
+ *     Can't figure out how to have these work standalone though, and still be synchronous.
  * 6.  Can we extend from other element types like TR?
  *
+ * Advantages to inheriting from HTMLElement
+ * 1.  Minimization won't break when it renames the Class and we call customElements.define() on the wrong name.
+ * 2.  We can inherit from things like HTMLTableRowElement directly.
+ * 3.  There's less magic, since everyone is familiar with defining custom elements.
+ *
  * @param extendsTag {?string}
  * @return {Class} */
 export default function createSolarite(extendsTag=null) {
@@ -105,7 +114,7 @@ export default function createSolarite(extendsTag=null) {
 			if (ch)
 				(this.querySelector('slot') || this).append(...ch);
 
-
+			/** @deprecated */
 			Object.defineProperty(this, 'html', {
 				set(html) {
 					rendered.add(this);
@@ -155,7 +164,9 @@ export default function createSolarite(extendsTag=null) {
 			defineClass(this, tagName, extendsTag)
 		}
 
+		//#IFDEV
 
+		/** @deprecated */
 		renderWatched() {
 			let ngm = NodeGroupManager.get(this);
 
@@ -229,8 +240,7 @@ export default function createSolarite(extendsTag=null) {
 							// 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);
 
@@ -260,8 +270,10 @@ export default function createSolarite(extendsTag=null) {
 		/**
 		 * @deprecated Use the getArg() function instead. */
 		getArg(name, val=null, type=ArgType.String) {
+			throw new Error('deprecated');
 			return getArg(this, name, val, type);
 		}
+		//#ENDIF
 	}
 }
 

package/src/solarite/getArg.js

@@ -54,19 +54,19 @@ export function getArg(el, name, val=null, type=ArgType.String) {
 		case ArgType.Float:
 			return parseFloat(val);
 		case ArgType.String:
-			return val || '';
+			return [undefined, null, false].includes(val) ? '' : val+'';
 		case ArgType.JSON:
-			try {
-				return JSON.parse(val);
-			} catch (e) {
-				return val;
-			}
 		case ArgType.Eval:
-			try {
-				return eval(`(${val})`);
-			} catch (e) {
-				return val;
-			}
+			if (typeof val === 'string' && val.length)
+				try {
+					if (type === ArgType.JSON)
+						return JSON.parse(val);
+					else
+						return eval(`(${val})`);
+				} catch (e) {
+					return val;
+				}
+			else return val;
 		default:
 			return val;
 	}

package/src/solarite/hash.js

@@ -18,7 +18,7 @@ export function getObjectId(obj, prefix=null) {
 			prefix = 'Func';
 		else if (typeof obj === 'object')
 			prefix = 'Obj'
-		}
+	}
 	//#ENDIF
 	
 	prefix = prefix || '~\f';

package/src/solarite/r.js

@@ -24,10 +24,10 @@ import NodeGroupManager from "./NodeGroupManager.js";
  * 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.
+ * 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}
+ * @param exprs {*[]|string|Template|Object}
  * @return {Node|HTMLElement|Template} */
 export default function r(htmlStrings=undefined, ...exprs) {
 
@@ -41,9 +41,8 @@ export default function r(htmlStrings=undefined, ...exprs) {
 
         // 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);
+            template.render(parent, options);
 
             // Append on the first go.
             if (!parent.childNodes.length && this) {
@@ -62,15 +61,16 @@ export default function r(htmlStrings=undefined, ...exprs) {
             return (htmlStrings, ...exprs) => {
                 rendered.add(parent)
                 let template = r(htmlStrings, ...exprs);
-                let ngm = NodeGroupManager.get(parent);
-                return ngm.render(template, options);
+                return template.render(parent, options);
             }
         }
 
         // null for expr[0], remove whole element.
+           // This path never happens?
         else {
-            let ngm = NodeGroupManager.get(parent);
-            ngm.render(null, exprs[1])
+            throw new Error('unsupported');
+            //let ngm = NodeGroupManager.get(parent);
+            //ngm.render(null, exprs[1])
         }
     }
 
@@ -98,16 +98,16 @@ export default function r(htmlStrings=undefined, ...exprs) {
         return (htmlStrings, ...exprs) => {
             //rendered.add(parent)
             let template = r(htmlStrings, ...exprs);
-            return template.toNode();
+            return template.render();
         }
     }
 
     // 8.
     else if (htmlStrings instanceof Template) {
-        let ngm = new NodeGroupManager();
-        return ngm.render(htmlStrings);
+        return htmlStrings.render();
     }
 
+
     // 9. Create dynamic element with render() function.
     else if (typeof htmlStrings === 'function') {
         let getTemplate = htmlStrings;
@@ -116,17 +116,27 @@ export default function r(htmlStrings=undefined, ...exprs) {
         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);
+        let el = template.render();
 
+        // Create the render() function from the function we were given.
         el.render = (function() {
             template = getTemplate();
-            ngm.render(template)
+            template.render(el);
         }).bind(el);
 
+
+        // The second argument was an object of additional properties to add.
+        let props = exprs[0];
+        for (let name in props)
+            if (typeof props[name] === 'function')
+                el[name] = props[name].bind(el);
+            else
+                el[name] = props[name];
+
         return el;
     }
+
     else
         throw new Error('Unsupported arguments.')
 }

package/src/solarite/watch.js

@@ -136,7 +136,7 @@ export function forEach(arrayPath, callback) {
 	];
 
 	// We return a template that wraps the array
-	// So that NodeGroup.applyOneExpr can set the ExprPath and nextSibling on the template.
+	// So that ExprPath.apply() can set the ExprPath and nextSibling on the template.
 	// Then the 'insert' path in renderWatched() uses that data fora dding more nodes.
 	let result = new Template(['', ''], [newItems])
 

package/src/solarite/watch2.js

@@ -11,6 +11,7 @@ export {logGets, gets}
 
 let withinSet = 0;
 
+
 /**
  * Turn the props on obj into JavasCript properties that return Proxies when accessed.
  * If called more than once, return the already-converted object.
@@ -291,7 +292,7 @@ class ProxyHandler {
 			let obj2 = obj === this.root && this.props ? this.props : obj;
 			let result = Reflect.get(obj2, prop);
 
-			// This is read by watchFunction() which is called in NodeGroup.applyOneExpr().
+			// This is read by watchFunction() which is called in ExprPath.apply().
 			// It's used to see what variables contribute to an expression.
 			if (logGets)
 				gets.push([this.root, ...this.path, prop]);
@@ -392,7 +393,7 @@ function getProxy(obj, ph, path, path2) {
 
 /**
  * Call a function and record which watched variables it accesess, storing their paths in pathToTemplates.
- * Used by NodeGroup.applyOneExpr().
+ * Used by ExprPath.apply().
  * TODO: only allow this to be called once per callback.
  * @param callback {function}
  * @param ngm {NodeGroupManager}

package/src/solarite/watch3.js

@@ -0,0 +1,91 @@
+/**
+ * Trying to be able to automatically watch primitive values.
+ * TODO:
+ * 1.  Have get() return Proxies for nested updates.
+ * 2.  Override .map() for loops to capture changes.
+ */
+
+
+// Example:
+/*
+class WatchExample extends Solarite {
+
+	constructor(items = []) {
+		super();
+
+		this.items = items;
+		watch(this, 'items');
+
+		this.name = 'George';
+		watch(this, 'name');
+
+		this.render();
+	}
+
+	render() {
+		r(this)`
+		<watch-example>
+			${() => this.name + '!'}
+
+			${this.items.map(item => r`
+				<div>${item.name}</div>
+			`)}
+			${this.items.length}
+		</watch-example>`;
+	}
+}
+customElements.define('watch-example', WatchExample);
+
+let a = new WatchExample();
+
+// Items is a Proxy.
+// Calling push() will trigger the map'd ExprPaths to add another at the end.
+// And the .length expression to update.
+// Because accessing .items returns a proxy.
+a.items.push({name: 'Fred'});
+*/
+
+
+import Globals from "./Globals.js";
+import NodeGroupManager from "./NodeGroupManager.js";
+
+
+export default function watch3(root, path) {
+
+	/** @type {ExprPath} The ExprPath that's using this variable.*/
+	let exprPath;
+
+	/** @type {function} Function evaluated by the ExprPath. */
+	let exprFunction;
+
+	// Store internal value used by get/set.
+	let value = root[path];
+
+	let ngm = NodeGroupManager.get(root);
+
+	Object.defineProperty(root, path, {
+		get() {
+			// Track which ExprPath is using this variable.
+			if (Globals.currentExprPath)
+				[exprPath, exprFunction] = Globals.currentExprPath;
+
+			// TODO: Return Proxy for non-primitive value, to track path changed.
+			return value;
+		},
+		set(val) {
+			value = val;
+
+			if (exprFunction) {
+				let ng = exprPath.parentNg;
+
+				ng.applyExprs([exprFunction], [exprPath]);  // TODO: Will fail for attribute w/ a value having multiple ExprPaths.
+
+				// TODO: This doesn't cascade upward.
+				//ng.exactKey = getObjectHash(ng.template);
+
+				ngm.reset(); // TODO: This could be skipped if applyExprs() never marked them as in-use.
+
+			}
+		}
+	});
+}

package/src/unused/onConnect.js

@@ -0,0 +1,79 @@
+// TODO: Everything here fails because our own connectedCallback function is never called.
+// Perhaps b/c these callbacks must be defined before we register the custom element.
+
+
+/**
+ * @type {Map<HTMLElement, Set<function(HTMLElement)>>} */
+let connectCallbacks = new Map();
+/**
+ * @type {Map<HTMLElement, Set<function(HTMLElement)>>} */
+let firstConnectCallbacks = new Map();
+/**
+ * @type {Map<HTMLElement, Set<function(HTMLElement)>>} */
+let disconnectCallbacks = new Map();
+
+function getElCallbacks(el, map) {
+	let callbacks = connectCallbacks.get(el);
+	if (!callbacks) {
+		callbacks = new Set();
+		connectCallbacks.set(el, callbacks);
+	}
+	return callbacks;
+}
+
+let createConnectedCallback = el => () => {
+	debugger;
+	for (let cb of getElCallbacks(el, connectCallbacks))
+		cb();
+
+	let cbs = getElCallbacks(el, firstConnectCallbacks);
+	for (let cb of cbs) {
+		cb();
+		cbs.delete(cb);
+	}
+};
+
+
+/**
+ *
+ * @param el {HTMLElement}
+ * @param callback {function}
+ * @return {function()} A function that removes the callback. */
+export function onConnect(el, callback) {
+	let callbacks = getElCallbacks(el, connectCallbacks);
+	callbacks.add(callback);
+
+	if (!el.constructor.prototype.hasOwnProperty('connectedCallback'))
+		el.constructor.prototype.connectedCallback = createConnectedCallback(el);
+
+	return () => {
+		callbacks.delete(callback);
+	}
+}
+
+export function onFirstConnect(el, callback) {
+	let callbacks = getElCallbacks(el, firstConnectCallbacks);
+	callbacks.add(callback);
+
+	if (!el.hasOwnProperty('connectedCallback'))
+		el.connectedCallback = createConnectedCallback(el);
+
+	return () => {
+		callbacks.delete(callback);
+	}
+}
+
+export function onDisconnect(el, callback) {
+	let callbacks = getElCallbacks(el, disconnectCallbacks);
+	callbacks.add(callback);
+
+	if (!el.hasOwnProperty('connectedCallback'))
+		el.connectedCallback = () => {
+			for (let cb of callbacks)
+				cb();
+		}
+
+	return () => {
+		callbacks.delete(callback);
+	}
+}