solarite 0.1.1 → 0.2.0

package/src/solarite/Shell.js

@@ -1,23 +1,24 @@
 import {assert} from "../util/Errors.js";
 import ExprPath, {PathType, getNodePath} from "./ExprPath.js";
-
 import {div, htmlContext, isEvent} from "./Util.js";
+import Globals from "./Globals.js";
 
 /**
  * A Shell is created from a tagged template expression instantiated as Nodes,
- * but without any expressions filled in. */
+ * but without any expressions filled in.
+ * Only one Shell is created for all the items in a loop.
+ *
+ * When a NodeGroup is created from a Template's html strings,
+ * the NodeGroup then clones the Shell's fragmentn to be its nodes. */
 export default class Shell {
 
 	/**
-	 * @type {DocumentFragment} Parent of the shell nodes. */
+	 * @type {DocumentFragment} DOM parent of the shell nodes. */
 	fragment;
 
 	/** @type {ExprPath[]} Paths to where expressions should go. */
 	paths = [];
 
-	/** @type {?Template} Template that created this element. */
-	template;
-
 	// Embeds and ids
 	events = [];
 
@@ -29,6 +30,7 @@ export default class Shell {
 	staticComponents = [];
 
 
+
 	/**
 	 * Create the nodes but without filling in the expressions.
 	 * This is useful because the expression-less nodes created by a template can be cached.
@@ -122,7 +124,9 @@ export default class Shell {
 						let parts = attr.value.split(/[\ue000-\uf8ff]/g);
 						if (parts.length > 1) {
 							let nonEmptyParts = (parts.length === 2 && !parts[0].length && !parts[1].length) ? null : parts;
-							this.paths.push(new ExprPath(null, node, PathType.Value, attr.name, nonEmptyParts));
+							let type = isEvent(attr.name) ? PathType.Event : PathType.Value;
+
+							this.paths.push(new ExprPath(null, node, type, attr.name, nonEmptyParts));
 							node.setAttribute(attr.name, parts.join(''));
 						}
 					}
@@ -134,7 +138,7 @@ export default class Shell {
 				// Get or create nodeBefore.
 				let nodeBefore = node.previousSibling; // Can be the same as another Path's nodeMarker.
 				if (!nodeBefore) {
-					nodeBefore = document.createComment('PathStart:'+this.paths.length);
+					nodeBefore = document.createComment('ExprPath:'+this.paths.length);
 					node.parentNode.insertBefore(nodeBefore, node)
 				}
 				/*#IFDEV*/assert(nodeBefore);/*#ENDIF*/
@@ -150,16 +154,14 @@ export default class Shell {
 				// Re-use existing comment placeholder.
 				else {
 					nodeMarker = node;
-					nodeMarker.textContent = 'PathEnd:'+ this.paths.length;
+					nodeMarker.textContent = 'ExprPathEnd:'+ this.paths.length;
 				}
 				/*#IFDEV*/assert(nodeMarker);/*#ENDIF*/
 
 
 
 				let path = new ExprPath(nodeBefore, nodeMarker, PathType.Content);
-				//#IFDEV
-				path.parentIndex = this.paths.length; // For debugging.
-				//#ENDIF
+
 				this.paths.push(path);
 			}
 			
@@ -173,9 +175,6 @@ export default class Shell {
 				for (let i=0; i<parts.length-1; i++) {
 					let path = new ExprPath(node.previousSibling, node)
 					path.type = PathType.Comment;
-					//#IFDEV
-					path.parentIndex = i; // For debugging.
-					//#ENDIF
 					this.paths.push(path);
 				}
 			}
@@ -194,10 +193,7 @@ export default class Shell {
 					}
 
 					for (let i=0, node; node=placeholders[i]; i++) {
-						let path = new ExprPath(node.previousSibling, node, PathType.Content)
-						//#IFDEV
-						path.parentIndex = i; // For debugging.
-						//#ENDIF
+						let path = new ExprPath(node.previousSibling, node, PathType.Content);
 						this.paths.push(path);
 
 						/*#IFDEV*/path.verify();/*#ENDIF*/
@@ -228,22 +224,25 @@ export default class Shell {
 			path.nodeMarkerPath = getNodePath(path.nodeMarker)
 
 			// Cache so we don't have to calculate this later inside NodeGroup.applyExprs()
-			if (path.type === PathType.Value && path.nodeMarker.nodeType === 1 &&
+			if (path.type === PathType.Value && path.nodeMarker.nodeType === 1 && /*path.nodeMarker !== template.content.children[0] &&*/
 				(path.nodeMarker.tagName.includes('-') || path.nodeMarker.hasAttribute('is'))) {
 				path.type = PathType.Component;
 			}
 		}
 
-
 		this.findEmbeds();
 
-
 		/*#IFDEV*/this.verify();/*#ENDIF*/
 	} // end constructor
 
 	/**
 	 * We find the path to every embed here once in the Shell, instead of every time a NodeGroup is instantiated.
-	 * When a Nodegroup is created, it calls NodeGroup.activateEmbeds() that uses these paths. */
+	 * When a Nodegroup is created, it calls NodeGroup.activateEmbeds() that uses these paths.
+	 * Populates:
+	 * this.scripts
+	 * this.styles
+	 * this.ids
+	 * this.staticComponents */
 	findEmbeds() {
 		this.scripts = Array.prototype.map.call(this.fragment.querySelectorAll('scripts'), el => getNodePath(el))
 		this.styles = Array.prototype.map.call(this.fragment.querySelectorAll('style'), el => getNodePath(el))
@@ -255,7 +254,7 @@ export default class Shell {
 		for (let el of idEls) {
 			let id = el.getAttribute('data-id') || el.getAttribute('id')
 			if (div.hasOwnProperty(id))
-				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement property.`)
+				throw new Error(`<${el.tagName.toLowerCase()} id="${id}"> can't override existing HTMLElement id property.`)
 		}
 
 
@@ -280,13 +279,13 @@ export default class Shell {
 
 	/**
 	 * Get the shell for the html strings.
-	 * @param htmlStrings {string[]}
+	 * @param htmlStrings {string[]} Typically comes from a Template.
 	 * @returns {Shell} */
 	static get(htmlStrings) {
-		let result = shells.get(htmlStrings);
+		let result = Globals.shells.get(htmlStrings);
 		if (!result) {
 			result = new Shell(htmlStrings);
-			shells.set(htmlStrings, result); // cache
+			Globals.shells.set(htmlStrings, result); // cache
 		}
 
 		/*#IFDEV*/result.verify();/*#ENDIF*/
@@ -304,4 +303,3 @@ export default class Shell {
 	//#ENDIF
 }
 
-let shells = new WeakMap();

package/src/solarite/Solarite.js

@@ -1,3 +1,10 @@
+/**
+ * Solarite JavasCript UI library.
+ * MIT License
+ * https://vorticode.github.io/solarite/
+ */
+
+
 import createSolarite from "./createSolarite.js";
 
 /**
@@ -15,7 +22,12 @@ export {Solarite}
 export {default as r} from './r.js';
 export {getArg, ArgType} from './getArg.js';
 export {default as Template} from './Template.js';
+export {default as Globals} from './Globals.js';
 
+import Util from './Util.js';
+let getInputValue = Util.getInputValue;
+export {getInputValue};
+export {default as delve} from '../util/delve.js';
 
 //Experimental:
 //export {forEach, watchGet, watchSet} from './watch.js' // old, unfinished

package/src/solarite/Template.js

@@ -1,8 +1,7 @@
 import {assert} from "../util/Errors.js";
-import {getObjectId} from "./hash.js";
-import NodeGroupManager from "./NodeGroupManager.js";
-import NodeGroup from "./NodeGroup.js";
-
+import {getObjectHash, getObjectId} from "./hash.js";
+import Globals from "./Globals.js";
+import {RootNodeGroup} from "./NodeGroup.js";
 
 /**
  * The html strings and evaluated expressions from an html tagged template.
@@ -16,12 +15,7 @@ export default class Template {
 	/** @type {string[]} */
 	html = [];
 
-	/**
-	 * If true, use this template to replace an existing element, instead of appending children to it.
-	 * @type {?boolean} */
-	replaceMode;
-
-	/** Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
+	/** @type {Array} Used for toJSON() and getObjectHash().  Stores values used to quickly create a string hash of this template. */
 	hashedFields;
 
 	/**
@@ -29,10 +23,10 @@ export default class Template {
     * @type {ExprPath} Used with forEach() from watch.js
 	 * Set in ExprPath.apply() */
 	parentPath;
-	
+
 	/** @type {NodeGroup} */
 	nodeGroup;
-	
+
 	/**
 	 * @type {string[][]} */
 	paths = [];
@@ -44,7 +38,7 @@ export default class Template {
 	constructor(htmlStrings, exprs) {
 		this.html = htmlStrings;
 		this.exprs = exprs;
-		
+
 		//this.trace = new Error().stack.split(/\n/g)
 
 		// Multiple templates can share the same htmlStrings array.
@@ -53,7 +47,7 @@ export default class Template {
 		//#IFDEV
 		assert(Array.isArray(htmlStrings))
 		assert(Array.isArray(exprs))
-		
+
 		Object.defineProperty(this, 'debug', {
 			get() {
 				return JSON.stringify([this.html, this.exprs]);
@@ -67,8 +61,8 @@ export default class Template {
 	 * This prevents the hashed version from being too large. */
 	toJSON() {
 		if (!this.hashedFields)
-			this.hashedFields = [getObjectId(this.html, 'Html'), this.exprs];
-		
+			this.hashedFields = [getObjectId(this.html), this.exprs];
+
 		return this.hashedFields
 	}
 
@@ -78,131 +72,64 @@ export default class Template {
 	 * @param options {RenderOptions}
 	 * @return {?DocumentFragment|HTMLElement} */
 	render(el=null, options={}) {
-
 		let ng;
-		if (!el) {
-			ng = new NodeGroup(this);
-			el = ng.getParentNode();
-		}
-
-		let ngm = NodeGroupManager.get(el);
-		if (ng)
-			ng.manager = ngm;
-
-		//#IFDEV
-		ngm.modifications = {
-			created: [],
-			updated: [],
-			moved: [],
-			deleted: []
-		};
-		//#ENDIF
-
-		ngm.options = options;
-		ngm.clearSubscribers = false; // Used for deprecated watch() path?
-		ngm.mutationWatcherEnabled = false;
-
-		// Fast path for empty component.
-		if (this.html?.length === 1 && !this.html[0]) {
-			el.innerHTML = '';
+		let standalone = !el;
+		let firstTime = false;
+
+		// Rendering a standalone element.
+		// TODO: figure out when to not use RootNodeGroup
+		if (standalone) {
+			ng = new RootNodeGroup(this, null, options);
+			el = ng.getRootNode();
+			Globals.nodeGroups.set(el, ng);
+			firstTime = true;
 		}
 		else {
-
-			// Find or create a NodeGroup for the template.
-			// This updates all nodes from the template.
-			let close;
-			let exact = ngm.getNodeGroup(this, true);
-			if (!exact) {
-				close = ngm.getNodeGroup(this, false);
-			}
-
-			let firstTime = !ngm.rootNg;
-			ngm.rootNg = exact || close;
-
-			// Reparent NodeGroup
-			// TODO: Move this to NodeGroup?
-			let parent = ngm.rootNg.getParentNode();
-
-
-			// If this is the first time rendering this element.
-			if (firstTime) {
-
-				// Save slot children
-				let fragment;
-				if (el.childNodes.length) {
-					fragment = document.createDocumentFragment();
-					fragment.append(...el.childNodes);
-				}
-
-				// Add rendered elements.
-				if (parent instanceof DocumentFragment)
-					el.append(parent);
-				else if (parent)
-					el.append(...parent.childNodes)
-
-				// Apply slot children
-				if (fragment) {
-					for (let slot of el.querySelectorAll('slot[name]')) {
-						let name = slot.getAttribute('name')
-						if (name)
-							slot.append(...fragment.querySelectorAll(`[slot='${name}']`))
-					}
-					let unamedSlot = el.querySelector('slot:not([name])')
-					if (unamedSlot)
-						unamedSlot.append(fragment)
-				}
+			ng = Globals.nodeGroups.get(el);
+			if (!ng) {
+				ng = new RootNodeGroup(this, el, options);
+				Globals.nodeGroups.set(el, ng);
+				firstTime = true;
 			}
+		}
 
-			ngm.rootEl = el;
-
-			// this.rootNg was rendered as childrenOnly=true
-			// Apply attributes from a root element to the real root element.
-			let ng = ngm.rootNg;
-			if (ng.pseudoRoot && ng.pseudoRoot !== el) {
-				/*#IFDEV*/assert(el)/*#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 (!el.hasAttribute(attrib.name))
-							el.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*/ngm.rootNg.verify();/*#ENDIF*/
-			ngm.reset(); // Mark all NodeGroups as available, for next render.
-			/*#IFDEV*/ngm.rootNg.verify();/*#ENDIF*/
-
-			window.ngm = ngm;
+		// Creating the root nodegroup also renders it.
+		// If we didn't just create it, we need to render it.
+		if (!firstTime) {
+			if (this.html?.length === 1 && !this.html[0])
+				el.innerHTML = ''; // Fast path for empty component.
+			else
+				ng.applyExprs(this.exprs);
 		}
 
-		ngm.mutationWatcherEnabled = true;
 		return el;
-		//#IFDEV
-		//return ngm.modifications;
-		//#ENDIF
 	}
 
+	getExactKey() {
+		if (!this.exactKey)
+			this.exactKey = getObjectHash(this); // calls this.toJSON().
+		return this.exactKey;
+	}
 
 	getCloseKey() {
-		// Use the joined html when debugging?
+		if (!this.closeKey)
+			this.closeKey = '@'+this.toJSON()[0];
+		// Use the joined html when debugging?  But it breaks some tests.
 		//return '@'+this.html.join('|')
 
-		return '@'+this.hashedFields[0];
+		return this.closeKey;
 	}
 }
+
+
+/**
+ * @typedef {Object} RenderOptions
+ * @property {boolean=} styles - Replace :host in style tags to scope them locally.
+ * @property {boolean=} scripts - Execute script tags.
+ * @property {boolean=} ids - Create references to elements with id or data-id attributes.
+ * @property {?boolean} render - Deprecated.
+ * 	 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.
+ */

package/src/solarite/Util.js

@@ -21,9 +21,133 @@ let Util = {
 					child.textContent = newText;
 			}
 		}
-	}
+	},
+
+	/**
+	 * A generator function that recursively traverses and flattens a value.
+	 *
+	 * - If the input is an array, it recursively traverses and flattens the array.
+	 * - If the input is a function, it calls the function, replaces the function
+	 *   with its result, and flattens the result if necessary. It will recursively
+	 *   call functions that return other functions.
+	 * - Otherwise it yields the value as is.
+	 *
+	 * This function does not create a new array for the flattened values. Instead,
+	 * it lazily yields each item as it is encountered. This can be more memory-efficient
+	 * for large or deeply nested structures.
+	 *
+	 * @param {any} value - The value to flatten. Can be an array, object, function, or primitive.
+	 * @yields {any} - The next item in the flattened structure.
+	 *
+	 * @example
+	 * const complexArray = [
+	 *     1,
+	 *     [2, () => 3, [4, () => [5, 6]], { a: 'object' }],
+	 *     () => () => 7,
+	 *     () => [() => 8, 9],
+	 * ];	 *
+	 * for (const item of flatten(complexArray))
+	 *     console.log(item);  // Outputs: 1, 2, 3, 4, 5, 6, { a: 'object' }, 7, 8, 9
+	 */
+	*flatten(value) {
+		if (Array.isArray(value)) {
+			for (const item of value) {
+				yield* Util.flatten(item);  // Recursively flatten arrays
+			}
+		} else if (typeof value === 'function') {
+			const result = value();
+			yield* Util.flatten(result);  // Recursively flatten the result of a function
+		} else
+			yield value;  // Yield primitive values as is
+	},
+
+	/**
+	 * Get the value of an input as the most appropriate JavaScript type.
+	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLDivElement}
+	 * @return {string|string[]|number|[]|File[]|Date|boolean} */
+	getInputValue(node) {
+		if (node.type === 'checkbox' || node.type === 'radio')
+			return node.checked; // Boolean
+		if (node.type === 'file')
+			return [...node.files]; // FileList
+		if (node.type === 'number' || node.type === 'range')
+			return node.valueAsNumber; // Number
+		if (node.type === 'date' || node.type === 'time' || node.type === 'datetime-local')
+			return node.valueAsDate; // Date Object
+		if (node.type === 'select-multiple') // <select multiple>
+			return [...node.selectedOptions].map(option => option.value); // Array of Strings
+
+		return node.value; // String
+	},
+
+	/**
+	 * Is it an array and a path that can be evaluated by delve() ?
+	 * @param arr {Array|*}
+	 * @returns {boolean} */
+	isPath(arr) {
+		return Array.isArray(arr) && typeof arr[0] === 'object' && !arr.slice(1).find(p => typeof p !== 'string' && typeof p !== 'number');
+	},
+
+	/**
+	 * Find NodeGroups that had their nodes removed and add those nodes to a Fragment so
+	 * they're not lost forever and the NodeGroup's internal structure is still consistent.
+	 * This saves all of a NodeGroup's nodes in order, so that nextChildNode still works.
+	 * This is necessary because a NodeGroup normally only stores the first and last node.
+	 * Called from ExprPath.apply().
+	 * @param oldNodeGroups {NodeGroup[]}
+	 * @param oldNodes {Node[]} */
+	saveOrphans(oldNodeGroups, oldNodes) {
+		let oldNgMap = new Map();
+		for (let ng of oldNodeGroups) {
+			oldNgMap.set(ng.startNode, ng)
+
+			// TODO: Is this necessary?
+			// if (ng.parentPath)
+			// 	ng.parentPath.clearNodesCache();
+		}
 
+		for (let i=0, node; node = oldNodes[i]; i++) {
+			let ng;
+			if (!node.parentNode && (ng = oldNgMap.get(node))) {
+				//ng.nodesCache = [];
+				let fragment = document.createDocumentFragment();
+				let endNode = ng.endNode;
+				while (node !== endNode) {
+					fragment.append(node);
+					//ng.nodesCache.push(node);
+					i++;
+					node = oldNodes[i];
+				}
+				fragment.append(endNode);
+				//ng.nodesCache.push(endNode);
+			}
+		}
+	},
+
+	/**
+	 * Remove nodes from the beginning and end that are not:
+	 * 1.  Elements.
+	 * 2.  Non-whitespace text nodes.
+	 * @param nodes {Node[]|NodeList}
+	 * @returns {Node[]} */
+	trimEmptyNodes(nodes) {
+		const shouldTrimNode = node =>
+			node.nodeType !== Node.ELEMENT_NODE &&
+			(node.nodeType !== Node.TEXT_NODE || node.textContent.trim() === '');
+
+		// Convert nodeList to an array for easier manipulation
+		const result = [...nodes]
+
+		// Trim from the start
+		while (result.length > 0 && shouldTrimNode(result[0]))
+			result.shift();
+
+		// Trim from the end
+		while (result.length > 0 && shouldTrimNode(result[result.length - 1]))
+			result.pop();
 
+		return result;
+	}
 };
 
 export default Util;
@@ -72,15 +196,15 @@ export function camelToDashes(str) {
  * Returns false if they're the same.  Or the first index where they differ.
  * @param a
  * @param b
- * @returns {int|false} */
-export function findArrayDiff(a, b) {
-	if (a.length !== b.length)
-		return -1;
+ * @returns {boolean} */
+export function arraySame(a, b) {
 	let aLength = a.length;
+	if (aLength !== b.length)
+		return false;
 	for (let i=0; i<aLength; i++)
 		if (a[i] !== b[i])
-			return i;
-	return false; // the same.
+			return false;
+	return true; // the same.
 }
 
 

package/src/solarite/createSolarite.js

@@ -3,9 +3,10 @@ import Util from "../util/Util.js";
 import delve from "../util/delve.js";
 import {getArg, ArgType} from "./getArg.js";
 import {getObjectHash} from "./hash.js";
-import NodeGroupManager from "./NodeGroupManager.js";
-import r, {rendered} from "./r.js";
+//import NodeGroupManager from "./NodeGroupManager.js";
+import r from "./r.js";
 import {camelToDashes} from "./Util.js";
+import Globals from "./Globals.js";
 
 
 //import {watchGet, watchSet} from "./watch.js";
@@ -26,14 +27,9 @@ function defineClass(Class, tagName, extendsTag) {
 	}
 }
 
-/**
- * @type {Object<string, Class<Node>>} A map from built-in tag names to the constructors that create them. */
-let elementClasses = {};
 
-/**
- * Store which instances of Solarite have already been added to the DOM. * @type {WeakSet<HTMLElement>}
- */
-let connected = new WeakSet();
+
+
 
 /**
  * Create a version of the Solarite class that extends from the given tag name.
@@ -45,6 +41,7 @@ let connected = new WeakSet();
  * 5.  We have the onConnect, onFirstConnect, and onDisconnect methods.
  *     Can't figure out how to have these work standalone though, and still be synchronous.
  * 6.  Can we extend from other element types like TR?
+ * 7.  Shows default text if render() function isn't defined.
  *
  * Advantages to inheriting from HTMLElement
  * 1.  Minimization won't break when it renames the Class and we call customElements.define() on the wrong name.
@@ -59,10 +56,10 @@ export default function createSolarite(extendsTag=null) {
 	if (extendsTag && !extendsTag.includes('-')) {
 		extendsTag = extendsTag.toLowerCase();
 
-		BaseClass = elementClasses[extendsTag];
+		BaseClass = Globals.elementClasses[extendsTag];
 		if (!BaseClass) { // TODO: Use Cache
 			BaseClass = document.createElement(extendsTag).constructor;
-			elementClasses[extendsTag] = BaseClass
+			Globals.elementClasses[extendsTag] = BaseClass
 		}
 	}
 
@@ -98,26 +95,24 @@ export default function createSolarite(extendsTag=null) {
 		constructor(options={}) {
 			super();
 
-
-
 			// TODO: Is options.render ever used?
 			if (options.render===true)
 				this.render();
 
 			else if (options.render===false)
-				rendered.add(this); // Don't render on connectedCallback()
+				Globals.rendered.add(this); // Don't render on connectedCallback()
 
 			// Add children before constructor code executes.
 			// PendingChildren is setup in NodeGroup.createNewComponent()
 			// TODO: Match named slots.
-			let ch = NodeGroupManager.pendingChildren.pop();
+			let ch = Globals.pendingChildren.pop();
 			if (ch)
 				(this.querySelector('slot') || this).append(...ch);
 
 			/** @deprecated */
 			Object.defineProperty(this, 'html', {
 				set(html) {
-					rendered.add(this);
+					Globals.rendered.add(this);
 					if (typeof html === 'string') {
 						console.warn("Assigning to this.html without the r template prefix.")
 						this.innerHTML = html;
@@ -140,7 +135,7 @@ export default function createSolarite(extendsTag=null) {
 		/**
 		 * Call render() only if it hasn't already been called.	 */
 		renderFirstTime() {
-			if (!rendered.has(this) && this.render)
+			if (!Globals.rendered.has(this) && this.render)
 				this.render();
 		}
 		
@@ -148,8 +143,8 @@ export default function createSolarite(extendsTag=null) {
 		 * Called automatically by the browser. */
 		connectedCallback() {
 			this.renderFirstTime();
-			if (!connected.has(this)) {
-				connected.add(this);
+			if (!Globals.connected.has(this)) {
+				Globals.connected.add(this);
 				this.onFirstConnect();
 			}
 			this.onConnect();

package/src/solarite/getArg.js

@@ -4,7 +4,7 @@
 /**
  * There are three ways to create an instance of a Solarite Component:
  * 1.  new ComponentName();                                         // direct class instantiation
- * 2.  this.html = r`<div><component-name></component-name></div>;  // as a child of another RedComponent.
+ * 2.  this.html = r`<div><component-name></component-name></div>;  // as a child of another Component.
  * 3.  <body><component-name></component-name></body>               // in the Document html.
  *
  * When created via #3, Solarite has no way to pass attributes as arguments to the constructor.  So to make