solarite 0.1.0

package/src/solarite/udomdiff.js

@@ -0,0 +1,233 @@
+/**
+ * ISC License
+ *
+ * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+ * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+ * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+ * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ */
+
+import NodeGroup from "./NodeGroup.js";
+
+/**
+ * @param {Node} parentNode The container where children live
+ * @param {Node[]} a The list of current/live children
+ * @param {Node[]} b The list of future children
+ * @param {(entry: Node, action: number) => Node} get
+ * The callback invoked per each entry related DOM operation.
+ * @param {Node} [before] The optional node used as anchor to insert before.
+ * @returns {Node[]} The same list of future children.
+ */
+const udomdiff = (parentNode, a, b, before) => {
+	//#IFDEV
+	// if (parentNode instanceof ExprPath)
+	// 	parentNode.verify();
+	//#ENDIF
+
+	const bLength = b.length;
+	let aEnd = a.length;
+	let bEnd = bLength;
+	let aStart = 0;
+	let bStart = 0;
+	let map = null;
+	while (aStart < aEnd || bStart < bEnd) {
+		// append head, tail, or nodes in between: fast path
+		if (aEnd === aStart) {
+			// we could be in a situation where the rest of nodes that
+			// need to be added are not at the end, and in such case
+			// the node to `insertBefore`, if the index is more than 0
+			// must be retrieved, otherwise it's gonna be the first item.
+			const node = bEnd < bLength
+				? (bStart
+					? (b[bStart - 1].nextSibling)
+					: b[bEnd - bStart])
+				: before;
+			while (bStart < bEnd) {
+				let bNode = b[bStart++];
+				parentNode.insertBefore(bNode, node);
+
+				//#IFDEV
+				if (bNode instanceof NodeGroup)
+					bNode.verify();
+				// if (parentNode instanceof ExprPath)
+				// 	parentNode.verify();
+				//#ENDIF
+			}
+		}
+		// remove head or tail: fast path
+		else if (bEnd === bStart) {
+			while (aStart < aEnd) {
+				// remove the node only if it's unknown or not live
+				let aNode = a[aStart];
+				if (!map || !map.has(aNode)) {
+					parentNode.removeChild(aNode);
+
+					//#IFDEV
+					if (aNode instanceof NodeGroup)
+						aNode.verify();
+					// if (parentNode instanceof ExprPath)
+					// 	parentNode.verify();
+					//#ENDIF
+				}
+				aStart++;
+			}
+		}
+		// same node: fast path
+		else if (a[aStart] === b[bStart]) {
+			aStart++;
+			bStart++;
+		}
+		// same tail: fast path
+		else if (a[aEnd - 1] === b[bEnd - 1]) {
+			aEnd--;
+			bEnd--;
+		}
+			// The once here single last swap "fast path" has been removed in v1.1.0
+			// https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
+		// reverse swap: also fast path
+		else if (
+			a[aStart] === b[bEnd - 1] &&
+			b[bStart] === a[aEnd - 1]
+		) {
+			// this is a "shrink" operation that could happen in these cases:
+			// [1, 2, 3, 4, 5]
+			// [1, 4, 3, 2, 5]
+			// or asymmetric too
+			// [1, 2, 3, 4, 5]
+			// [1, 2, 3, 5, 6, 4]
+			const node = a[--aEnd].nextSibling;
+
+
+			let a2 = b[bStart++];
+			let b2 = a[aStart++];
+			parentNode.insertBefore(
+				a2,
+				b2.nextSibling
+			);
+			//#IFDEV
+			if (a2 instanceof NodeGroup)
+				a2.verify();
+			// if (parentNode instanceof ExprPath)
+			// 	parentNode.verify();
+			//#ENDIF
+
+			let bNode = b[--bEnd];
+			parentNode.insertBefore(bNode, node);
+
+			//#IFDEV
+			if (bNode instanceof NodeGroup)
+				bNode.verify();
+			// if (parentNode instanceof ExprPath)
+			// 	parentNode.verify();
+
+			//#ENDIF
+
+			// mark the future index as identical (yeah, it's dirty, but cheap 👍)
+			// The main reason to do this, is that when a[aEnd] will be reached,
+			// the loop will likely be on the fast path, as identical to b[bEnd].
+			// In the best case scenario, the next loop will skip the tail,
+			// but in the worst one, this node will be considered as already
+			// processed, bailing out pretty quickly from the map index check
+			a[aEnd] = b[bEnd];
+		}
+		// map based fallback, "slow" path
+		else {
+			// the map requires an O(bEnd - bStart) operation once
+			// to store all future nodes indexes for later purposes.
+			// In the worst case scenario, this is a full O(N) cost,
+			// and such scenario happens at least when all nodes are different,
+			// but also if both first and last items of the lists are different
+			if (!map) {
+				map = new Map;
+				let i = bStart;
+				while (i < bEnd)
+					map.set(b[i], i++);
+			}
+			// if it's a future node, hence it needs some handling
+			if (map.has(a[aStart])) {
+				// grab the index of such node, 'cause it might have been processed
+				const index = map.get(a[aStart]);
+				// if it's not already processed, look on demand for the next LCS
+				if (bStart < index && index < bEnd) {
+					let i = aStart;
+					// counts the amount of nodes that are the same in the future
+					let sequence = 1;
+					while (++i < aEnd && i < bEnd && map.get(a[i]) === (index + sequence))
+						sequence++;
+					// effort decision here: if the sequence is longer than replaces
+					// needed to reach such sequence, which would brings again this loop
+					// to the fast path, prepend the difference before a sequence,
+					// and move only the future list index forward, so that aStart
+					// and bStart will be aligned again, hence on the fast path.
+					// An example considering aStart and bStart are both 0:
+					// a: [1, 2, 3, 4]
+					// b: [7, 1, 2, 3, 6]
+					// this would place 7 before 1 and, from that time on, 1, 2, and 3
+					// will be processed at zero cost
+					if (sequence > (index - bStart)) {
+						const node = a[aStart];
+						while (bStart < index) {
+							let bNode = b[bStart++];
+							parentNode.insertBefore(bNode, node);
+
+							//#IFDEV
+							if (bNode instanceof NodeGroup)
+								bNode.verify();
+							// if (parentNode instanceof ExprPath)
+							// 	parentNode.verify();
+
+							//#ENDIF
+						}
+					}
+						// if the effort wasn't good enough, fallback to a replace,
+						// moving both source and target indexes forward, hoping that some
+					// similar node will be found later on, to go back to the fast path
+					else {
+						let aNode = a[aStart++]
+						let bNode = b[bStart++]
+						parentNode.replaceChild(
+							bNode,
+							aNode
+						);
+
+						//#IFDEV
+						if (aNode instanceof NodeGroup)
+							aNode.verify();
+						// if (parentNode instanceof ExprPath)
+						// 	parentNode.verify();
+						//#ENDIF
+					}
+				}
+				// otherwise move the source forward, 'cause there's nothing to do
+				else
+					aStart++;
+			}
+				// this node has no meaning in the future list, so it's more than safe
+				// to remove it, and check the next live node out instead, meaning
+			// that only the live list index should be forwarded
+			else {
+				let aNode = a[aStart++];
+				parentNode.removeChild(aNode);
+
+				//#IFDEV
+				if (aNode instanceof NodeGroup)
+					aNode.verify();
+				// if (parentNode instanceof ExprPath)
+				// 	parentNode.verify();
+				//#ENDIF
+			}
+		}
+	}
+	return b;
+};
+
+export default udomdiff;

package/src/solarite/watch.js

@@ -0,0 +1,302 @@
+/**
+ * Tools for watch variables and performing precise renders.
+ */
+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 Template from "./Template.js";
+
+
+/**
+ * Stores info how to transform a path to a template. */
+export class TransformerInfo {
+	constructor(path, transformer, hash) {
+		this.path = path;
+		this.transformer = transformer;
+		this.hash = hash;
+	}
+}
+
+
+/**
+ * Maps an object path to the function that converts it to a Template.
+ * Once it's convert to a template, we can get the hash of that Tempate.
+ * Then that hash tells us what NodeGroups are affected by the object.
+ *
+ * We store the function to get the Template, instead of the Template itself,
+ * so we can call that function again when the object has a new value.
+ * @type {MultiValueMap<Object, function(...Object):Template>} */
+let pathToTransformer = new MultiValueMap(); // uses a Set() for each value.
+export {pathToTransformer}
+
+
+
+/**
+ * Watch the given properties on obj and call obj.render() when any of them are changed.
+ * @param obj {Object}
+ * @param props {string[]} */
+export function renderWhenChanged(obj, ...props) {
+
+}
+
+/**
+ *
+ * @param objectPaths {(*|function)[]}
+ * @returns {Template} */
+export function watchGet(...objectPaths) {
+	
+	/** @type {function} */
+	let transformer = objectPaths.at(-1);
+	let paths;
+	if (typeof transformer === 'function') {
+		paths = objectPaths.slice(0, -1);
+	}
+
+	// No transformer provided, so we create our own.
+	else if (objectPaths.length === 1) {
+		paths = [objectPaths[0].slice(0, -1)];
+		let prop = objectPaths[0].at(-1);
+		transformer = (...args) => (args[0][prop])
+	}
+
+	
+	// Save arguments used to call the template, so we can call it again when those args have their values change.
+	let args = [];
+	for (let path of paths) {
+
+
+		let obj = delve(watchSet(path[0]), path.slice(1));
+		args.push(obj);
+	}
+	
+	let template = transformer(...args);
+	
+	// If the result isn't a Template, convert the function to return a Template that wraps the result.
+	// This way NodeGroupManager.findAndDelete() can find a NodeGroup that matches this Template's hash.
+	if (!(template instanceof Template)) {
+		let oldToTemplate = transformer;
+		transformer = function() {
+			return new Template(['', ''], [oldToTemplate(...arguments)]);
+		}
+		template = transformer(...args);
+	}
+	
+	// Map the object paths to the function that creates a template.
+	let hash = getObjectHash(template);
+	for (let path of paths) {
+		let serializedPath = serializePath(path);
+		pathToTransformer.add(serializedPath, new TransformerInfo(path, transformer, hash)); // Uses a Set() to ensure no duplicates.
+	}
+
+	return template;
+}
+
+//let proxyCache = new WeakMap();
+
+
+/**
+ * Set the value of a variable in a way that's watched, so later when we call .renderWatched()
+ * We can find what NodeGroups to update.*/
+export function watchSet(obj) {
+	if (obj?.$isProxy===true)
+		return obj; // It's already a Proxy.
+
+	// This cache doesn't make things faster.
+	// let result = proxyCache.get(obj);
+	// if (!result) {
+	// 	result = new Proxy(obj, new ProxyHandler(obj));
+	// 	proxyCache.set(obj, result);
+	// }
+	// return result;
+	return new Proxy(obj, new ProxyHandler(obj));
+}
+
+/**
+ * Loop over each item and apply watchGet() to each item.
+ * @param arrayPath {*[]}
+ * @param callback {function(obj:Object, index:int):Template}
+ * @returns {Template} */
+export function forEach(arrayPath, callback) {
+	let array = delve(arrayPath[0], arrayPath.slice(1));
+
+	// This is retrieved on the 'insert' path inside renderWatched()
+	let ngm = NodeGroupManager.get(arrayPath[0]);
+	if (ngm.clearSubscribers) {
+		ngm.clearSubscribers = false;
+		ngm.pathToLoopInfo = new MultiValueMap();
+	} // TODO: Move tis into NodeGroupMAnager.get() without breaking things?
+
+
+	let newItems = [...array.map((item, i) => {
+			// TODO: This needs to wrap callback so we can pass it the index also.
+			return watchGet([...arrayPath, i], callback); // calls callback(array[i], i)
+		})
+	];
+
+	// We return a template that wraps the array
+	// So that NodeGroup.applyOneExpr can set the ExprPath and nextSibling on the template.
+	// Then the 'insert' path in renderWatched() uses that data fora dding more nodes.
+	let result = new Template(['', ''], [newItems])
+
+
+	// We get a unique hash for each foreach template because the [''] array is unique each time.
+	let loopInfo = new LoopInfo(result, callback);
+	ngm.pathToLoopInfo.add(serializePath(arrayPath), loopInfo);
+	return result;
+}
+
+export function serializePath(path) {
+	// Convert any array indices to strings, so serialized comparisons work.
+	return JSON.stringify([getObjectId(path[0]), ...path.slice(1).map(item => item+'')])
+
+}
+
+
+/**
+ * When an object property is accessed, a new Proxy with a new instance of this handler class is created,
+ * but it tracks the path from the root to the property.
+ * That way when a property is set, it can report the changed path. */
+class ProxyHandler {
+	
+	/**
+	 * @param root An element managed by a NodeGroupManager.  The same as the NodeGroupManager's rootEl.
+	 * @param path {string[]} Used internally. */
+	constructor(root, path=[]) {
+		/*#IFDEV*/assert(NodeGroupManager.get(root))/*#ENDIF*/
+		this.root = root;
+		this.path = path; // path from root to this Proxy.
+	}
+
+	/**
+	 * @param obj {Object}
+	 * @param prop {string} */
+	get(obj, prop) {
+		
+		// Special props.  Currently unused.
+		// if (prop === '$path')
+		// 	return this.path;
+		// if (prop === '$root')
+		// 	return this.root;
+		if (prop === '$isProxy')
+		 	return true;
+		
+		
+		// 1. Array.splice()
+		if (prop === 'splice' && Array.isArray(obj)) {
+			return (index, deleteCount, ...items) => {
+				let ngm = NodeGroupManager.get(this.root)
+
+				if (deleteCount) {
+
+					// Get the hash of each object along the delete range.  The process to get the hash is:
+					// Serialized Path -> transformer -> Template -> hash.
+					let hashes = [];
+					for (let i=index; i<index+deleteCount; i++) {
+						let serializedPath = serializePath([this.root, ...this.path, i+'']);
+
+						let obj = delve(this.root, [...this.path, i])
+						for (let transformerInfo of pathToTransformer.getAll(serializedPath)) {
+							let template = transformerInfo.transformer(obj);
+							let hash = getObjectHash(template);
+							hashes.push(hash); // Hashes may go to nodes in more than one loop.
+						}
+					}
+
+					ngm.changes.push(new Change('delete', this.root, [...this.path, index+''], hashes));
+				}
+
+				//let oldArray = [...obj];
+				let result = obj.splice(index, deleteCount);
+
+				// Inserting
+				if (items.length) {
+
+					let beforeNgs;
+					for (let loopInfo of ngm.getLoopInfo([this.root, ...this.path])) {
+						let beforeObj = delve(this.root, [...this.path, index]);
+
+						// Find where to insert before.
+						if (beforeObj) {
+							let beforeTemplate = loopInfo.itemTransformer(beforeObj);
+							let beforeHash = getObjectHash(beforeTemplate);
+							beforeNgs = ngm.nodeGroupsAvailable.data[beforeHash];
+
+							if (beforeNgs) {
+								let hash = getObjectHash(loopInfo.template)
+								let loopNgs = ngm.nodeGroupsAvailable.data[hash] || [];
+								for (let loopNg of loopNgs)
+									for (let beforeNg of beforeNgs)
+										if (beforeNg.startNode.parentNode === loopNg.startNode.parentNode)
+											ngm.changes.push(new Change('insert', this.root, [...this.path, index + ''], items, beforeTemplate));
+							}
+						}
+						if (!beforeNgs)
+							ngm.changes.push(new Change('insert', this.root, [...this.path, index + ''], items));
+					}
+					obj.splice(index, 0, ...items);
+				}
+				return result;
+			}
+		}
+		
+
+
+		// 2.  Get property
+		// If we're getting an object or array property, apply watch() to it recursively.
+		let result = Reflect.get(obj, prop)
+		if (result && typeof result === 'object') {
+			let handler = new ProxyHandler(this.root, [...this.path, prop]); // same root, one level deeper on the path.
+			return new Proxy(result, handler);
+		}
+
+		return result;
+	}
+
+
+	set(obj, prop, newValue) {
+		let ngm = NodeGroupManager.get(this.root);
+		ngm.changes.push(new Change('set', this.root, [...this.path, prop], newValue));
+		return Reflect.set(obj, prop, newValue)
+	}
+}
+
+
+/**
+ *
+ */
+class Change {
+	
+	/**
+	 * @param action {string}
+	 * @param root {Object|Array}
+	 * @param path {string[]}
+	 * @param value
+	 *	 If setting a value, this is the new value.
+	 *	 If deleting from an array, this is an array of all the NodeGroups to delete.
+	 *
+	 * @param beforeTemplate
+	 * */
+	constructor(action, root, path, value, beforeTemplate=null) {
+		this.action = action;
+
+		// TODO: Store root as first item of path, to be consistent with code elsewhere.
+		this.root = root;
+		this.path = path;
+		this.value = value;
+		this.beforeTemplate = beforeTemplate;
+
+		/** @type {TransformerInfo[]} */
+		this.transformerInfo = [];
+
+		// Traverse up the path.
+		for (let i=this.path.length; i>0; i--) {
+			let path = this.path.slice(0, i);
+			let fullPath = [this.root, ...path];
+
+			let serializedPath = getObjectHash(fullPath); // TODO: Why not serializedPath() ?
+			this.transformerInfo.push(...pathToTransformer.getAll(serializedPath))
+		}
+	}
+}