solarite 0.2.3 → 0.2.4

package/src/solarite/watch3.js

@@ -30,7 +30,7 @@ class WatchExample extends Solarite {
 			${this.items.map(item => r`
 				<div>${item.name}</div>
 			`)}
-			${this.items.length}
+			${() => this.items.length}
 		</watch-example>`;
 	}
 }
@@ -47,52 +47,143 @@ a.items.push({name: 'Fred'});
 
 
 import Globals from "./Globals.js";
-import delve from "../util/delve.js";
-//import NodeGroupManager from "./NodeGroupManager.js";
+import Util from "../util/Util.js";
 
 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 {Object}
- * @param path {string}
+ * @param root {HTMLElement}
+ * @param field {string}
  * @param value {string|Symbol} */
-export default function watch3(root, path, value=unusedArg) {
+export default function watch3(root, field, value=unusedArg) {
+	// Store internal value used by get/set.
+	if (value !== unusedArg)
+		root[field] = value;
+	else
+		value = root[field];
 
-	/** @type {ExprPath} The ExprPath that's using this variable.*/
-	let exprPath;
 
-	/** @type {function} Function evaluated by the ExprPath. */
-	let exprFunction;
+	// use a single object for both defineProperty and new Proxy's handler.
+	const handler = {
+		get(obj, prop, receiver) {
 
-	if (value !== unusedArg)
-		root[path] = value;
+			let result = (obj === receiver && field === prop)
+				? value // top-level value.
+				: Reflect.get(obj, prop, receiver); // avoid infinite recursion.
 
-	// Store internal value used by get/set.
-	else
-		value = root[path];
+			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);
+				}
 
-	Object.defineProperty(root, path, {
-		get() {
 			// Track which ExprPath is using this variable.
-			if (Globals.currentExprPath)
-				[exprPath, exprFunction] = Globals.currentExprPath;
+			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);
 
-			// TODO: Return Proxy for non-primitive value, to track path changed.
-			return value;
+			return result;
 		},
-		set(val) {
-			value = val;
 
-			if (exprFunction) {
 
-				// TODO: Will fail for attribute w/ a value having multiple ExprPaths.
-				// TODO: This won't update a component's expressions.
-				exprPath.apply(exprFunction);
+		// 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]) {
 
-				exprPath.freeNodeGroups(); // TODO: This could be skipped if applyExprs() never marked them as in-use.
+				// 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.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 {*[]} */
+export 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;
+}

package/src/util/MultiValueMap.js

@@ -20,7 +20,10 @@ export default 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] || [];
 	}
@@ -29,7 +32,7 @@ export default 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;
@@ -65,6 +68,36 @@ export default 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 = [];

package/src/util/Util.js

@@ -79,10 +79,35 @@ var Util = {
 
 		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();
 
 export default Util;