solarite 0.1.1 → 0.2.0

package/src/{solarite → unused}/NodeGroupManager.js

@@ -1,23 +1,12 @@
 import MultiValueMap from "./MultiValueMap.js";
 import NodeGroup from "./NodeGroup.js";
 import {getObjectHash} from "./hash.js";
-import {serializePath} from "./watch.js";
 
 import {assert} from "../util/Errors.js";
+import Globals from "./Globals.js";
+import Template from "./Template.js";
 
 
-/**
- * @typedef {Object} RenderOptions
- * @property {boolean=} styles - Indicates whether the Courage component is present.
- * @property {boolean=} scripts - Indicates whether the Power component is present.
- * @property {boolean=} ids *
- * @property {?boolean} render
- * 	   Used only when options are given to a class super constructor inheriting from Solarite.
- *     True to call render() immediately in super constructor.
- *     False to automatically call render() at all.
- *     Undefined (default) to call render() when added to the DOM, unless already rendered.
- */
-
 
 /**
  * Manage all the NodeGroups for a single WebComponent or root HTMLElement
@@ -25,7 +14,7 @@ import {assert} from "../util/Errors.js";
  * And each NodeGroup manages the one or more nodes created by the expression.
  *
  * An instance of this class exists for each element that r() renders to. */
-export default class NodeGroupManager {
+class NodeGroupManager {
 
 	/** @type {HTMLElement|DocumentFragment} */
 	rootEl;
@@ -46,13 +35,17 @@ export default class NodeGroupManager {
 	/**
 	 * A map from the html strings and exprs that created a node group, to the NodeGroup.
 	 * Also stores a map from just the html strings to the NodeGroup, so we can still find a similar match if the exprs changed.
-	 *
 	 * @type {MultiValueMap<string, (string|Template)[], NodeGroup>} */
 	nodeGroupsAvailable = new MultiValueMap();
+
+	/**
+	 * Save the NodeGroups that are returned by NodeGroupManager.get()
+	 * Calling reset() at the end of render puts them all back into nodeGroupsAvailable.
+	 * @type {NodeGroup[]} */
 	nodeGroupsInUse = [];
 
 
-	/** @type {RenderOptions} */
+	/** @type {RenderOptions} TODO: Where is this ever used? */
 	options = {};
 
 	
@@ -65,17 +58,19 @@ export default class NodeGroupManager {
 	 * @param rootEl {HTMLElement|DocumentFragment} If not specified, the first element of the html will be the rootEl. */
 	constructor(rootEl=null) {
 		this.rootEl = rootEl;
+		this.resetModifications();
 
 		/*
 		//#IFDEV
-		
+
+		// Use MutationWatcher to check for illegal DOM modifications.
 		function closestCustomElement(node) {
 			do {
 				if (node.tagName && node.tagName.includes('-'))
 					return node;
 			} while (node = node.parentNode);
 		}
-		
+
 		// TODO: Only trigger if we modify nodes inside an ExprPath.
 		// TODO: Enable this even when not in dev mode, because it's so useful for debugging?
 		// But it modifies the top level prototypes.
@@ -147,9 +142,10 @@ export default class NodeGroupManager {
 					if (!ng2.inUse) {
 						ng2.inUse = true;
 						let success = this.nodeGroupsAvailable.delete(ng2.exactKey, ng2);
-						// assert(success);
+						assert(success);
+
 						let success2 = this.nodeGroupsAvailable.delete(ng2.closeKey, ng2);
-						// assert(success);
+						assert(success2);
 						/*#IFDEV*/assert(success === success2)/*#ENDIF*/
 
 						// console.log(getHtml(ng2))
@@ -163,8 +159,10 @@ export default class NodeGroupManager {
 			// Recurse to mark all child NodeGroups as in-use.
 			for (let path of ng.paths)
 				for (let childNg of path.nodeGroups) {
-					if (!childNg.inUse)
+					if (!childNg.inUse) {
 						this.findAndDeleteExact(childNg.exactKey, false, childNg);
+					//	this.findAndDeleteClose(childNg.closeKey, childNg.exactKey, false);
+					}
 					childNg.inUse = true;
 				}
 			
@@ -189,6 +187,7 @@ export default class NodeGroupManager {
 		if (ng) {
 			
 			// We matched on a new key, so delete the old exactKey.
+			/*#IFDEV*/assert(ng.exactKey);/*#ENDIF*/
 			let exactNg = this.nodeGroupsAvailable.delete(ng.exactKey, ng);
 			
 			/*#IFDEV*/assert(exactNg);/*#ENDIF*/
@@ -203,10 +202,12 @@ export default class NodeGroupManager {
 				while (ng2 = ng2?.parentPath?.parentNg) {
 					if (!ng2.inUse) {
 						ng2.inUse = true; // Might speed it up slightly?
+						/*#IFDEV*/assert(ng2.exactKey);/*#ENDIF*/
 						let success = this.nodeGroupsAvailable.delete(ng2.exactKey, ng2);
 						/*#IFDEV*/assert(success);/*#ENDIF*/
 
-						// But it can still be a close match, so we don't use this code.
+						// But it can still be a close match, so we remove it there too.
+						/*#IFDEV*/assert(ng2.closeKey);/*#ENDIF*/
 						success = this.nodeGroupsAvailable.delete(ng2.closeKey, ng2);
 						/*#IFDEV*/assert(success);/*#ENDIF*/
 
@@ -244,59 +245,49 @@ export default class NodeGroupManager {
 	 * Get an existing or create a new NodeGroup that matches the template,
 	 * but don't reparent it if it's somewhere else.
 	 * @param template {Template}
-	 * @param exact {?boolean}
-	 * @param createForWatch Deprecated.
+	 * @param exact {?boolean} If true, only get a NodeGroup if it matches both the template
+	 * @param replaceMode {?boolean} If true, use the template to replace an existing element, instead of appending children to it.
 	 * @return {?NodeGroup} */
-	getNodeGroup(template, exact=null, createForWatch=false) {
-
-		let exactKey = getObjectHash(template)
+	getNodeGroup(template, exact=null, replaceMode=null, exactKey=null) {
+		exactKey = exactKey || getObjectHash(template);
 
-		/*#IFDEV*/if(NodeGroupManager.logEnabled) this.log(`Looking for ${exact ? 'exact' : 'close'} match: ` + template.debug)/*#ENDIF*/
+		/*#IFDEV*/if(logEnabled) this.log(`Looking for ${exact ? 'exact' : 'close'} match: ` + template.debug)/*#ENDIF*/
 
 		// 1. Try to find an exact match.
-		let ng;
-		if (exact === true) {
-			ng = this.findAndDeleteExact(exactKey);
-
-			if (!ng) {
-				/*#IFDEV*/this.log(`Not found.`)/*#ENDIF*/
-				return null;
-			}
-			/*#IFDEV*/if(NodeGroupManager.logEnabled) this.log(`Found exact: ` + ng.debug)/*#ENDIF*/
+		let ng = this.findAndDeleteExact(exactKey);
+		if (exact && !ng) {
+			/*#IFDEV*/this.log(`Not found.`)/*#ENDIF*/
+			return null;
 		}
+		/*#IFDEV*/if (logEnabled) this.log(`Found exact: ` + ng.debug);/*#ENDIF*/
 
 		// 2.  Try to find a close match.
-		else {
+		if (!ng) {
 			// We don't need to delete the exact match bc it's already been deleted in the prev pass.
 			let closeKey = template.getCloseKey();
-			ng = createForWatch ? null : this.findAndDeleteClose(closeKey, exactKey);
+			ng = this.findAndDeleteClose(closeKey, exactKey);
 
 			// 2. Update expression values if they've changed.
 			if (ng) {
-				
-				// Temporary for debugging:
-				if (window.debug && !window.ng)
-					window.ng = ng;
-
-				/*#IFDEV*/if(NodeGroupManager.logEnabled) this.log(`Found close: ` + closeKey + '   ' + ng.debug)/*#ENDIF*/
+				/*#IFDEV*/if (logEnabled) this.log(`Found close: ` + closeKey + '   ' + ng.debug);/*#ENDIF*/
 				/*#IFDEV*/this.incrementLogDepth(1);/*#ENDIF*/
 				/*#IFDEV*/ng.verify();/*#ENDIF*/
+
 				ng.applyExprs(template.exprs);
 
-				/*#IFDEV*/ng.verify()/*#ENDIF*/
+				/*#IFDEV*/ng.verify();/*#ENDIF*/
 				/*#IFDEV*/this.incrementLogDepth(-1);/*#ENDIF*/
-				/*#IFDEV*/if(NodeGroupManager.logEnabled) this.log(`Updated close to: ` + ng.debug)/*#ENDIF*/
+				/*#IFDEV*/if (logEnabled) this.log(`Updated close to: ` + ng.debug);/*#ENDIF*/
 			}
 
 			// 3. Or if not found, create a new NodeGroup
 			else {
 				/*#IFDEV*/this.incrementLogDepth(1);/*#ENDIF*/
-				ng = new NodeGroup(template, this);
-				/*#IFDEV*/this.incrementLogDepth(-1);/*#ENDIF*/
 
-				//#IFDEV
-				this.modifications.created.push(...ng.getNodes())
-				//#ENDIF
+				ng = new NodeGroup(template, this, replaceMode, exactKey, closeKey);
+
+				/*#IFDEV*/this.incrementLogDepth(-1);/*#ENDIF*/
+				/*#IFDEV*/this.modifications.created.push(...ng.getNodes())/*#ENDIF*/
 
 
 				// 4. Mark NodeGroup as being in-use.
@@ -305,12 +296,9 @@ export default class NodeGroupManager {
 				// Perhaps also result could cache its last exprKey and then we'd use only one map?
 				ng.exactKey = exactKey;
 				ng.closeKey = closeKey;
-				if (createForWatch)
-					this.nodeGroupsAvailable.add(ng.exactKey, ng);
-				else
-					this.nodeGroupsInUse.push(ng)
+				this.nodeGroupsInUse.push(ng)
 
-				/*#IFDEV*/if(NodeGroupManager.logEnabled) this.log(`Created new ` + ng.debug)/*#ENDIF*/
+				/*#IFDEV*/if (logEnabled) this.log(`Created new ` + ng.debug)/*#ENDIF*/
 			}
 		}
 		
@@ -328,7 +316,13 @@ export default class NodeGroupManager {
 		return ng;
 	}
 
+	/**
+	 * Move everything in nodeGroupsInUse to nodeGroupsAvailable.
+	 * This is called after the NodeGroup has finished rendering. */
 	reset() {
+
+		/*#IFDEV*/this.rootNg.verify();/*#ENDIF*/
+
 		//this.changes = [];
 		let available = this.nodeGroupsAvailable
 		for (let ng of this.nodeGroupsInUse) {
@@ -343,61 +337,41 @@ export default class NodeGroupManager {
 
 		/*#IFDEV*/this.log('----------------------')/*#ENDIF*/
 		// TODO: free the memory from any nodeGroupsAvailable() after render is done, since they weren't used?
-	}
 
 
-	// deprecated
-	//pathToLoopInfo = new MultiValueMap(); // uses a Set() for each value.
-	clearSubscribers = false;
-
-	//#IFDEV
-
-	/**
-	 * @deprecated - part of watch.js (Watch v1)
-	 * One path may be used to loop in more than one place, so we use this to get every anchor from each loop.
-	 * @param path {Array}
-	 * @return {LoopInfo[]} A function that gets the loop anchor NodeGroup */
-	getLoopInfo(path) {
-		let serializedArrayPath = serializePath(path);
-		return [...this.pathToLoopInfo.getAll(serializedArrayPath)]; // This is set inside forEach()
+		/*#IFDEV*/this.rootNg.verify();/*#ENDIF*/
 	}
 
-	//#ENDIF
-
-	
-	/**
-	 * @deprecated
-	 * Store the functions used to create items for each loop.
-	 * TODO: Can this be combined with pathToTemplates?
-	 * @type {MultiValueMap<string, Subscriber>} */
-	pathToLoopInfo = new MultiValueMap();
-	
-	/**
-	 * Maps variable paths to the templates used to create NodeGroups
-	 * @type {MultiValueMap<string, Subscriber>} */
-	subscribers = new MultiValueMap();
-	
-	clearSubscribersIfNeeded() {
-		if (this.clearSubscribers) {
-			this.pathToLoopInfo = new MultiValueMap();
-			this.subscribers = new MultiValueMap();
-			this.clearSubscribers = false;
-		}
+	resetModifications() {
+		this.modifications = {
+			created: [],
+			updated: [],
+			moved: [],
+			deleted: []
+		};
 	}
-	
 
 	/**
-	 * Get the NodeGroupManager for a Web Component.
-	 * @param rootEl {Solarite|HTMLElement}
+	 * Get the NodeGroupManager for a Web Component, given either its root element or its Template.
+	 * If given a Template, create a new NodeGroup.
+	 * Using a Template is typically used when creating a standalone component.
+	 * @param rootEl {Solarite|HTMLElement|Template}
 	 * @return {NodeGroupManager} */
 	static get(rootEl=null) {
-		if (!rootEl)
-			return new NodeGroupManager();
+		let ngm;
+		if (rootEl instanceof Template) {
+			ngm = new NodeGroupManager();
+			ngm.rootNg = ngm.getNodeGroup(rootEl, false);
+			let el = ngm.rootNg.getRootNode();
+			Globals.nodeGroupManagers.set(el, ngm);
+		}
+		else {
 
-		let ngm = nodeGroupManagers.get(rootEl);
-		if (!ngm) {
-			ngm = new NodeGroupManager(rootEl);
-			nodeGroupManagers.set(rootEl, ngm);
+			ngm = Globals.nodeGroupManagers.get(rootEl);
+			if (!ngm) {
+				ngm = new NodeGroupManager(rootEl);
+				Globals.nodeGroupManagers.set(rootEl, ngm);
+			}
 		}
 
 		return ngm;
@@ -405,13 +379,13 @@ export default class NodeGroupManager {
 
 
 	//#IFDEV
-	static logEnabled = false;
+
 	incrementLogDepth(level) {
 		this.logDepth += level;
 	}
 	log(msg, level=0) {
 		this.logDepth += level;
-		if (NodeGroupManager.logEnabled) {
+		if (logEnabled) {
 			let indent = '	'.repeat(this.logDepth);
 			console.log(indent + msg);
 		}
@@ -457,11 +431,9 @@ export default class NodeGroupManager {
 
 NodeGroupManager.pendingChildren = [];
 
-/**
- * Each Element that has Expr children has an associated NodeGroupManager here.
- * @type {WeakMap<HTMLElement, NodeGroupManager>} */
-let nodeGroupManagers = new WeakMap();
-
+//#IFDEV
+let logEnabled = false // Prevent rollup's static analyzer from removing this.
+//#ENDIF
 
 
 export class LoopInfo {

package/src/{solarite → unused}/watch.js

@@ -5,7 +5,7 @@ import {assert} from "../util/Errors.js";
 import delve from "../util/delve.js";
 import {getObjectHash, getObjectId} from "./hash.js";
 import MultiValueMap from "./MultiValueMap.js";
-import NodeGroupManager, {LoopInfo} from "./NodeGroupManager.js";
+//import NodeGroupManager, {LoopInfo} from "./NodeGroupManager.js";
 import Template from "./Template.js";
 
 

package/src/{solarite → unused}/watch2.js

@@ -1,6 +1,6 @@
 import {assert} from "../util/Errors.js";
 import {getObjectId} from "./hash.js";
-import NodeGroupManager from "./NodeGroupManager.js";
+//import NodeGroupManager from "./NodeGroupManager.js";
 import Template from "./Template.js";
 import {serializePath} from "./watch.js";
 import delve from "../util/delve.js";
@@ -113,7 +113,6 @@ class ProxyHandler {
 		else if (prop === 'map' && Array.isArray(obj)) {
 			
 			let ngm = NodeGroupManager.get(this.root);
-			ngm.clearSubscribersIfNeeded();
 			
 			return callback => {
 				let loopInfo;

package/src/{solarite → util}/MultiValueMap.js

@@ -14,6 +14,12 @@ export default class MultiValueMap {
 		set.add(value);
 	}
 
+	isEmpty() {
+		for (let key in this.data)
+			return true;
+		return false;
+	}
+
 	// Get all values for a key
 	getAll(key) {
 		return this.data[key] || [];
@@ -27,9 +33,9 @@ export default class MultiValueMap {
 	delete(key, val=undefined) {
 		// if (key === '["Html2",[[["Html3",["F1","A"]],["Html3",["F1","B"]]]]]')
 		// 	debugger;
-			
+
 		let data = this.data;
-		// The partialUpdate benchmark shows having this check first makes the function slightly faster.
+
 		// if (!data.hasOwnProperty(key))
 		// 	return undefined;
 
@@ -37,24 +43,25 @@ export default class MultiValueMap {
 		let result;
 		let set = data[key];
 		if (!set) // slower than pre-check.
-		 	return undefined;
+			return undefined;
 
-		if (val !== undefined) {
-			set.delete(val);
-			result = val;
+		// Delete any value.
+		if (val === undefined) {
+			//result = set.values().next().value; // get first item from set.
+			[result] = set; // Does the same as above and seems to be about the same speed.
+			set.delete(result);
 		}
 
-		// Delete any value.
+		// Delete a specific value.
 		else {
-			result = set.values().next().value;
-			// [result] = set; // Does the same as above. is about the same speed?
-			set.delete(result);
+			set.delete(val);
+			result = val;
 		}
 
 		// TODO: Will this make it slower?
 		if (set.size === 0)
 			delete data[key];
-		
+
 		return result;
 	}
 

package/src/util/WeakArray.js

@@ -0,0 +1,33 @@
+export default class WeakArray {
+	constructor() {
+		this.items = [];
+	}
+
+	push(...items) {
+		for (let item of items) {
+			if (typeof item === 'object' && item)
+				this.items.push(new WeakRef(item));
+			else
+				throw new TypeError("Only objects can be added to a WeakArray");
+		}
+	}
+
+	get(index) {
+		const ref = this.items[index];
+		if (ref)
+			return ref.deref();
+		return undefined;
+	}
+
+	cleanup() {
+		this.items = this.items.filter(ref => ref.deref() !== undefined);
+	}
+
+	*[Symbol.iterator]() {
+		for (const ref of this.items) {
+			const value = ref.deref();
+			if (value !== undefined)
+				yield value;
+		}
+	}
+}