solarite 0.1.0 → 0.2.0

package/src/{solarite → unused}/NodeGroupManager.js

@@ -1,24 +1,12 @@
 import MultiValueMap from "./MultiValueMap.js";
 import NodeGroup from "./NodeGroup.js";
 import {getObjectHash} from "./hash.js";
-import {serializePath} from "./watch.js";
 
 import {assert} from "../util/Errors.js";
+import Globals from "./Globals.js";
+import Template from "./Template.js";
 
 
-/**
- * @typedef {Object} RenderOptions
- * @property {boolean=} styles - Indicates whether the Courage component is present.
- * @property {boolean=} scripts - Indicates whether the Power component is present.
- * @property {boolean=} ids
- *
- * @property {?boolean} render
- * 	   Used only when options are given to a class super constructor inheriting from Solarite.
- *     True to call render() immediately in super constructor.
- *     False to automatically call render() at all.
- *     Undefined (default) to call render() when added to the DOM, unless already rendered.
- */
-
 
 /**
  * Manage all the NodeGroups for a single WebComponent or root HTMLElement
@@ -26,7 +14,7 @@ import {assert} from "../util/Errors.js";
  * 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. */
-export default class NodeGroupManager {
+class NodeGroupManager {
 
 	/** @type {HTMLElement|DocumentFragment} */
 	rootEl;
@@ -47,13 +35,17 @@ export default class NodeGroupManager {
 	/**
 	 * 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} */
+	/** @type {RenderOptions} TODO: Where is this ever used? */
 	options = {};
 
 	
@@ -66,16 +58,19 @@ export default class NodeGroupManager {
 	 * @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.
@@ -107,126 +102,6 @@ export default class NodeGroupManager {
 		*/
 	}
 
-	/**
-	 * Render the main template, which may indirectly call renderTemplate() to create children.
-	 * @param template {Template}
-	 * @param options {RenderOptions}
-	 * @return {?DocumentFragment} */
-	render(template, options={}) {
-		this.mutationWatcherEnabled = false;
-		this.options = options;
-		this.clearSubscribers = false;
-		
-		//#IFDEV
-		this.modifications = {
-			created: [],
-			updated: [],
-			moved: [],
-			deleted: []
-		};
-		//#ENDIF
-		
-		if (!template && template !== '') {
-			this.rootEl.outerHTML = '';
-			this.mutationWatcherEnabled = true;
-			return null;
-		}
-		
-		// Fast path for empty component.
-		if (template.html?.length === 1 && !template.html[0]) {
-			this.rootEl.innerHTML = '';
-		}
-		else {
-
-			// Find or create a NodeGroup for the template.
-			// This updates all nodes from the template.
-			let close;
-			let exact = this.getNodeGroup(template, true);
-			if (!exact) {
-				close = this.getNodeGroup(template, false);
-			}
-			
-			
-			let firstTime = !this.rootNg;
-			this.rootNg = exact || close;
-
-			// Reparent NodeGroup
-			// TODO: Move this to NodeGroup?
-			let parent = this.rootNg.getParentNode()
-			if (!this.rootEl)
-				this.rootEl = parent;
-
-			// If this is the first time rendering this element.
-			else if (firstTime) {
-
-				// Save slot children
-				let fragment;
-				if (this.rootEl.childNodes.length) {
-					fragment = document.createDocumentFragment();
-					fragment.append(...this.rootEl.childNodes);
-				}
-
-				// Add rendered elements.
-				if (parent instanceof DocumentFragment)
-					this.rootEl.append(parent);
-				else if (parent)
-					this.rootEl.append(...parent.childNodes)
-
-				// Apply slot children
-				if (fragment) {
-					for (let slot of this.rootEl.querySelectorAll('slot[name]')) {
-						let name = slot.getAttribute('name')
-						if (name)
-							slot.append(...fragment.querySelectorAll(`[slot='${name}']`))
-					}
-					let unamedSlot = this.rootEl.querySelector('slot:not([name])')
-					if (unamedSlot)
-						unamedSlot.append(fragment)
-				}
-
-			}
-
-			// this.rootNg was rendered as childrenOnly=true
-			// Apply attributes from a root element to the real root element.
-			let ng = this.rootNg;
-			if (ng.pseudoRoot && ng.pseudoRoot !== this.rootEl) {
-				/*#IFDEV*/assert(this.rootEl)/*#ENDIF*/
-
-				// Remove old attributes
-				// for (let attrib of this.rootEl.attributes)
-				// 	if (attrib.name !== 'is' && attrib.name !== 'data-style' && !ng.pseudoRoot.hasAttribute(attrib.name))
-				// 		this.rootEl.removeAttribute(attrib.name)
-
-				// Add/set new attributes
-				if (firstTime)
-                    for (let attrib of ng.pseudoRoot.attributes)
-                        if (!this.rootEl.hasAttribute(attrib.name))
-                            this.rootEl.setAttribute(attrib.name, attrib.value);
-
-				// ng.startNode = ng.endNode = this.rootEl;
-				// ng.nodesCache = [ng.startNode]
-				// for (let path of ng.paths) {
-				// 	if (path.nodeMarker === ng.rootEl)
-				// 		path.nodeMarker = this.rootEl;
-				// 	path.nodesCache = null;
-				// 	/*#IFDEV*/assert(path.nodeBefore !== ng.rootEl)/*#ENDIF*/
-				// }
-				//
-				// ng.rootEl = this.rootEl;
-			}
-
-			/*#IFDEV*/this.rootNg.verify();/*#ENDIF*/
-			this.reset();
-			/*#IFDEV*/this.rootNg.verify();/*#ENDIF*/
-		}
-
-		this.mutationWatcherEnabled = true;
-		return this.rootEl;
-		//#IFDEV
-		//return this.modifications;
-		//#ENDIF
-	}
-
 
 	/**
 	 *
@@ -267,9 +142,10 @@ export default class NodeGroupManager {
 					if (!ng2.inUse) {
 						ng2.inUse = true;
 						let success = this.nodeGroupsAvailable.delete(ng2.exactKey, ng2);
-						// assert(success);
+						assert(success);
+
 						let success2 = this.nodeGroupsAvailable.delete(ng2.closeKey, ng2);
-						// assert(success);
+						assert(success2);
 						/*#IFDEV*/assert(success === success2)/*#ENDIF*/
 
 						// console.log(getHtml(ng2))
@@ -283,8 +159,10 @@ export default class NodeGroupManager {
 			// Recurse to mark all child NodeGroups as in-use.
 			for (let path of ng.paths)
 				for (let childNg of path.nodeGroups) {
-					if (!childNg.inUse)
+					if (!childNg.inUse) {
 						this.findAndDeleteExact(childNg.exactKey, false, childNg);
+					//	this.findAndDeleteClose(childNg.closeKey, childNg.exactKey, false);
+					}
 					childNg.inUse = true;
 				}
 			
@@ -309,6 +187,7 @@ export default class NodeGroupManager {
 		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*/
@@ -323,12 +202,16 @@ export default class NodeGroupManager {
 				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 don't use this code.
+						// 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);
 					}
 				}
 			}
@@ -362,59 +245,49 @@ export default class NodeGroupManager {
 	 * 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}
-	 * @param createForWatch
+	 * @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, createForWatch=false) {
+	getNodeGroup(template, exact=null, replaceMode=null, exactKey=null) {
+		exactKey = exactKey || getObjectHash(template);
 
-		let exactKey = getObjectHash(template)
-
-		/*#IFDEV*/if(NodeGroupManager.logEnabled) this.log(`Looking for ${exact ? 'exact' : 'close'} match: ` + template.debug)/*#ENDIF*/
+		/*#IFDEV*/if(logEnabled) this.log(`Looking for ${exact ? 'exact' : 'close'} match: ` + template.debug)/*#ENDIF*/
 
 		// 1. Try to find an exact match.
-		let ng;
-		if (exact === true) {
-			ng = this.findAndDeleteExact(exactKey);
-
-			if (!ng) {
-				/*#IFDEV*/this.log(`Not found.`)/*#ENDIF*/
-				return null;
-			}
-			/*#IFDEV*/if(NodeGroupManager.logEnabled) this.log(`Found exact: ` + ng.debug)/*#ENDIF*/
+		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.
-		else {
+		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 = createForWatch ? null : this.findAndDeleteClose(closeKey, exactKey);
+			ng = this.findAndDeleteClose(closeKey, exactKey);
 
 			// 2. Update expression values if they've changed.
 			if (ng) {
-				
-				// Temporary for debugging:
-				if (window.debug && !window.ng)
-					window.ng = ng;
-
-				/*#IFDEV*/if(NodeGroupManager.logEnabled) this.log(`Found close: ` + closeKey + '   ' + ng.debug)/*#ENDIF*/
+				/*#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*/ng.verify();/*#ENDIF*/
 				/*#IFDEV*/this.incrementLogDepth(-1);/*#ENDIF*/
-				/*#IFDEV*/if(NodeGroupManager.logEnabled) this.log(`Updated close to: ` + ng.debug)/*#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);
-				/*#IFDEV*/this.incrementLogDepth(-1);/*#ENDIF*/
 
-				//#IFDEV
-				this.modifications.created.push(...ng.getNodes())
-				//#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.
@@ -423,12 +296,9 @@ export default class NodeGroupManager {
 				// Perhaps also result could cache its last exprKey and then we'd use only one map?
 				ng.exactKey = exactKey;
 				ng.closeKey = closeKey;
-				if (createForWatch) // TODO: Have this path be a separate function?
-					this.nodeGroupsAvailable.add(ng.exactKey, ng);
-				else
-					this.nodeGroupsInUse.push(ng)
+				this.nodeGroupsInUse.push(ng)
 
-				/*#IFDEV*/if(NodeGroupManager.logEnabled) this.log(`Created new ` + ng.debug)/*#ENDIF*/
+				/*#IFDEV*/if (logEnabled) this.log(`Created new ` + ng.debug)/*#ENDIF*/
 			}
 		}
 		
@@ -446,7 +316,13 @@ export default class NodeGroupManager {
 		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) {
@@ -461,53 +337,41 @@ export default class NodeGroupManager {
 
 		/*#IFDEV*/this.log('----------------------')/*#ENDIF*/
 		// TODO: free the memory from any nodeGroupsAvailable() after render is done, since they weren't used?
-	}
 
 
-	// deprecated
-	//pathToLoopInfo = new MultiValueMap(); // uses a Set() for each value.
-	clearSubscribers = false;
-
-	/**
-	 * One path may be used to loop in more than one place, so we use this to get every anchor from each loop.
-	 * @param path {Array}
-	 * @return {LoopInfo[]} A function that gets the loop anchor NodeGroup */
-	getLoopInfo(path) {
-		let serializedArrayPath = serializePath(path);
-		return [...this.pathToLoopInfo.getAll(serializedArrayPath)]; // This is set inside forEach()
+		/*#IFDEV*/this.rootNg.verify();/*#ENDIF*/
 	}
 
-	
-	/**
-	 * @deprecated
-	 * Store the functions used to create items for each loop.
-	 * TODO: Can this be combined with pathToTemplates?
-	 * @type {MultiValueMap<string, Subscriber>} */
-	pathToLoopInfo = new MultiValueMap();
-	
-	/**
-	 * Maps variable paths to the templates used to create NodeGroups
-	 * @type {MultiValueMap<string, Subscriber>} */
-	subscribers = new MultiValueMap();
-	
-	clearSubscribersIfNeeded() {
-		if (this.clearSubscribers) {
-			this.pathToLoopInfo = new MultiValueMap();
-			this.subscribers = new MultiValueMap();
-			this.clearSubscribers = false;
-		}
+	resetModifications() {
+		this.modifications = {
+			created: [],
+			updated: [],
+			moved: [],
+			deleted: []
+		};
 	}
-	
 
 	/**
-	 * Get the NodeGroupManager for a Web Component.
-	 * @param rootEl {Solarite|HTMLElement}
+	 * 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) {
-		let ngm = nodeGroupManagers.get(rootEl);
-		if (!ngm) {
-			ngm = new NodeGroupManager(rootEl);
-			nodeGroupManagers.set(rootEl, ngm);
+	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;
@@ -515,13 +379,13 @@ export default class NodeGroupManager {
 
 
 	//#IFDEV
-	static logEnabled = false;
+
 	incrementLogDepth(level) {
 		this.logDepth += level;
 	}
 	log(msg, level=0) {
 		this.logDepth += level;
-		if (NodeGroupManager.logEnabled) {
+		if (logEnabled) {
 			let indent = '	'.repeat(this.logDepth);
 			console.log(indent + msg);
 		}
@@ -567,11 +431,9 @@ export default class NodeGroupManager {
 
 NodeGroupManager.pendingChildren = [];
 
-/**
- * Each Element that has Expr children has an associated NodeGroupManager here.
- * @type {WeakMap<HTMLElement, NodeGroupManager>} */
-let nodeGroupManagers = new WeakMap();
-
+//#IFDEV
+let logEnabled = false // Prevent rollup's static analyzer from removing this.
+//#ENDIF
 
 
 export class LoopInfo {

package/src/unused/onConnect.js

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

package/src/{solarite → unused}/watch.js

@@ -5,7 +5,7 @@ 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 NodeGroupManager, {LoopInfo} from "./NodeGroupManager.js";
 import Template from "./Template.js";
 
 
@@ -136,7 +136,7 @@ export function forEach(arrayPath, callback) {
 	];
 
 	// We return a template that wraps the array
-	// So that NodeGroup.applyOneExpr can set the ExprPath and nextSibling on the template.
+	// So that ExprPath.apply() 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])
 

package/src/{solarite → unused}/watch2.js

@@ -1,6 +1,6 @@
 import {assert} from "../util/Errors.js";
 import {getObjectId} from "./hash.js";
-import NodeGroupManager from "./NodeGroupManager.js";
+//import NodeGroupManager from "./NodeGroupManager.js";
 import Template from "./Template.js";
 import {serializePath} from "./watch.js";
 import delve from "../util/delve.js";
@@ -11,6 +11,7 @@ export {logGets, gets}
 
 let withinSet = 0;
 
+
 /**
  * Turn the props on obj into JavasCript properties that return Proxies when accessed.
  * If called more than once, return the already-converted object.
@@ -112,7 +113,6 @@ class ProxyHandler {
 		else if (prop === 'map' && Array.isArray(obj)) {
 			
 			let ngm = NodeGroupManager.get(this.root);
-			ngm.clearSubscribersIfNeeded();
 			
 			return callback => {
 				let loopInfo;
@@ -291,7 +291,7 @@ class ProxyHandler {
 			let obj2 = obj === this.root && this.props ? this.props : obj;
 			let result = Reflect.get(obj2, prop);
 
-			// This is read by watchFunction() which is called in NodeGroup.applyOneExpr().
+			// This is read by watchFunction() which is called in ExprPath.apply().
 			// It's used to see what variables contribute to an expression.
 			if (logGets)
 				gets.push([this.root, ...this.path, prop]);
@@ -392,7 +392,7 @@ function getProxy(obj, ph, path, path2) {
 
 /**
  * Call a function and record which watched variables it accesess, storing their paths in pathToTemplates.
- * Used by NodeGroup.applyOneExpr().
+ * Used by ExprPath.apply().
  * TODO: only allow this to be called once per callback.
  * @param callback {function}
  * @param ngm {NodeGroupManager}

package/src/{solarite → util}/MultiValueMap.js

@@ -14,18 +14,28 @@ export default class MultiValueMap {
 		set.add(value);
 	}
 
+	isEmpty() {
+		for (let key in this.data)
+			return true;
+		return false;
+	}
+
 	// Get all values for a key
 	getAll(key) {
 		return this.data[key] || [];
 	}
 
-	// Remove one value from a key, and return it
+	/**
+	 * 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 {*} */
 	delete(key, val=undefined) {
 		// if (key === '["Html2",[[["Html3",["F1","A"]],["Html3",["F1","B"]]]]]')
 		// 	debugger;
-			
+
 		let data = this.data;
-		// The partialUpdate benchmark shows having this check first makes the function slightly faster.
+
 		// if (!data.hasOwnProperty(key))
 		// 	return undefined;
 
@@ -33,24 +43,25 @@ export default class MultiValueMap {
 		let result;
 		let set = data[key];
 		if (!set) // slower than pre-check.
-		 	return undefined;
+			return undefined;
 
-		if (val !== undefined) {
-			set.delete(val);
-			result = val;
+		// Delete any value.
+		if (val === undefined) {
+			//result = set.values().next().value; // get first item from set.
+			[result] = set; // Does the same as above and seems to be about the same speed.
+			set.delete(result);
 		}
 
-		// Delete any value.
+		// Delete a specific value.
 		else {
-			result = set.values().next().value;
-			// [result] = set; // Does the same as above. is about the same speed?
-			set.delete(result);
+			set.delete(val);
+			result = val;
 		}
 
 		// TODO: Will this make it slower?
 		if (set.size === 0)
 			delete data[key];
-		
+
 		return result;
 	}