solarite 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solarite",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Solarite is a small, fast, compilation-free JavaScript web component library that closely follows modern web standards.",
   "main": "dist/Solarite.js",
   "directories": {

package/readme.md

@@ -1,3 +1,13 @@
 # Solarite
 
-Solarite is a small (10KB min+gzip), fast, compilation-free JavaScript web component library that follows modern web standards and integrates well with vanilla JavaScript.
+Solarite is a small (10KB min+gzip), fast, compilation-free JavaScript web component library for rendering minimal updates.  It follows modern web standards and integrates well with vanilla JavaScript.
+
+It's currently in beta.
+
+For documentation and examples, see the **[Official Solarite Page](https://vorticode.github.io/solarite/)**.
+
+Download [Solarite.js](https://vorticode.github.io/solarite/dist/Solarite.js) (87KB, 8KB min+gzip)
+
+Or:
+
+`npm install solarite`

package/src/solarite/ExprPath.js

@@ -3,6 +3,8 @@ import delve from "../util/delve.js";
 import {getObjectId} from "./hash.js";
 import NodeGroup from "./NodeGroup.js";
 import {div, findArrayDiff, setIndent} from "./Util.js";
+import Template from "./Template.js";
+import Globals from "./Globals.js";
 
 /**
  * Path to where an expression should be evaluated within a Shell.
@@ -122,6 +124,94 @@ export default class ExprPath {
 			this.attrNames = new Set();
 	}
 
+	/**
+	 *
+	 * @param expr {Template|Node|Array|function|*}
+	 * @param newNodes {(Node|Template)[]}
+	 * @param secondPass {Array} Locations within newNodes to evaluate later.  */
+	apply(expr, newNodes, secondPass) {
+
+		if (expr instanceof Template) {
+			expr.nodegroup = this.parentNg; // All tests pass w/o this.
+
+			let ng = this.parentNg.manager.getNodeGroup(expr, true);
+
+
+			if (ng) {
+				//#IFDEV
+				// Make sure the nodeCache of the ExprPath we took it from is sitll valid.
+				if (ng.parentPath)
+					ng.parentPath.verify();
+				//#ENDIF
+
+
+				// TODO: Track ranges of changed nodes and only pass those to udomdiff?
+				// But will that break the swap benchmark?
+				newNodes.push(...ng.getNodes());
+				this.nodeGroups.push(ng);
+			}
+
+			// If expression, evaluate later to find partial match.
+			else {
+				secondPass.push([newNodes.length, this.nodeGroups.length])
+				newNodes.push(expr)
+				this.nodeGroups.push(null); // placeholder
+			}
+		}
+
+		// Node created by an expression.
+		else if (expr instanceof Node) {
+
+			// DocumentFragment created by an expression.
+			if (expr instanceof DocumentFragment)
+				newNodes.push(...expr.childNodes);
+			else
+				newNodes.push(expr);
+		}
+
+		else if (Array.isArray(expr))
+			for (let subExpr of expr)
+				this.apply(subExpr, newNodes, secondPass)
+
+		else if (typeof expr === 'function') {
+			//expr = watchFunction(expr, this.parentNg.manager); // part of watch2() experiment.
+
+			Globals.currentExprPath = [this, expr]; // Used by watch3()
+			let result = expr();
+			Globals.currentExprPath = null;
+
+			this.apply(result, newNodes, secondPass)
+		}
+
+		// Text
+		else {
+			// Convert falsy values (but not 0) to empty string.
+			// Convert numbers to string so they compare the same.
+			let text = (expr === undefined || expr === false || expr === null) ? '' : expr + '';
+
+			// Fast path for updating the text of a single text node.
+			let first = this.nodeBefore.nextSibling;
+			if (first.nodeType === 3 && first.nextSibling === this.nodeMarker && !newNodes.includes(first)) {
+				if (first.textContent !== text)
+					first.textContent = text;
+
+				newNodes.push(first);
+			}
+
+			else {
+				// TODO: Optimize this into a Set or Map or something?
+				if (!this.existingTextNodes)
+					this.existingTextNodes = this.getNodes().filter(n => n.nodeType === 3);
+
+				let idx = this.existingTextNodes.findIndex(n => n.textContent === text);
+				if (idx !== -1)
+					newNodes.push(...this.existingTextNodes.splice(idx, 1))
+				else
+					newNodes.push(this.parentNode.ownerDocument.createTextNode(text));
+			}
+		}
+	}
+
 	applyMultipleAttribs(node, expr) {
 		/*#IFDEV*/assert(this.type === PathType.Multiple);/*#ENDIF*/
 
@@ -302,8 +392,7 @@ export default class ExprPath {
 	 * Clear the nodeCache of this ExprPath, as well as all parent and child ExprPaths that
 	 * share the same DOM parent node.
 	 *
-	 * TODO: Is recursive clearing ever necessary?
-	 */
+	 * TODO: Is recursive clearing ever necessary? */
 	clearNodesCache() {
 		let path = this;
 		
@@ -321,7 +410,7 @@ export default class ExprPath {
 			
 			// Clear cache of child ExprPaths that have the same parentNode
 			for (let ng of path.nodeGroups) {
-				if (ng) // Can be null from applyOneExpr()'s push(null) call.
+				if (ng) // Can be null from apply()'s push(null) call.
 					for (let path2 of ng.paths) {
 						if (path2.type === PathType.Content && path2.parentNode === parentNode) {
 							path2.nodesCache = null;

package/src/solarite/Globals.js

@@ -0,0 +1,11 @@
+var Globals = {
+
+	currentExprPath: [],
+
+	/**
+	 * Elements that are currently rendering via the r() function.
+	 * @type {WeakSet<HTMLElement>} */
+	rendering: new WeakSet()
+};
+
+export default Globals;

package/src/solarite/MultiValueMap.js

@@ -19,7 +19,11 @@ export default class MultiValueMap {
 		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;

package/src/solarite/NodeGroup.js

@@ -2,12 +2,11 @@ import {assert} from "../util/Errors.js";
 import ExprPath, {PathType, resolveNodePath} from "./ExprPath.js";
 import {getObjectHash} from "./hash.js";
 import Shell from "./Shell.js";
-import Template from "./Template.js";
 import udomdiff from "./udomdiff.js";
-import {watchFunction} from './watch2.js';
 import Util, {div, findArrayDiff, flattenAndIndent, isEvent, nodeToArrayTree, setIndent} from "./Util.js";
 import NodeGroupManager from "./NodeGroupManager.js";
 
+
 /** @typedef {boolean|string|number|function|Object|Array|Date|Node} Expr */
 
 /**
@@ -37,10 +36,10 @@ export default class NodeGroup {
 	/** @type {ExprPath[]} */
 	paths = [];
 
-	/** @type {string} */
+	/** @type {string} Key that matches the template and the expressions. */
 	exactKey;
 
-	/** @type {string} */
+	/** @type {string} Key that only matches the template.  */
 	closeKey;
 
 	/** @type {boolean} Used by NodeGroupManager. */
@@ -73,8 +72,10 @@ export default class NodeGroup {
 	 * @returns {NodeGroup} */
 	constructor(template, manager=null) {
 
-		// Used for forEach()
+		/** @type {Template} */
 		this.template = template;
+
+		/** @type {NodeGroupManager} */
 		this.manager = manager;
 		
 		// new!
@@ -90,7 +91,7 @@ export default class NodeGroup {
 		let replaceMode = typeof template.replaceMode === 'boolean'
 			? template.replaceMode
 			: fragment.children.length===1 &&
-				fragment.firstElementChild?.tagName.replace(/-REDCOMPONENT-PLACEHOLDER$/, '')
+				fragment.firstElementChild?.tagName.replace(/-SOLARITE-PLACEHOLDER$/, '')
 				=== manager?.rootEl?.tagName
 		if (replaceMode) {
 			this.pseudoRoot = fragment.firstElementChild;
@@ -117,7 +118,7 @@ export default class NodeGroup {
 		
 
 		// Update web component placeholders.
-		// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
+		// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
 		// Is this list needed at all?
 		//for (let component of shell.components)
 		//	this.components.push(resolveNodePath(this.startNode.parentNode, getNodePath(component)))
@@ -150,13 +151,19 @@ export default class NodeGroup {
 				this.createNewComponent(el)
 		}
 
-		if (this.manager.rootEl) {
+		if (this.manager?.rootEl) {
 
 			// ids
 			if (this.manager.options.ids !== false)
 				for (let path of shell.ids) {
 					let el = resolveNodePath(root, path);
-					let id = el.getAttribute('data-id') || el.getAttribute('id')
+					let id = el.getAttribute('data-id') || el.getAttribute('id');
+
+					// Don't allow overwriting existing class properties if they already have a non-Node value.
+					if (this.manager.rootEl[id] && !(this.manager.rootEl[id] instanceof Node))
+						throw new Error(`${this.manager.rootEl.constructor.name}.${id} already has a value.  `+
+							`Can't set it as a reference to <${el.tagName.toLowerCase()} id="${id}">`);
+
 					this.manager.rootEl[id] = el;
 				}
 
@@ -181,20 +188,13 @@ export default class NodeGroup {
 		}
 	}
 
-	updateStyles() {
-		if (this.styles)
-			for (let [style, oldText] of this.styles) {
-				let newText = style.textContent;
-				if (oldText !== newText)
-					Util.bindStyles(style, this.manager.rootEl);
-			}
-	}
-
 	/**
 	 * Use the paths to insert the given expressions.
 	 * Dispatches expression handling to other functions depending on the path type.
-	 * @param exprs {(*|*[]|function|Template)[]} */
-	applyExprs(exprs) {
+	 * @param exprs {(*|*[]|function|Template)[]}
+	 * @param paths {?ExprPath[]} Optional.  */
+	applyExprs(exprs, paths=null) {
+		paths = paths || this.paths;
 		
 		/*#IFDEV*/this.verify();/*#ENDIF*/
 		// Update exprs at paths.
@@ -202,7 +202,7 @@ export default class NodeGroup {
 
 		// We apply them in reverse order so that a <select> box has its options created from an expression
 		// before its value attribute is set via an expression.
-		for (let path of this.paths.toReversed()) {
+		for (let path of paths.toReversed()) {
 			expr = exprs[exprIndex];
 
 			// Nodes
@@ -213,8 +213,8 @@ export default class NodeGroup {
 
 			// Attributes
 			else {
-				let node = path.nodeMarker; // path.resolve(result);
-				let node2 = (this.manager.rootEl && node === this.pseudoRoot) ? this.manager.rootEl : node;
+				let node = path.nodeMarker;
+				let el = (this.manager?.rootEl && node === this.pseudoRoot) ? this.manager.rootEl : node;
 				/*#IFDEV*/assert(node);/*#ENDIF*/
 
 				// This is necessary both here and below.
@@ -224,10 +224,10 @@ export default class NodeGroup {
 				}
 
 				if (path.type === PathType.Multiple)
-					path.applyMultipleAttribs(node2, expr)
+					path.applyMultipleAttribs(el, expr)
 
 				// Capture attribute expressions to later send to the constructor of a web component.
-				// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
+				// Ctrl+F "solarite-placeholder" in project to find all code that manages subcomponents.
 				else if (path.nodeMarker !== this.pseudoRoot && path.type === PathType.Component)
 					this.currentComponentProps[path.attrName] = expr;
 				
@@ -238,13 +238,13 @@ export default class NodeGroup {
 
 					// Event attribute value
 					if (path.attrValue===null && (typeof expr === 'function' || Array.isArray(expr)) && isEvent(path.attrName)) {
-						let root = this.manager.rootEl || this.startNode.parentNode;  // latter is used when constructing a whole element.
-						path.applyEventAttrib(node2, expr, root);
+						let root = this.manager?.rootEl || this.startNode.parentNode;  // latter is used when constructing a whole element.
+						path.applyEventAttrib(el, expr, root);
 					}
 
 					// Regular attribute value.
-					else
-						exprIndex = path.applyValueAttrib(node2, exprs, exprIndex);
+					else // One node value may have multiple expressions.  Here we apply them all at once.
+						exprIndex = path.applyValueAttrib(el, exprs, exprIndex);
 				}
 
 				lastNode = path.nodeMarker;
@@ -273,6 +273,10 @@ export default class NodeGroup {
 		/*#IFDEV*/this.verify();/*#ENDIF*/
 	}
 
+	applyExpr(path, expr) {
+		// TODO: Use this if I can figure out how to adapt applyValueAttrib() to it.
+	}
+
 	/**
 	 * Insert/replace the nodes created by a single expression.
 	 * Called by applyExprs()
@@ -294,7 +298,7 @@ export default class NodeGroup {
 		//for (let ng of path.nodeGroups) // TODO: Is this necessary?
 		//	ng.parentPath = null;
 		path.nodeGroups = [];
-		this.applyOneExpr(expr, path, newNodes, secondPass);
+		path.apply(expr, newNodes, secondPass);
 		this.existingTextNodes = null;
 
 		// TODO: Create an array of old vs Nodes and NodeGroups together.
@@ -384,117 +388,32 @@ export default class NodeGroup {
 		}
 	}
 
-	// TODO: Move to ExprPath?
-	applyOneExpr(expr, path, newNodes, secondPass) {
-		
-		if (expr instanceof Template) {
-			expr.parentPath = path;
-			expr.nodegroup = this;
-			
-			//if (window.debug && expr.exprs[0] === 'Banana' && path.nodeGroups.length === 0)
-			//if (window.debug && expr.exprs[0] === 'Banana')
-			//	debugger;
-			
-			let ng = this.manager.getNodeGroup(expr, true);
-			
-			
-			if (ng) {
-				//#IFDEV
-				// Make sure the nodeCache of the ExprPath we took it from is sitll valid.
-				if (ng.parentPath)
-					ng.parentPath.verify();
-				//#ENDIF
-				
-				
-				// TODO: Track ranges of changed nodes and only pass those to udomdiff?
-				// But will that break the swap benchmark?
-				newNodes.push(...ng.getNodes());
-				path.nodeGroups.push(ng);
-			}
-			
-			// If expression, evaluate later to find partial match.
-			else {
-				secondPass.push([newNodes.length, path.nodeGroups.length])
-				newNodes.push(expr)
-				path.nodeGroups.push(null); // placeholder
-			}
-		}
-
-		// Node created by an expression.
-		else if (expr instanceof Node) {
-
-			// DocumentFragment created by an expression.
-			if (expr instanceof DocumentFragment)
-				newNodes.push(...expr.childNodes);
-			else
-				newNodes.push(expr);
-		}
-
-		else if (Array.isArray(expr))
-			for (let subExpr of expr)
-				this.applyOneExpr(subExpr, path, newNodes, secondPass)
-
-		else if (typeof expr === 'function') {
-			expr = watchFunction(expr, this.manager)
-			
-			this.applyOneExpr(expr, path, newNodes, secondPass)
-		}
-
-		// Text
-		else {
-			// Convert falsy values (but not 0) to empty string.
-			// Convert numbers to string so they compare the same.
-			let text = (expr === undefined || expr === false || expr === null) ? '' : expr + '';
-
-			// Fast path for updating the text of a single text node.
-			let first = path.nodeBefore.nextSibling;
-			if (first.nodeType === 3 && first.nextSibling === path.nodeMarker && !newNodes.includes(first)) {
-				if (first.textContent !== text)
-					first.textContent = text;
-				
-				newNodes.push(first);
-			}
-
-			else {
-				// TODO: Optimize this into a Set or Map or something?
-				if (!this.existingTextNodes)
-					this.existingTextNodes = path.getNodes().filter(n => n.nodeType === 3);
-				
-				let idx = this.existingTextNodes.findIndex(n => n.textContent === text);
-				if (idx !== -1)
-					newNodes.push(...this.existingTextNodes.splice(idx, 1))
-				else
-					newNodes.push(path.parentNode.ownerDocument.createTextNode(text));
-			}
-		}
-	}
-
 	/**
 	 * Create a nested RedComponent or call render with the new props.
 	 * @param el {Solarite:HTMLElement}
 	 * @param props {Object} */
 	applyComponentExprs(el, props) {
-		
+
 		// TODO: Does a hash of this already exist somewhere?
 		// Perhaps if Components were treated as child NodeGroups, which would need to be the child of an ExprPath,
 		// then we could re-use the hash and logic from NodeManager?
 		let newHash = getObjectHash(props);
-		
-		let isPreHtmlElement = el.tagName.endsWith('-REDCOMPONENT-PLACEHOLDER');
+
+		let isPreHtmlElement = el.tagName.endsWith('-SOLARITE-PLACEHOLDER');
 		let isPreIsElement = el.hasAttribute('_is')
-		
-		
+
+
 		// Instantiate a placeholder.
 		if (isPreHtmlElement || isPreIsElement)
 			el = this.createNewComponent(el, isPreHtmlElement, props);
-		
+
 		// Update params of placeholder.
 		else if (el.render) {
 			let oldHash = componentHash.get(el);
 			if (oldHash !== newHash)
 				el.render(props); // Pass new values of props to render so it can decide how it wants to respond.
 		}
-		
+
 		componentHash.set(el, newHash);
 	}
 	
@@ -513,8 +432,8 @@ export default class NodeGroup {
 			isPreHtmlElement = !el.hasAttribute('_is');
 		
 		let tagName = (isPreHtmlElement
-			? el.tagName.endsWith('-REDCOMPONENT-PLACEHOLDER')
-				? el.tagName.slice(0, -25)
+			? el.tagName.endsWith('-SOLARITE-PLACEHOLDER')
+				? el.tagName.slice(0, -21)
 				: el.tagName
 			: el.getAttribute('is')).toLowerCase();
 
@@ -634,6 +553,17 @@ export default class NodeGroup {
 	}
 
 
+
+	updateStyles() {
+		if (this.styles)
+			for (let [style, oldText] of this.styles) {
+				let newText = style.textContent;
+				if (oldText !== newText)
+					Util.bindStyles(style, this.manager.rootEl);
+			}
+	}
+
+
 	//#IFDEV
 	/**
 	 * @deprecated

package/src/solarite/NodeGroupManager.js

@@ -10,8 +10,7 @@ import {assert} from "../util/Errors.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=} 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.
@@ -66,6 +65,7 @@ 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;
+
 		/*
 		//#IFDEV
 		
@@ -107,126 +107,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
-	}
-
 
 	/**
 	 *
@@ -329,6 +209,8 @@ export default class NodeGroupManager {
 						// But it can still be a close match, so we don't use this code.
 						success = this.nodeGroupsAvailable.delete(ng2.closeKey, ng2);
 						/*#IFDEV*/assert(success);/*#ENDIF*/
+
+						this.nodeGroupsInUse.push(ng2);
 					}
 				}
 			}
@@ -363,7 +245,7 @@ export default class NodeGroupManager {
 	 * but don't reparent it if it's somewhere else.
 	 * @param template {Template}
 	 * @param exact {?boolean}
-	 * @param createForWatch
+	 * @param createForWatch Deprecated.
 	 * @return {?NodeGroup} */
 	getNodeGroup(template, exact=null, createForWatch=false) {
 
@@ -423,7 +305,7 @@ 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?
+				if (createForWatch)
 					this.nodeGroupsAvailable.add(ng.exactKey, ng);
 				else
 					this.nodeGroupsInUse.push(ng)
@@ -468,7 +350,10 @@ export default class NodeGroupManager {
 	//pathToLoopInfo = new MultiValueMap(); // uses a Set() for each value.
 	clearSubscribers = false;
 
+	//#IFDEV
+
 	/**
+	 * @deprecated - part of watch.js (Watch v1)
 	 * 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 */
@@ -477,6 +362,8 @@ export default class NodeGroupManager {
 		return [...this.pathToLoopInfo.getAll(serializedArrayPath)]; // This is set inside forEach()
 	}
 
+	//#ENDIF
+
 	
 	/**
 	 * @deprecated
@@ -503,7 +390,10 @@ export default class NodeGroupManager {
 	 * Get the NodeGroupManager for a Web Component.
 	 * @param rootEl {Solarite|HTMLElement}
 	 * @return {NodeGroupManager} */
-	static get(rootEl) {
+	static get(rootEl=null) {
+		if (!rootEl)
+			return new NodeGroupManager();
+
 		let ngm = nodeGroupManagers.get(rootEl);
 		if (!ngm) {
 			ngm = new NodeGroupManager(rootEl);