solarite 0.2.2 → 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;

package/src/unused/FastLookupArray.js

@@ -1,54 +0,0 @@
-/**
- * partialUpdate test is 20% slower when using this, even before I override any methods!*/
-export default class FastLookupArray extends Array {
-	constructor() {
-		super(...arguments)
-		this.indexMap = new Map(); // You can replace with WeakMap() but ensure only objects are added.
-
-	}
-
-	push(item) { // doesn't support pushing multiple
-		if (!this.indexMap.has(item)) {
-			this[this.length] = item;
-			this.indexMap.set(item, this.length - 1);
-		}
-	}
-
-	indexOf(item) {
-		return this.indexMap.get(item) || -1;
-	}
-
-	remove(item) {
-		const index = this.indexOf(item);
-		if (index !== -1) {
-			this.splice(index, 1);
-			this.indexMap.delete(item);
-
-			// Adjust the map indices for the items after the removed one
-			for (let i = index; i < this.length; i++)
-				this.indexMap.set(this[i], i);
-		}
-	}
-
-	insertBefore(referenceItem, newItem) {
-		const refIndex = this.indexOf(referenceItem);
-		if (refIndex !== -1) {
-			this.splice(refIndex, 0, newItem);
-			this.indexMap.set(newItem, refIndex);
-
-			// Adjust the map indices for the items after the inserted one
-			for (let i = refIndex + 1; i < this.length; i++)
-				this.indexMap.set(this[i], i);
-		}
-	}
-
-	set(index, item) {
-		const currentItem = this[index];
-		if (currentItem !== undefined)
-			this.indexMap.delete(currentItem);
-		this[index] = item;
-		this.indexMap.set(item, index);
-	}
-
-	// TODO: Override splice?
-}

package/src/unused/Hashes.js

@@ -1,339 +0,0 @@
-import {getObjectId} from "../solarite/hash.js";
-import Template from "../solarite/Template.js";
-
-/**
- * Convert obj to a non-cyclic form that can be given to JSON.serialize.
- * This is useful for creating a string that represents a hash of all the deep values of an object.
- *
- * One instance of a node always has the same hash, even if its attributes/children have changed.
- *
- * TODO: Could memoize be faster if given an old version of the same object, and it only finds the differences?
- * Or if we inline getObjectId()
- *
- * @param obj {Object|Array|function|Node}
- * @param seenMap Used internally.
- * @param idCounter Used internally.
- * @returns {{}|*|string} */
-export function memoize(obj, seenMap = new Map(), idCounter = {value: 0}) {
-
-	// If obj is a Node, Element, or Window, we treat it specially
-	if (obj?.nodeType) { // Benchmarking shows this is faster than "instanceof Node"
-		let nodeId = getObjectId(obj);
-		return `&N:${nodeId}`;
-	}
-
-	// TODO: Should I instead use id's to keep track of functions?
-	let type = typeof obj
-
-	if (obj && type === 'object') {
-		if (seenMap.has(obj))
-			return `&O:${seenMap.get(obj)}`;
-
-		else {
-			seenMap.set(obj, idCounter.value++);
-			if (typeof obj.memoize === 'function')
-				return obj.memoize();
-
-			// We iterate through the keys of an object because an object may have changed since the last time we saw it.
-			const serializedObj = {};
-			for (let key in obj)
-				serializedObj[key] = memoize(obj[key], seenMap, idCounter);
-			return serializedObj;
-		}
-	} else if (type === 'function')
-		//return `&F:${obj}` // String version of function.  This version fails the loop.eventBindings test.
-		return `&F:${getObjectId(obj)}`; // Memory reference to function.  this makes it twice as slow!
-
-	else
-		return obj;
-}
-
-
-function fnv1a(...data) {
-	let hash = 0x811c9dc5; // FNV offset basis
-	for (let i = 0; i < data.length; i++) {
-		hash ^= data[i]; // XOR
-		hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24); // FNV prime multiplication
-	}
-	return hash >>> 0; // Convert to 32-bit unsigned integer
-}
-
-const FNV_PRIME_64 = BigInt("1099511628211");
-const OFFSET_BASIS_64 = BigInt("14695981039346656037");
-function fnv1a_64bit(...data) {
-	let hash = OFFSET_BASIS_64;
-	for (let i = 0; i < data.length; i++) {
-		hash ^= data[i]; // XOR
-		//	hash = BigInt.asUintN(64, hash*FNV_PRIME_64);
-	}
-	return hash;
-}
-
-
-// Faster than memoize
-export function hashObject(obj) {
-	let combinedData = (0);
-	if (obj === null)
-		return combinedData;
-
-	if (Array.isArray(obj)) {
-		for (let i=(0); i<obj.length; i++) {
-			let v = hashObject(obj[i])
-			combinedData = fnv1a(combinedData, i, v);
-		}
-	}
-
-	else if (typeof obj === 'object') {
-		let i = (0);
-		for (const key in obj) {
-			let k = getObjectId3(key)
-			let v = hashObject(obj[key])
-			combinedData = fnv1a(combinedData, i, k, v);
-			i++
-		}
-	}
-	else if (typeof obj === 'number')
-		return (obj)
-	else if (typeof obj === 'string')
-		return getObjectId3(obj)
-	else
-		return getObjectId2(obj);
-
-	return combinedData;
-}
-
-// TODO: Use this number instead as the high bits for getObjectId2?
-let lastObjectId2 = (1_010_101_101); // Big enough to not easily not collide with the space of unhashed numbers.
-let objectIds2 = new Map();
-
-export function getObjectId2(obj) {
-	let result = objectIds2.get(obj);
-	if (!result) {
-		result = (lastObjectId2++); // convert to string, store in result, then add 1 to lastObjectId.
-		objectIds2.set(obj, result)
-	}
-	return result;
-}
-
-
-let objectIds3 = {};
-
-export function getObjectId3(obj) {
-	// if (typeof obj === 'string') {
-	// 	let l = obj.length;
-	// 	if (l < 512) { // Faster than getObjectId3.  512 was picked randomly and has not been benchmarked.
-	// 		let result = 1;
-	// 		for (let i=0; i < l; i++)
-	// 			result ^= obj.charCodeAt(i) << (i%16);
-	// 		return result
-	// 	}
-	// }
-
-
-	let result = objectIds3[obj];
-	if (!result) {
-		result = (lastObjectId2++); // convert to string, store in result, then add 1 to lastObjectId.
-		objectIds3[obj] = result
-	}
-	return result;
-}
-
-
-let hash64Cache = new WeakMap();
-export {hash64Cache};
-
-// 25% slower than 32-bit version but still faster than memoize+JSON.stringify()
-// TODO: hardcoded hash values for true and false?
-export function hashObject64(obj) {
-	let resultLow = 0;
-	let resultHigh = 0;
-
-	if (obj instanceof Template)
-		obj = [obj.htmlId, ...obj.exprs]
-
-	if (obj === null)
-		return [0, 0];
-
-	else if (Array.isArray(obj)) {
-		let result
-		//  = hash64Cache.get(obj);
-		// if (!result) {
-		for (let i = (0); i < obj.length; i++) {
-			let [vLow, vHigh] = hashObject64(obj[i])
-			resultLow = fnv1a(resultLow, i, vLow)
-			resultHigh = fnv1a(resultHigh, vHigh)
-		}
-		result = [resultLow, resultHigh]
-		//	hash64Cache.set(obj, result)
-		//}
-		return result;
-	}
-
-	else if (typeof obj === 'object') {
-		let result
-		//  	= hash64Cache.get(obj);
-		// if (!result) {
-		let i = (0);
-		for (const key in obj) {
-			let k = getObjectId3(key)
-			let [vLow, vHigh] = hashObject64(obj[key])
-			resultLow = fnv1a(resultLow, i, vLow)
-			resultHigh = fnv1a(resultHigh, k, vHigh)
-			i++
-		}
-		result = [resultLow, resultHigh]
-		//	hash64Cache.set(obj, result)
-		//}
-
-		return result;
-	}
-	else if (typeof obj === 'number')
-		return [0, obj]
-	else if (typeof obj === 'string')
-		return [0, getObjectId3(obj)]
-	else
-		return [0, getObjectId2(obj)];
-}
-
-
-
-
-// Perforamnce varies greatly.
-export function memoize2(obj) {
-
-	if (obj === null)
-		return 'null';
-
-	switch (obj?.constructor) {
-		case Function:
-		case Node:
-			return getObjectId(obj);
-		case Array:
-			return '[' + obj.map(item => memoize2(item)) + ']'
-		case Object:
-			let result = '{';
-			for (let key in obj) {
-				//key = key.match(/[^A-Z0-9_]/i) ? JSON.stringify(key) : key;
-				key = (key.includes(':')) ? JSON.stringify(key) : key;
-				result += `${key}:${memoize2(obj[key])}`
-			}
-			return result +'}';
-		default:
-			return JSON.stringify(obj);
-	}
-}
-
-// as fast as memoize2, or faster.
-export function memoize3(obj) {
-
-	if (obj === null)
-		return 'null';
-
-	let type = typeof obj;
-	if (Array.isArray(obj))
-		return '[' + obj.map(item => memoize2(item)) + ']'
-	if (obj instanceof Node || type === 'function')
-		return getObjectId(obj);
-	if (type=== 'object') {
-		let result = '{';
-		for (let key in obj) {
-			//key = key.match(/[^A-Z0-9_]/i) ? JSON.stringify(key) : key;
-			key = (key.includes(':')) ? JSON.stringify(key) : key;
-			result += `${key}:${memoize2(obj[key])}`
-		}
-		return result +'}';
-	}
-	return JSON.stringify(obj);
-}
-
-
-
-
-// as fast as memoize2, or faster.
-export function memoize4(obj, seenMap=new Map(), idCounter={value: 0}) {
-	let result;
-	if (obj instanceof Template) {
-		if (obj.exprs.length === 1)
-			return obj.htmlId + '\f' + memoize4(obj.exprs[0]) // \f is the "Form feed" control character, unlikely to be usedin regular text.
-
-		let exprLength = obj.exprs.length;
-		result = new Array(exprLength + 1);
-		result[0] = obj.htmlId;
-		let exprs = obj.exprs;
-		for (let i = 0; i < exprLength; i++)
-			result[i + 1] = memoize4(exprs[i])
-	}
-
-	else if (obj === null)
-		result = 'null';
-
-	else if (Array.isArray(obj)) {
-		if (seenMap.has(obj))
-			result = `&A${seenMap.get(obj)}`;
-		else {
-			seenMap.set(obj, idCounter.value++);
-			result = '[' + obj.map(item => memoize2(item)) + ']'
-		}
-	}
-	else if (obj instanceof Node || typeof obj === 'function')
-		result = getObjectId(obj);
-
-	else if (typeof obj=== 'object') {
-		if (seenMap.has(obj))
-			result = `&O${seenMap.get(obj)}`;
-
-		else {
-			seenMap.set(obj, idCounter.value++);
-
-			// // String contact approach.
-			// result = '{';
-			// for (let key in obj) {
-			// 	//key = key.match(/[^A-Z0-9_]/i) ? JSON.stringify(key) : key;
-			// 	key = (key.includes(':')) ? JSON.stringify(key) : key;
-			// 	result += `${key}:${memoize2(obj[key])}`
-			// }
-			// result = result + '}';
-
-			// Buffer approach.  Seems slightly faster.
-			let keys = Object.keys(obj);
-			let buffer = new Array(keys.length) + 2;
-			buffer[0] = '{'
-			buffer[buffer.length-1] = '}'
-			let idx = 1;
-			for (let key of keys) {
-				//key = key.match(/[^A-Z0-9_]/i) ? JSON.stringify(key) : key;
-				key = (key.includes(':')) ? JSON.stringify(key) : key;
-				buffer[idx] = `${key}:${memoize2(obj[key])},`
-				idx++;
-			}
-			result = buffer.join('');
-		}
-	}
-	else
-		result = JSON.stringify(obj);
-
-
-	return result;
-}
-
-
-
-
-
-// Takes half as long as just calling JSON.serialize!
-function containsFunction(obj) {
-	// Base case: if the object itself is a function
-	let type = typeof obj;
-	if (type === 'function') {
-		return true;
-	}
-
-	// If the object is an object or array, recursively search its properties
-	if (type === 'object' && obj !== null)
-		for (let key in obj)
-			if (containsFunction(obj[key]))
-				return true;
-
-	// If none of the properties are functions, return false
-	return false;
-}