solarite 0.2.2 → 0.2.4

package/src/unused/NodeGroupManager.js

@@ -1,444 +0,0 @@
-import MultiValueMap from "./MultiValueMap.js";
-import NodeGroup from "./NodeGroup.js";
-import {getObjectHash} from "./hash.js";
-
-import {assert} from "../util/Errors.js";
-import Globals from "./Globals.js";
-import Template from "./Template.js";
-
-
-
-/**
- * Manage all the NodeGroups for a single WebComponent or root HTMLElement
- * There's one NodeGroup for the root of the WebComponent, and one for every ${...} expression that creates Node children.
- * 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. */
-class NodeGroupManager {
-
-	/** @type {HTMLElement|DocumentFragment} */
-	rootEl;
-
-	/** @type {NodeGroup} */
-	rootNg;
-	
-	/** @type {Change[]} */
-	changes = [];
-	
-	
-
-	//#IFDEV
-	modifications;
-	logDepth=0
-	//#ENDIF
-
-	/**
-	 * 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} TODO: Where is this ever used? */
-	options = {};
-
-	
-	//#IFDEV
-	mutationWatcher;
-	mutationWatcherEnabled = true;
-	//#ENDIF
-
-	/**
-	 * @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.
-		// TODO: Remove the onBeforeMutation callback when this.rootEl is not in the document.
-		// Because we won't get notified of document changes then anyway.
-		if (this.rootEl && this.rootEl.ownerDocument?.defaultView) { // TODO: Bind whenever we have rootEl.
-			this.mutationWatcher = MutationWatcher.getFromDocument(this.rootEl.ownerDocument);
-			this.mutationWatcher.onBeforeMutation.push((node, action, args) => {
-				
-				// If a modification was made
-				if (this.mutationWatcherEnabled) {
-					if (this.rootEl.contains(node) && closestCustomElement(node) === this.rootEl) {
-						//console.log(node, action, args);
-						//throw new Error('DOM modification');
-					}
-					
-					// If another DOM node steals one of ours by adding it to itself.
-					// TODO: append can use multiple arguments.
-					if (['insertBefore', 'append', 'appendChild'].includes(action)
-						&& this.rootEl.contains(args[0]) && closestCustomElement(args[0]) === this.rootEl) {
-						
-						//console.log(node, action, args);
-						//throw new Error('Another element attempted to steal one of our nodes.');
-					}
-				}
-			});
-		}
-		//#ENDIF
-		*/
-	}
-
-
-	/**
-	 *
-	 * 1.  Delete a NodeGroup from this.nodeGroupsAvailable that matches this exactKey.
-	 * 2.  Then delete all of that NodeGroup's parents' exactKey entries
-	 *     We don't move them to in-use because we plucked the NodeGroup from them, they no longer match their exactKeys.
-	 * 3.  Then we move all the NodeGroup's exact+close keyed children to inUse because we don't want future calls
-	 *     to getNodeGroup() to borrow the children now that the whole NodeGroup is in-use.
-	 *
-	 * TODO: Have NodeGroups keep track of whether they're inUse.
-	 * That way when we go up or down we don't have to remove those with .inUse===true
-	 *
-	 * @param exactKey
-	 * @param goUp
-	 * @param child
-	 * @returns {?NodeGroup} */
-	findAndDeleteExact(exactKey, goUp=true, child=undefined) {
-
-		let ng = this.nodeGroupsAvailable.delete(exactKey, child);
-		if (ng) {
-			/*#IFDEV*/assert(ng.exactKey === exactKey);/*#ENDIF*/
-			
-			// Mark close-key version as in-use.
-			let closeNg = this.nodeGroupsAvailable.delete(ng.closeKey, ng);
-			/*#IFDEV*/assert(closeNg);/*#ENDIF*/
-
-			// Mark our self as in-use.
-			this.nodeGroupsInUse.push(ng)
-
-			ng.inUse = true;
-			closeNg.inUse = true;
-
-			// Mark all parents that have this NodeGroup as a child as in-use.
-			// So that way we don't use this parent again
-			if (goUp) {
-				let ng2 = ng;
-				while (ng2 = ng2?.parentPath?.parentNg) {
-					if (!ng2.inUse) {
-						ng2.inUse = true;
-						let success = this.nodeGroupsAvailable.delete(ng2.exactKey, ng2);
-						assert(success);
-
-						let success2 = this.nodeGroupsAvailable.delete(ng2.closeKey, ng2);
-						assert(success2);
-						/*#IFDEV*/assert(success === success2)/*#ENDIF*/
-
-						// console.log(getHtml(ng2))
-						if (success) {
-							this.nodeGroupsInUse.push(ng2)
-						}
-					}
-				}
-			}
-
-			// Recurse to mark all child NodeGroups as in-use.
-			for (let path of ng.paths)
-				for (let childNg of path.nodeGroups) {
-					if (!childNg.inUse) {
-						this.findAndDeleteExact(childNg.exactKey, false, childNg);
-					//	this.findAndDeleteClose(childNg.closeKey, childNg.exactKey, false);
-					}
-					childNg.inUse = true;
-				}
-			
-			if (ng.parentPath) {
-				//ng.parentPath.clearNodesCache();
-				// ng.parentPath = null;
-				//ng.parentPath.removeNodeGroup(ng);
-			}
-
-			return ng;
-		}
-		return null;
-	}
-	
-	/**
-	 * @param closeKey {string}
-	 * @param exactKey {string}
-	 * @param goUp {boolean}
-	 * @returns {NodeGroup} */
-	findAndDeleteClose(closeKey, exactKey, goUp=true) {
-		let ng = this.nodeGroupsAvailable.delete(closeKey);
-		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*/
-			/*#IFDEV*/assert(ng === exactNg)/*#ENDIF*/
-			
-			
-			ng.inUse = true;
-			if (goUp) {
-				let ng2 = ng;
-
-				// We borrowed a node from another node group so make sure its parent isn't still an exact match.
-				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 remove it there too.
-						/*#IFDEV*/assert(ng2.closeKey);/*#ENDIF*/
-						success = this.nodeGroupsAvailable.delete(ng2.closeKey, ng2);
-						/*#IFDEV*/assert(success);/*#ENDIF*/
-
-						this.nodeGroupsInUse.push(ng2);
-					}
-				}
-			}
-
-			// Recursively mark all child NodeGroups as in-use.
-			// We actually DON't want to do this becuse applyExprs is going to swap out the child NodeGroups
-			// and mark them as in-use as it goes.
-			// that's probably why uncommenting this causes tests to fail.
-			// for (let path of ng.paths)
-			// 	for (let childNg of path.nodeGroups)
-			// 		this.findAndDeleteExact(childNg.exactKey, false, childNg);
-
-
-			ng.exactKey = exactKey;
-			ng.closeKey = closeKey;
-			this.nodeGroupsInUse.push(ng)
-			
-			
-			if (ng.parentPath) {
-				//ng.parentPath.clearNodesCache();
-				//ng.parentPath = null;
-				//ng.parentPath.removeNodeGroup(ng);
-			}
-		}
-		
-		
-		return ng;
-	}
-
-	/**
-	 * 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} 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, replaceMode=null, exactKey=null) {
-		exactKey = exactKey || getObjectHash(template);
-
-		/*#IFDEV*/if(logEnabled) this.log(`Looking for ${exact ? 'exact' : 'close'} match: ` + template.debug)/*#ENDIF*/
-
-		// 1. Try to find an exact match.
-		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.
-		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 = this.findAndDeleteClose(closeKey, exactKey);
-
-			// 2. Update expression values if they've changed.
-			if (ng) {
-				/*#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*/this.incrementLogDepth(-1);/*#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, replaceMode, exactKey, closeKey);
-
-				/*#IFDEV*/this.incrementLogDepth(-1);/*#ENDIF*/
-				/*#IFDEV*/this.modifications.created.push(...ng.getNodes())/*#ENDIF*/
-
-
-				// 4. Mark NodeGroup as being in-use.
-				// TODO: Moving from one group to another thrashes the gc.  Is there a faster way?
-				// Could I have just a single WeakSet of those in use?
-				// Perhaps also result could cache its last exprKey and then we'd use only one map?
-				ng.exactKey = exactKey;
-				ng.closeKey = closeKey;
-				this.nodeGroupsInUse.push(ng)
-
-				/*#IFDEV*/if (logEnabled) this.log(`Created new ` + ng.debug)/*#ENDIF*/
-			}
-		}
-		
-		// New!
-		// We clear the parent PathExpr's nodesCache when we remove ourselves from it.
-		// Benchmarking shows this doesn't slow down the partialUpdate benchmark.
-		if (ng.parentPath) {
-			// ng.parentPath.clearNodesCache(); // Makes partialUpdate benchmark 10x slower!
-		 	ng.parentPath = null;
-		}
-
-
-		/*#IFDEV*/ng.verify()/*#ENDIF*/
-		
-		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) {
-			ng.inUse = false;
-			available.add(ng.exactKey, ng)
-			available.add(ng.closeKey, ng)
-		}
-		this.nodeGroupsInUse = [];
-
-		// Used for watches
-		this.changes = [];
-
-		/*#IFDEV*/this.log('----------------------')/*#ENDIF*/
-		// TODO: free the memory from any nodeGroupsAvailable() after render is done, since they weren't used?
-
-
-		/*#IFDEV*/this.rootNg.verify();/*#ENDIF*/
-	}
-
-	resetModifications() {
-		this.modifications = {
-			created: [],
-			updated: [],
-			moved: [],
-			deleted: []
-		};
-	}
-
-	/**
-	 * 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) {
-		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 {
-
-			ngm = Globals.nodeGroupManagers.get(rootEl);
-			if (!ngm) {
-				ngm = new NodeGroupManager(rootEl);
-				Globals.nodeGroupManagers.set(rootEl, ngm);
-			}
-		}
-
-		return ngm;
-	}
-
-
-	//#IFDEV
-
-	incrementLogDepth(level) {
-		this.logDepth += level;
-	}
-	log(msg, level=0) {
-		this.logDepth += level;
-		if (logEnabled) {
-			let indent = '	'.repeat(this.logDepth);
-			console.log(indent + msg);
-		}
-	}
-
-	/**
-	 * @returns {NodeGroup[]} */
-	getAllAvailableGroups() {
-		let result = new Set();
-		for (let values of Object.values(this.nodeGroupsAvailable.data))
-			result.add(...values)
-		return [...result];
-	}
-
-	verify() {
-		if (!window.verify)
-			return;
-
-		
-		let findCloseMatch = item => {
-			let names = this.nodeGroupsAvailable.hasValue(item);
-			for (let name of names)
-				if (name.startsWith('@'))
-					return true;
-			return false;
-		}
-
-		// Check to make sure every exact match is also in close matches.
-		for (let name in this.nodeGroupsAvailable)
-			if (!name.startsWith('@)'))
-				for (let item of this.nodeGroupsAvailable.getAll(name))
-					assert(findCloseMatch(item))
-
-		// Recursively traverse through all node Groups
-		if (this.rootNg)
-			this.rootNg.verify();
-
-		for (let ng of this.getAllAvailableGroups())
-			ng.verify();
-	}
-	//#ENDIF
-}
-
-NodeGroupManager.pendingChildren = [];
-
-//#IFDEV
-let logEnabled = false // Prevent rollup's static analyzer from removing this.
-//#ENDIF
-
-
-export class LoopInfo {
-	constructor(loopTemplate, itemTransformer) {
-		this.template = loopTemplate
-		this.itemTransformer = itemTransformer;
-	}
-}

package/src/unused/Perf.js

@@ -1,47 +0,0 @@
-var Perf = {
-	_timers: {},
-
-	/**
-	 * Start a timer with a given name.
-	 * @param timerName {string}
-	 */
-	start(timerName) {
-		if (!Perf._timers[timerName]) {
-			Perf._timers[timerName] = {
-				startTime: null,
-				elapsedTime: 0
-			};
-		}
-		Perf._timers[timerName].startTime = performance.now();
-	},
-
-	/**
-	 * Stop a timer with a given name and calculate the elapsed time.
-	 * @param timerName {string}
-	 */
-	stop(timerName) {
-		if (Perf._timers[timerName] && Perf._timers[timerName].startTime !== null) {
-			let stopTime = performance.now();
-			Perf._timers[timerName].elapsedTime += stopTime - Perf._timers[timerName].startTime;
-			Perf._timers[timerName].startTime = null;  // Reset start time
-		}
-	},
-
-	/**
-	 * Get the total time elapsed for each timer.
-	 * @return {string[]}
-	 */
-	getReport() {
-		let report = [];
-		for (let timerName in Perf._timers) {
-			report.push(`${timerName}: ${Perf._timers[timerName].elapsedTime.toFixed(2)} ms`);
-		}
-		return report;
-	},
-
-	clear() {
-		this._timers = {};
-	}
-}
-
-export default Perf;

package/src/unused/Template.js

@@ -1,108 +0,0 @@
-import getObjectId from "./getObjectId.js";
-
-import {memoize, hashObject, hashObject64, hash64Cache, hashObjectJson, getObjectId3} from "./Util.js";
-
-let htmlMap = new WeakMap();
-
-/**
- * version of the template class that still has the old memoize function, If I ever want to compare hashing speed again.
- */
-export default class Template {
-
-	/** @type {string[]} Html strings.  Stored externally from object to speed up JSON serialization. */
-	//get html() { return htmlMap.get(this) }
-
-
-	/** @type {(Template|string|function)|(Template|string|function)[]} Evaulated expressions.  */
-	exprs = []
-
-	html = [];
-
-	hashedFields;
-
-	/**
-	 *
-	 * @param htmlStrings {string}
-	 * @param exprs {*[]} */
-	constructor(htmlStrings, exprs) {
-		//htmlMap.set(this, htmlStrings)
-		this.html = htmlStrings;
-		this.exprs = exprs;
-
-		this.hashedFields = [getObjectId(htmlStrings), exprs]
-
-		//#IFDEV
-		Object.defineProperty(this, 'debug', {
-			get() {
-				return this.memoize();
-			}
-		})
-		//#ENDIF
-	}
-
-	/**
-	 * Called by JSON.serialize when it encounters a Template.
-	 * This prevents the hashed version from being too large.
-	 * @returns {*}
-	 */
-	toJSON() {
-		return this.hashedFields
-	}
-
-	memoize() {
-
-		// Slower
-		// let result2 = hashObject64(this)
-		// return result2[0].toString(16) + result2[1].toString(16);
-
-		// This version is slower but includes the full html in the template and can help with debugging:
-		//#IFDEV
-		// let exprLength = this.exprs.length;
-		// let l = this.html.length + exprLength;
-		// let result = new Array(l);
-		// for (let i=0; i<exprLength; i++) {
-		// 	result[i*2] = this.html[i];
-		// 	result[i*2+1] = '${' + s(this.exprs[i]) + '}'
-		// }
-		// result[result.length-1] = this.html[this.html.length-1];
-		//
-		// return result.join('')
-		//#ENDIF
-
-		// Speed up most common case:
-		if (this.exprs.length === 1)
-			return memoizeValue(this.exprs[0]) + '\f' + this.htmlId // \f is the "Form feed" control character, unlikely to be usedin regular text.
-
-		let exprLength = this.exprs.length;
-		let result = new Array(exprLength+1);
-		let exprs = this.exprs;
-		for (let i=0; i<exprLength; i++) {
-			result[i] = memoizeValue(exprs[i])
-		}
-		result[result.length] = this.htmlId;
-
-		return result.join('\f')
-	}
-
-	getCloseKey() {
-		// Use the joined html when debugging?
-		//return '@'+this.html.join('|')
-
-		return '@'+this.hashedFields[0];
-	}
-}
-
-
-
-
-function memoizeValue(val) {
-	if (typeof val === 'string')
-		return val;
-	else if (Array.isArray(val))
-		return '[' + val.map(v => memoizeValue(v)) + `]`; // join(',') is implicitly called here.
-	else if (val && val.memoize) // is another Template
-		return 'T('+val.memoize()+')'
-	else
-		return memoize(val); // TODO: This might not differentiate between 1 and '1'
-
-}

package/src/unused/onConnect.js

@@ -1,79 +0,0 @@
-// 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);
-	}
-}