npm - solarite - Versions diffs - 0.2.3 → 0.2.4 - Mend

solarite 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/Solarite-debug.js +357 -39
package/dist/Solarite.js +357 -39
package/dist/Solarite.min.js +2 -2
package/package.json +1 -1
package/src/solarite/ExprPath.js +84 -17
package/src/solarite/Globals.js +3 -2
package/src/solarite/NodeGroup.js +37 -0
package/src/solarite/Solarite.js +1 -1
package/src/solarite/Template.js +5 -3
package/src/solarite/getArg.js +18 -8
package/src/solarite/watch3.js +119 -28
package/src/util/MultiValueMap.js +35 -2
package/src/util/Util.js +26 -1

package/dist/Solarite-debug.js CHANGED Viewed

@@ -76,10 +76,36 @@ var Util$1 = {
 		return result;
 	},
+	/**
+	 * @param map {Map|WeakMap|Object}
+	 * @param key
+	 * @param value */
+	mapAdd(map, key, value) {
+		let isMap = map instanceof Map || map instanceof WeakMap;
+		let result = isMap ? map.get(key) : map[key];
+		if (!result) {
+			result = [value];
+			if (isMap)
+				map.set(key, result);
+			else
+				map[key] = result;
+		}
+		else
+			result.push(value);
+	},
-};
+	weakMemoize(obj, callback) {
+		let result = weakMemoizeInputs.get(obj);
+		if (!result) {
+			result = callback(obj);
+			weakMemoizeInputs.set(obj, result);
+		}
+		return result;
+	}
+};
+let weakMemoizeInputs = new WeakMap();
 /**
  * Follow a path into an object.
@@ -128,7 +154,7 @@ let delveDontCreate = {};
 /**
  * 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 Component.
+ * 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
@@ -153,14 +179,15 @@ let delveDontCreate = {};
  * @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 {*} */
-function getArg(el, name, val=null, type=ArgType.String) {
+ * @param fallback {*} If the type can't be parsed as the given type, use this value.
+ * @return {*} Undefined if attribute isn't set.  */
+function getArg(el, name, val=undefined, type=ArgType.String, fallback=undefined) {
 	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;
+		return type.includes(val) ? val : fallback;
 	if (typeof type === 'function')
 		return type(val);
@@ -168,15 +195,22 @@ function getArg(el, name, val=null, type=ArgType.String) {
 	// 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);
+		if (['false', '0', false, 0, null, undefined, NaN].includes(lAttrVal))
+			return false;
+		if (['true', true].includes(lAttrVal) || parseFloat(lAttrVal) !== 0)
+			return true;
+		return fallback;
 	}
 	// Attribute doesn't exist
+	let result;
 	switch (type) {
 		case ArgType.Int:
-			return parseInt(val);
+			result = parseInt(val);
+			return isNaN(result) ? fallback : result;
 		case ArgType.Float:
-			return parseFloat(val);
+			result = parseFloat(val);
+			return isNaN(result) ? fallback : result;
 		case ArgType.String:
 			return [undefined, null, false].includes(val) ? '' : val+'';
 		case ArgType.JSON:
@@ -190,7 +224,9 @@ function getArg(el, name, val=null, type=ArgType.String) {
 				} catch (e) {
 					return val;
 				}
-			else return val;
+			else return fallback;
+		// type not provided
 		default:
 			return val;
 	}
@@ -334,8 +370,9 @@ var Globals = {
 	rendered: new WeakSet(),
 	/**
-	 * Used by watch3 to see which expressions are being accessed. */
-	currentExprPath: [],
+	 * Used by watch3 to see which expressions are being accessed.
+	 * @type {[]}*/
+	currentExprPath: null,
 	/**
 	 * @type {Object<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
@@ -734,7 +771,10 @@ class MultiValueMap {
 		return false;
 	}
-	// Get all values for a key
+	/**
+	 * Get all values for a key.
+	 * @param key {string}
+	 * @returns {Set|*[]} */
 	getAll(key) {
 		return this.data[key] || [];
 	}
@@ -743,7 +783,7 @@ class MultiValueMap {
 	 * Remove one value from a key, and return it.
 	 * @param key {string}
 	 * @param val If specified, make sure we delete this specific value, if a key exists more than once.
-	 * @returns {*} */
+	 * @returns {*|undefined} The deleted item. */
 	delete(key, val=undefined) {
 		// if (key === '["Html2",[[["Html3",["F1","A"]],["Html3",["F1","B"]]]]]')
 		// 	debugger;
@@ -779,6 +819,36 @@ class MultiValueMap {
 		return result;
 	}
+	/**
+	 * Try to delete an item that matches the key and the isPreferred function.
+	 * if not the latter, just delete any item that matches the key.
+	 * @param key {string}
+	 * @param isPreferred {function}
+	 * @returns {*|undefined} The deleted item. */
+	deletePreferred(key, isPreferred) {
+		let result;
+		let data = this.data;
+		let set = data[key];
+		if (!set)
+			return undefined;
+		for (let val of set)
+			if (isPreferred(val)) {
+				set.delete(val);
+				result = val;
+				break;
+			}
+		if (!result) {
+			[result] = set;
+			set.delete(result);
+		}
+		if (set.size === 0)
+			delete data[key];
+		return result;
+	}
 	hasValue(val) {
 		let data = this.data;
 		let names = [];
@@ -1085,6 +1155,9 @@ class ExprPath {
 	nodeMarkerPath;
+	/** @type {?function} */
+	watchFunction
 	/**
 	 * @param nodeBefore {Node}
 	 * @param nodeMarker {?Node}
@@ -1154,6 +1227,11 @@ class ExprPath {
 	applyNodes(expr) {
 		let path = this;
+		// This can be done at the beginning or the end of this function.
+		// If at the end, we may get rendering done faster.
+		// But when at the beginning, it leaves all the nodes in-use so we can do a renderWatched().
+		path.freeNodeGroups();
 		/*#IFDEV*/path.verify();/*#ENDIF*/
 		/** @type {(Node|NodeGroup|Expr)[]} */
@@ -1218,15 +1296,52 @@ class ExprPath {
 				// Rearrange nodes.
 				udomdiff(path.nodeMarker.parentNode, oldNodes, newNodes, path.nodeMarker);
-			Util.saveOrphans(oldNodeGroups, oldNodes);
+			// TODO: Put this in a remove() function of NodeGroup.
+			// Then only run it on the old nodeGroups that were actually removed.
+			//Util.saveOrphans(oldNodeGroups, oldNodes);
+			for (let ng of oldNodeGroups)
+				if (!ng.startNode.parentNode)
+					ng.saveOrphans();
 		}
-		// Must happen after second pass.
-		path.freeNodeGroups();
 		/*#IFDEV*/path.verify();/*#ENDIF*/
 	}
+	/**
+	 * Used by watch() for replacing individual loop items. */
+	applyLoopItemUpdate(index, template) {
+		// At this point none of the nodes being used will be in nodeGroupsFree.
+		let oldNg = this.nodeGroups[index];
+		this.nodeGroupsFree.add(oldNg.exactKey, oldNg);
+		this.nodeGroupsFree.add(oldNg.closeKey, oldNg);
+		let ng = this.getNodeGroup(template, true);
+		if (ng) {
+			return; // It's an exactl match, so replace nothing.
+		}
+		ng = this.getNodeGroup(template, false);
+		this.nodeGroups[index] = ng;
+		// Splice in the new nodes.
+		for (let node of ng.getNodes()) {
+			oldNg.startNode.parentNode.insertBefore(node, oldNg.startNode);
+		}
+		if (oldNg !== ng) {
+			for (let node of oldNg.getNodes())
+				node.remove();
+			oldNg.saveOrphans();
+		}
+		// TODO: update or invalidate the nodes cache?
+		this.nodesCache = null;
+	}
 	/**
@@ -1273,7 +1388,11 @@ class ExprPath {
 				this.applyExact(subExpr, newNodes, secondPass);
 		else if (typeof expr === 'function') {
+			// TODO: One ExprPath can have multiple expr functions.
+			// But if using it as a watch, it should only have one at the top level.
+			// So maybe this is ok.
 			Globals.currentExprPath = [this, expr]; // Used by watch3()
+			this.watchFunction = expr; // TODO: Only do this if it's a top level function.
 			let result = expr();
 			Globals.currentExprPath = null;
@@ -1366,7 +1485,6 @@ class ExprPath {
 				args = expr.slice(1);
 			}
-			// Undocumented.
 			// oninput=${[this, 'value']}
 			else {
 				func = setValue;
@@ -1378,20 +1496,27 @@ class ExprPath {
 		else
 			func = expr;
+		this.bindEvent(node, root, eventName, eventName, func, args);
+	}
+	bindEvent(node, root, key, eventName, func, args, capture=false) {
 		let nodeEvents = Globals.nodeEvents.get(node);
 		if (!nodeEvents) {
-			nodeEvents = {[eventName]: new Array(3)};
+			nodeEvents = {[key]: new Array(3)};
 			Globals.nodeEvents.set(node, nodeEvents);
 		}
-		let nodeEvent = nodeEvents[eventName];
+		let nodeEvent = nodeEvents[key];
+		if (!nodeEvent)
+			nodeEvents[key] = nodeEvent = new Array(3);
 		// If function has changed, remove and rebind the event.
 		if (nodeEvent[0] !== func) {
 			let [existing, existingBound, _] = nodeEvent;
 			if (existing)
-				node.removeEventListener(eventName, existingBound);
+				node.removeEventListener(eventName, existingBound, capture);
 			let originalFunc = func;
@@ -1407,15 +1532,15 @@ class ExprPath {
 			nodeEvent[0] = originalFunc;
 			nodeEvent[1] = boundFunc;
-			node.addEventListener(eventName, boundFunc);
+			node.addEventListener(eventName, boundFunc, capture);
 			// TODO: classic event attribs?
-			//el[attr.name] = e => // e.g. el.onclick = ...
-			//	(new Function('event', 'el', attr.value)).bind(this.manager.rootEl)(e, el) // put "event", "el", and "this" in scope for the event code.
+			//el[attr.name] = e => // e.g. el.onclick = ... // put "event", "el", and "this" in scope for the event code.
+			//	(new Function('event', 'el', attr.value)).bind(this.manager.rootEl)(e, el)
 		}
 		//  Otherwise just update the args to the function.
-		nodeEvents[eventName][2] = args;
+		nodeEvents[key][2] = args;
 	}
 	applyValueAttrib(node, exprs, exprIndex) {
@@ -1433,9 +1558,14 @@ class ExprPath {
 		else if ((this.attrName === 'value' || this.attrName === 'data-value') && Util.isPath(expr)) {
 			let [obj, path] = [expr[0], expr.slice(1)];
 			node.value = delve(obj, path);
-			node.addEventListener('input', () => {
+			// TODO: We need to remove any old listeners, like in bindEventAttribute
+			let func = () => {
 				delve(obj, path, Util.getInputValue(node));
-			}, true); // We use capture so we update the values before other events added by the user.
+			};
+			// We use capture so we update the values before other events added by the user.
+			this.bindEvent(node, path[0], 'value', 'input', func, [], true);
 		}
 		// Regular attribute
@@ -1619,8 +1749,9 @@ class ExprPath {
 		let result;
-		if (exact) {
-			result = this.nodeGroupsFree.delete(template.getExactKey());
+		// TODO: Would it be faster to maintain a separate list of detached nodegroups?
+		if (exact) { // [below] parentElement will be null if the parent is a DocumentFragment
+			result = this.nodeGroupsFree.deletePreferred(template.getExactKey(), ng=>ng.startNode.parentElement);
 			if (result) // also delete the matching close key.
 				this.nodeGroupsFree.delete(template.getCloseKey(), result);
 			else
@@ -1631,7 +1762,7 @@ class ExprPath {
 		// This is a match that has matching html, but different expressions applied.
 		// We can then apply the expressions to make it an exact match.
 		else {
-			result = this.nodeGroupsFree.delete(template.getCloseKey());
+			result = this.nodeGroupsFree.deletePreferred(template.getCloseKey(), ng=>ng.startNode.parentElement);
 			if (result) {
 				/*#IFDEV*/assert(result.exactKey);/*#ENDIF*/
 				this.nodeGroupsFree.delete(result.exactKey, result);
@@ -1674,12 +1805,18 @@ class ExprPath {
 	 * @type {MultiValueMap<key:string, value:NodeGroup>} */
 	nodeGroupsFree = new MultiValueMap();
+	nodeGroupsDetached = new MultiValueMap();
 	/**
 	 * Move everything from this.nodeGroupsInUse to this.nodeGroupsFree.
 	 * TODO: this could run as needed in getNodeGroup? */
 	freeNodeGroups() {
 		// old:
+		//this.nodeGroupsDetached = this.nodeGroupsFree;
+		//this.nodeGroupsFree = new MultiValueMap();
 		let ngf = this.nodeGroupsFree;
 		for (let ng of this.nodeGroupsInUse) {
 			ngf.add(ng.exactKey, ng);
@@ -2459,6 +2596,16 @@ class NodeGroup {
 		return this.rootNg;
 	}
+	/**
+	 * Requires the nodeCache to be present. */
+	saveOrphans() {
+		/*#IFDEV*/assert(!this.startNode.parentNode);/*#ENDIF*/
+		/*#IFDEV*/assert(this.nodesCache);/*#ENDIF*/
+		let fragment = document.createDocumentFragment();
+		for (let node of this.getNodes())
+			fragment.append(node);
+	}
 	updatePaths(fragment, paths, offset) {
 		// Update paths to point to the fragment.
@@ -2620,6 +2767,23 @@ class RootNodeGroup extends NodeGroup {
 	 * @type {HTMLElement} */
 	root;
+	/**
+	 * Store the expressions that use this watched variable,
+	 * along with the functions used to get their values.
+	 * @type {Object<field:string, Set<ExprPath>>} */
+	watchedExprPaths = {};
+	/**
+	 * Map from arrays where .map is called and their callback functions.
+	 * TODO: One array might be called with two different map functions in different places!
+	 * @type {Map<Array, function>} */
+	mapCallbacks = new Map();
+	/**
+	 *
+	 * @type {Map<ExprPath, boolean|Array>} */
+	exprsToRender = new Map();
 	/**
 	 *
 	 * @param template
@@ -2638,6 +2802,7 @@ class RootNodeGroup extends NodeGroup {
 		let offset = 0;
 		let root = fragment; // TODO: Rename so it's not confused with this.root.
 		if (el) {
+			Globals.nodeGroups.set(el, this);
 			// Save slot children
 			let slotFragment;
@@ -2683,12 +2848,15 @@ class RootNodeGroup extends NodeGroup {
 			}
 			root = el;
 			this.startNode = el;
 			this.endNode = el;
 		}
 		else {
 			let singleEl = getSingleEl(fragment);
 			this.root = singleEl || fragment; // We return the whole fragment when calling r() with a collection of nodes.
+			Globals.nodeGroups.set(this.root, this);
 			if (singleEl) {
 				root = singleEl;
 				offset = 1;
@@ -2702,6 +2870,11 @@ class RootNodeGroup extends NodeGroup {
 		// Apply exprs
 		this.applyExprs(template.exprs);
 	}
+	clearRenderWatched() {
+		this.watchedExprPaths = {};
+		this.mapCallbacks = new Map();
+	}
 }
 function getSingleEl(fragment) {
@@ -2805,14 +2978,14 @@ class Template {
 		if (standalone) {
 			ng = new RootNodeGroup(this, null, options);
 			el = ng.getRootNode();
-			Globals.nodeGroups.set(el, ng);
+			//Globals.nodeGroups.set(el, ng);
 			firstTime = true;
 		}
 		else {
 			ng = Globals.nodeGroups.get(el);
 			if (!ng) {
 				ng = new RootNodeGroup(this, el, options);
-				Globals.nodeGroups.set(el, ng);
+				//Globals.nodeGroups.set(el, ng);
 				firstTime = true;
 			}
 		}
@@ -2822,8 +2995,10 @@ class Template {
 		if (!firstTime) {
 			if (this.html?.length === 1 && !this.html[0])
 				el.innerHTML = ''; // Fast path for empty component.
-			else
+			else {
+				ng.clearRenderWatched();
 				ng.applyExprs(this.exprs);
+			}
 		}
 		return el;
@@ -3270,6 +3445,152 @@ function createSolarite(extendsTag=null) {
 	}
 }
+/**
+ * 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.
+ */
+let unusedArg = Symbol('unusedArg');
+/**
+ * Custom map function triggers the get() Proxy.
+ * @param array {Array}
+ * @param callback {function}
+ * @returns {*[]} */
+function map(array, callback) {
+	let result = [];
+	for (let i=0; i<array.length; i++)
+		result.push(callback(array[i], i, array));
+	return result;
+}
+/**
+ *
+ * @param root {HTMLElement}
+ * @param field {string}
+ * @param value {string|Symbol} */
+function watch3(root, field, value=unusedArg) {
+	// Store internal value used by get/set.
+	if (value !== unusedArg)
+		root[field] = value;
+	else
+		value = root[field];
+	// use a single object for both defineProperty and new Proxy's handler.
+	const handler = {
+		get(obj, prop, receiver) {
+			let result = (obj === receiver && field === prop)
+				? value // top-level value.
+				: Reflect.get(obj, prop, receiver); // avoid infinite recursion.
+			if (prop === 'map')
+				// Double function so the ExprPath calls it as a function,
+				// instead of it being evaluated immediately when the Templat eis created.
+				return (callback) => () => {
+					let rootNg = Globals.nodeGroups.get(root);
+					rootNg.mapCallbacks.set(obj, callback);
+					return map(new Proxy(obj, handler), callback);
+				}
+			// Track which ExprPath is using this variable.
+			if (Globals.currentExprPath) {
+				let [exprPath, exprFunction] = Globals.currentExprPath; // Set in ExprPath.applyExact()
+				let rootNg = Globals.nodeGroups.get(root);
+				// Init for field.
+				rootNg.watchedExprPaths[field] = rootNg.watchedExprPaths[field] || new Set();
+				rootNg.watchedExprPaths[field].add(exprPath);
+			}
+			if (result && typeof result === 'object')
+				return new Proxy(result, handler);
+			return result;
+		},
+		// TODO: Will fail for attribute w/ a value having multiple ExprPaths.
+		// TODO: This won't update a component's expressions.
+		set(obj, prop, val, receiver) {
+			// 1. Set the value.
+			if (obj === receiver && field === prop)
+				value = val; // top-level value.
+			else // avoid infinite recursion.
+				Reflect.set(obj, prop, val, receiver);
+			// 2. Add to the list of ExprPaths to re-render.
+			let rootNg = Globals.nodeGroups.get(root);
+			for (let exprPath of rootNg.watchedExprPaths[field]) {
+				// Update a single NodeGroup created by array.map()
+				if (Array.isArray(obj) && parseInt(prop) == prop) {
+					let exprsToRender = rootNg.exprsToRender.get(exprPath);
+					// If we're not re-rendering the whole thing.
+					if (exprsToRender !== true)
+						Util$1.mapAdd(rootNg.exprsToRender, exprPath, [obj, prop, val]);
+				}
+				// Reapply the whole expression.
+				else
+					rootNg.exprsToRender.set(exprPath, true);
+			}
+			return true;
+		}
+	};
+	Object.defineProperty(root, field, {
+		get: () => handler.get(root, field, root),
+		set: (val) => handler.set(root, field, val, root)
+	});
+}
+/**
+ * TODO: Rename so we have watch.add() and watch.render() ?
+ * @param root
+ * @returns {*[]} */
+function renderWatched(root) {
+	let rootNg = Globals.nodeGroups.get(root);
+	let modified = [];
+	for (let [exprPath, params] of rootNg.exprsToRender) {
+		// Reapply the whole expression.
+		if (params === true) {
+			exprPath.apply(exprPath.watchFunction);
+			// TODO: freeNodeGroups() could be skipped if applyExprs() never marked them as in-use.
+			exprPath.freeNodeGroups();
+			modified.push(...exprPath.getNodes());
+		}
+		// Update a single NodeGroup created by array.map()
+		else {
+			for (let row of params) {
+				let [obj, prop, value] = row;
+				let callback = rootNg.mapCallbacks.get(obj);
+				let template = callback(value);
+				exprPath.applyLoopItemUpdate(prop, template);
+				modified.push(...exprPath.nodeGroups[prop].getNodes());
+			}
+		}
+	}
+	rootNg.exprsToRender = new Map(); // clear
+	return modified;
+}
 /**
  * Solarite JavasCript UI library.
  * MIT License
@@ -3285,9 +3606,6 @@ let Solarite = new Proxy(createSolarite(), {
 	}
 });
 let getInputValue = Util.getInputValue;
-//Experimental:
-//export {forEach, watchGet, watchSet} from './watch.js' // old, unfinished
-//export {watch} from './watch2.js'; // unfinished
+ // unfinished
-export { ArgType, Globals, Solarite, Template, delve, getArg, getInputValue, r };
+export { ArgType, Globals, Solarite, Template, delve, getArg, getInputValue, r, renderWatched, watch3 as watch };