solarite 0.2.3 → 0.3.0

package/src/solarite/Util.js

@@ -1,5 +1,24 @@
+import Globals from "./Globals.js";
+import delve from "../util/delve.js";
+
 let Util = {
 
+	bindId(root, el) {
+		let id = el.getAttribute('data-id') || el.getAttribute('id');
+		if (id) { // If something hasn't removed the id.
+
+			// Don't allow overwriting existing class properties if they already have a non-Node value.
+			if (root[id] && !(root[id] instanceof Node))
+				throw new Error(`${root.constructor.name}.${id} already has a value.  ` +
+					`Can't set it as a reference to <${el.tagName.toLowerCase()} id="${id}">`);
+
+			delve(root, id.split(/\./g), el);
+		}
+	},
+
+	/**
+	 * @param style {HTMLStyleElement}
+	 * @param root {HTMLElement} */
 	bindStyles(style, root) {
 		let styleId = root.getAttribute('data-style');
 		if (!styleId) {
@@ -12,17 +31,60 @@ let Util = {
 			root.setAttribute('data-style', styleId)
 		}
 
+		// Replace ":host" with "tagName[data-style=...]" in the css.
 		let tagName = root.tagName.toLowerCase();
 		for (let child of style.childNodes) {
 			if (child.nodeType === 3) {
 				let oldText = child.textContent;
-				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, tagName + '[data-style="' + styleId + '"]')
+				let newText = oldText.replace(/:host(?=[^a-z0-9_])/gi, `${tagName}[data-style="${styleId}"]`)
 				if (oldText !== newText)
 					child.textContent = newText;
 			}
 		}
 	},
 
+
+	/**
+	 * Convert a Proper Case name to a name with dashes.
+	 * Dashes will be placed between letters and numbers.
+	 * If there are multiple consecutive capital letters followed by another chracater, a dash will be placed before the last capital letter.
+	 * @param str {string}
+	 * @return {string}
+	 *
+	 * @example
+	 * 'ProperName' => 'proper-name'
+	 * 'HTMLElement' => 'html-element'
+	 * 'BigUI' => 'big-ui'
+	 * 'UIForm' => 'ui-form'
+	 * 'A100' => 'a-100' */
+	camelToDashes(str) {
+		// Convert any capital letter that is preceded by a lowercase letter or number to lowercase and precede with a dash.
+		str = str.replace(/([a-z0-9])([A-Z])/g, '$1-$2');
+
+		// Convert any capital letter that is followed by a lowercase letter or number to lowercase and precede with a dash.
+		str = str.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2');
+
+		// Convert any number that is preceded by a lowercase or uppercase letter to be preceded by a dash.
+		str = str.replace(/([a-zA-Z])([0-9])/g, '$1-$2');
+
+		// Convert all the remaining capital letters to lowercase.
+		return str.toLowerCase();
+	},
+
+	/**
+	 * Converts a string written in kebab-case to camelCase.
+	 *
+	 * @param {string} str - The input string written in kebab-case.
+	 * @return {string} - The resulting camelCase string.
+	 *
+	 * @example
+	 * dashesToCamel('example-string') // Returns 'exampleString'
+	 * dashesToCamel('another-example-test') // Returns 'anotherExampleTest' */
+	dashesToCamel(str) {
+		return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+	},
+
+
 	/**
 	 * A generator function that recursively traverses and flattens a value.
 	 *
@@ -66,6 +128,7 @@ let Util = {
 	 * @param node {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|HTMLDivElement}
 	 * @return {string|string[]|number|[]|File[]|Date|boolean} */
 	getInputValue(node) {
+		// .type is a built-in DOM property
 		if (node.type === 'checkbox' || node.type === 'radio')
 			return node.checked; // Boolean
 		if (node.type === 'file')
@@ -80,48 +143,63 @@ let Util = {
 		return node.value; // String
 	},
 
+	/**
+	 * @param el {HTMLElement}
+	 * @param prop {string}
+	 * @returns {boolean} */
+	isHtmlProp(el, prop) {
+		let key = el.tagName + '.' + prop;
+		let result = Globals.htmlProps[key];
+		if (result === undefined) { // Caching just barely makes this slightly faster.
+			let proto = Object.getPrototypeOf(el);
+
+			// Find the first HTMLElement that we inherit from (not our own classes)
+			while (proto) {
+				const ctorName = proto.constructor.name;
+				if (ctorName.startsWith('HTML') && ctorName.endsWith('Element'))
+					break
+				proto = Object.getPrototypeOf(proto);
+			}
+			Globals.htmlProps[key] = result = (proto
+				? !!Object.getOwnPropertyDescriptor(proto, prop)?.set
+				: false);
+		}
+		return result;
+	},
+
 	/**
 	 * Is it an array and a path that can be evaluated by delve() ?
+	 * We allow the first element to be null/undefined so binding can report errors.
 	 * @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');
+		return Array.isArray(arr) && arr.length >=2  // An array of at least two elements.
+			&& (typeof arr[0] === 'object' || arr[0] === undefined) // Where the first element is an object, null, or undefined.
+			&& !arr.slice(1).find(p => typeof p !== 'string' && typeof p !== 'number'); // Path 1..x is only numbers and strings.
 	},
 
-	/**
-	 * 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();
-		}
+	isFalsy(val) {
+		return val === undefined || val === false || val === null;
+	},
 
-		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);
-			}
-		}
+	isPrimitive(val) {
+		return typeof val === 'string' || typeof val === 'number'
+	},
+
+	/**
+	 * If val is a function, evaluate it recursively until the result is not a function.
+	 * If it's an array or an object, convert it to Json.
+	 * If it's a Date, format it as Y-m-d H:i:s
+	 * @param val
+	 * @returns {string|number|boolean} */
+	makePrimitive(val) {
+		if (typeof val === 'function')
+			return Util.makePrimitive(val());
+		else if (val instanceof Date)
+			return val.toISOString().replace(/T/, ' ');
+		else if (Array.isArray(val) || typeof val === 'object')
+			return ''; // JSON.stringify(val);
+		return val;
 	},
 
 	/**
@@ -154,38 +232,12 @@ export default Util;
 
 
 
-let div = document.createElement('div');
-export {div}
-
-let isEvent = attrName => attrName.startsWith('on') && attrName in div;
+let isEvent = attrName => attrName.startsWith('on') && attrName in Globals.div;
 export {isEvent};
 
 
-/**
- * Convert a Proper Case name to a name with dashes.
- * Dashes will be placed between letters and numbers.
- * If there are multiple consecutive capital letters followed by another chracater, a dash will be placed before the last capital letter.
- * @param str {string}
- * @return {string}
- *
- * @example
- * 'ProperName' => 'proper-name'
- * 'HTMLElement' => 'html-element'
- * 'BigUI' => 'big-ui'
- * 'UIForm' => 'ui-form'
- * 'A100' => 'a-100' */
-export function camelToDashes(str) {
-	// Convert any capital letter that is preceded by a lowercase letter or number to lowercase and precede with a dash.
-	str = str.replace(/([a-z0-9])([A-Z])/g, '$1-$2');
-
-	// Convert any capital letter that is followed by a lowercase letter or number to lowercase and precede with a dash.
-	str = str.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2');
-
-	// Convert any number that is preceded by a lowercase or uppercase letter to be preceded by a dash.
-	str = str.replace(/([a-zA-Z])([0-9])/g, '$1-$2');
-
-	// Convert all the remaining capital letters to lowercase.
-	return str.toLowerCase();
+export function dashesToCamel(str) {
+	return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
 }
 
 
@@ -193,7 +245,7 @@ export function camelToDashes(str) {
 
 
 /**
- * Returns false if they're the same.  Or the first index where they differ.
+ * Returns true if they're the same.
  * @param a
  * @param b
  * @returns {boolean} */
@@ -208,121 +260,7 @@ export function arraySame(a, b) {
 }
 
 
-/**
- * TODO: Turn this into a class because it has internal state.
- * TODO: Don't break on 3<a inside a <script> or <style> tag.
- * @param html {?string} Pass null to reset context.
- * @returns {string} */
-export function htmlContext(html) {
-	if (html === null) {
-		state = {...defaultState};
-		return state.context;
-	}
-	for (let i = 0; i < html.length; i++) {
-		const char = html[i];
-		switch (state.context) {
-			case htmlContext.Text:
-				if (char === '<' && html[i+1].match(/[a-z!]/i)) { // Start of a tag or comment.
-					// if (html.slice(i, i+4) === '<!--')
-					// 	state.context = htmlContext.Comment;
-					// else
-						state.context = htmlContext.Tag;
-					state.buffer = '';
-				}
-				break;
-			case htmlContext.Tag:
-				if (char === '>') {
-					state.context = htmlContext.Text;
-					state.quote = null;
-					state.buffer = '';
-				} else if (char === ' ' && !state.buffer) {
-					// No attribute name is present. Skipping the space.
-					continue;
-				} else if (char === ' ' || char === '/' || char === '?') {
-					state.buffer = '';  // Reset the buffer when a delimiter or potential self-closing sign is found.
-				} else if (char === '"' || char === "'" || char === '=') {
-					state.context = htmlContext.Attribute;
-					state.quote = char === '=' ? null : char;
-					state.buffer = '';
-				} else {
-					state.buffer += char;
-				}
-				break;
-			case htmlContext.Attribute:
-				if (!state.quote && !state.buffer.length && (char === '"' || char === "'"))
-					state.quote = char;
-
-				else if (char === state.quote || (!state.quote && state.buffer.length)) {
-					state.context = htmlContext.Tag;
-					state.quote = null;
-					state.buffer = '';
-				} else if (!state.quote && char === '>') {
-					state.context = htmlContext.Text;
-					state.quote = null;
-					state.buffer = '';
-				} else if (char !== ' ') {
-					state.buffer += char;
-				}
-				break;
-		}
-
-	}
-	return state.context;
-}
-
-
-htmlContext.Attribute = 'Attribute';
-htmlContext.Text = 'Text';
-htmlContext.Tag = 'Tag';
-//htmlContext.Comment = 'Comment';
-let defaultState = {
-	context: htmlContext.Text, // possible values: 'TEXT', 'TAG', 'ATTRIBUTE'
-	quote: null, // possible values: null, '"', "'"
-	buffer: '',
-	lastChar: null
-};
-let state = {...defaultState};
-
-
-
-
-
 
-let cacheItems = {};
-
-/**
- * @param item {string}
- * @param initial {*}
- * @returns {*} */
-export function cache(item, initial) {
-	let result = cacheItems[item];
-	if (!result) {
-		cacheItems[item] = initial
-		result = initial;
-	}
-	return result;
-}
-
-
-
-export class WeakCache {
-
-	items = new WeakMap();
-
-	constructor(initial) {
-		this.initial = initial;
-	}
-
-	get(item) {
-		let result = this.items.get(item);
-		if (!result) {
-			let value = typeof this.initial === 'function' ? this.initial() : this.initial;
-			this.items.set(item, value)
-			result = this.initial;
-		}
-		return result;
-	}
-}
 
 
 // For debugging only

package/src/solarite/createSolarite.js

@@ -1,21 +1,10 @@
 import Util from "../util/Util.js";
-//import {assert} from "../util/Errors.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 from "./r.js";
-import {camelToDashes} from "./Util.js";
+import SolariteUtil from './Util.js';
 import Globals from "./Globals.js";
 
-
-//import {watchGet, watchSet} from "./watch.js";
-
-
-
 function defineClass(Class, tagName, extendsTag) {
-	if (!customElements.getName(Class)) { // If not previously defined.
-		tagName = tagName || camelToDashes(Class.name)
+	if (!customElements[getName](Class)) { // If not previously defined.
+		tagName = tagName || SolariteUtil.camelToDashes(Class.name)
 		if (!tagName.includes('-'))
 			tagName += '-element';
 
@@ -23,21 +12,17 @@ function defineClass(Class, tagName, extendsTag) {
 		if (extendsTag)
 			options = {extends: extendsTag}
 
-		customElements.define(tagName, Class, options)
+		customElements[define](tagName, Class, options)
 	}
 }
 
-
-
-
-
 /**
  * Create a version of the Solarite class that extends from the given tag name.
  * Reasons to inherit from this instead of HTMLElement.  None of these are all that useful.
  * 1.  customElements.define() is called automatically when you create the first instance.
  * 2.  Calls render() when added to the DOM, if it hasn't been called already.
- * 3.  Child elements are added before constructor is called.  But they're also passed to the constructor.
- * 4.  We can use this.html = r`...` to set html.
+ * 3.  Child elements are added before constructor is called.  But they're also passed to the constructor. (deprecated?)
+ * 4.  We can use this.html = r`...` to set html. (deprecated)
  * 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?
@@ -102,14 +87,15 @@ export default function createSolarite(extendsTag=null) {
 			else if (options.render===false)
 				Globals.rendered.add(this); // Don't render on connectedCallback()
 
-			// Add children before constructor code executes.
+			// Add slot children before constructor code executes.
+			// This breaks the styleStaticNested test.
 			// PendingChildren is setup in NodeGroup.createNewComponent()
 			// TODO: Match named slots.
-			let ch = Globals.pendingChildren.pop();
-			if (ch)
-				(this.querySelector('slot') || this).append(...ch);
+			//let ch = Globals.pendingChildren.pop();
+			//if (ch) // TODO: how could there be a slot before render is called?
+			//	(this.querySelector('slot') || this).append(...ch);
 
-			/** @deprecated */
+			/** @deprecated
 			Object.defineProperty(this, 'html', {
 				set(html) {
 					Globals.rendered.add(this);
@@ -120,7 +106,7 @@ export default function createSolarite(extendsTag=null) {
 					else
 						this.modifications = r(this, html, options);
 				}
-			})
+			})*/
 
 			/*
 			let pthis = new Proxy(this, {
@@ -158,117 +144,9 @@ export default function createSolarite(extendsTag=null) {
 		static define(tagName=null) {
 			defineClass(this, tagName, extendsTag)
 		}
-
-		//#IFDEV
-
-		/** @deprecated */
-		renderWatched() {
-			let ngm = NodeGroupManager.get(this);
-
-			let nodeGroupUpdates = [];
-
-			for (let change of ngm.changes) {
-				if (change.action === 'set') {
-					for (let transformerInfo of change.transformerInfo) {
-
-						let oldHash = transformerInfo.hash;
-
-						let newObj = delve(watchSet(transformerInfo.path[0]), transformerInfo.path.slice(1));
-						let newTemplate = transformerInfo.transformer(newObj);
-						let newHash = getObjectHash(newTemplate);
-						let ngs = [...ngm.nodeGroupsAvailable.data[oldHash]];
-						for (let ng of ngs) {
-							nodeGroupUpdates.push([ng, oldHash, newHash, newTemplate.exprs, transformerInfo]);
-						}
-					}
-				}
-
-				else if (change.action === 'delete') {
-					for (let hash of change.value) {
-						let ngs = [...ngm.nodeGroupsAvailable.getAll(hash)]; // deletes from nodeGroupsAvailable.
-
-						for (let ng of ngs) {
-							if (ng.parentPath)
-								ng.parentPath.clearNodesCache();
-
-							for (let node of ng.getNodes())
-								node.remove();
-
-							// TODO: Update ancestor NodeGroup exactKeys
-						}
-					}
-				}
-				else if (change.action === 'insert') {
-
-					let beforeNg = change.beforeTemplate ? ngm.getNodeGroup(change.beforeTemplate, true) : null;
-					let arrayPath = [change.root, ...change.path];
-
-					// Get anchor so we can use it to get the parent
-					// TODO: Should this be watchGet(change.root) ?
-					for (let loopInfo of ngm.getLoopInfo([change.root, ...change.path.slice(0, -1)])) {
-
-						// Change.extra is aTemplate telling us where to insert before.
-						let beforeNode = beforeNg?.startNode || loopInfo.template.parentPath.nodeMarker;
-
-						// Loop over every item added to the array.
-						let i = 0; // TODO: How to get real insert index.
-						for (let obj of change.value) {
-
-							// Same logic as forEach() function.
-
-							let callback = loopInfo.itemTransformer;
-							let path = [...arrayPath.slice(0, -1), (arrayPath.at(-1) * 1 + i) + ''];
-
-							// Shortened logic found in watchGet(), but not any faster?
-							// the watchSet() is what makes this slower!
-							// let obj = delve(watchSet(path[0]), path.slice(1));
-							// let template = callback(obj);
-							// let serializedPath = serializePath(path);
-							// pathToTransformer.add(serializedPath, new TransformerInfo(path, callback, template)); // Uses a Set() to ensure no duplicates.
-
-							let template = watchGet(path, callback);
-							i++;
-
-
-							//let template = loopInfo.itemTransformer(obj); // What if it takes more than one obj argument?
-
-							// Create new NodeGroup
-							let ng = ngm.getNodeGroup(template, false, true);
-							ng.parentPath = beforeNg?.parentPath || loopInfo.template.parentPath;
-
-							for (let node of ng.getNodes())
-								beforeNode.parentNode.insertBefore(node, beforeNode);
-
-							if (ng.parentPath) // This check is needed for the forEachSpliceInsert test, but why?
-								ng.parentPath.clearNodesCache();
-						}
-
-						// TODO: Update ancestor NodeGroup exactKeys
-					}
-				}
-			}
-
-			// Update them all at once, that way we can reassign the same value twice.
-			for (let [ng, oldHash, newHash, exprs, ti] of nodeGroupUpdates) {
-				ng.applyExprs(exprs);
-				ngm.nodeGroupsAvailable.data[oldHash].delete(ng);
-				ng.exactKey = ti.hash = newHash;
-				ngm.nodeGroupsAvailable.add(ng.exactKey, ng); // Add back to Map with new key.
-			}
-
-
-			ngm.changes = [];
-
-			return []; // TODO
-		}
-		
-		/**
-		 * @deprecated Use the getArg() function instead. */
-		getArg(name, val=null, type=ArgType.String) {
-			throw new Error('deprecated');
-			return getArg(this, name, val, type);
-		}
-		//#ENDIF
 	}
 }
 
+// Trick to prevent minifier from renaming this method.
+let define = 'define';
+let getName = 'getName';

package/src/solarite/getArg.js

@@ -1,10 +1,10 @@
-
+import Util from "./Util.js";
 
 
 /**
  * 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 Component.
+ * 2.  this.html = r`<div><component-name></component-name></div>;  // as a child of another RedComponent.
  * 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
@@ -24,19 +24,22 @@
  * }
  *
  * @param el {HTMLElement}
- * @param name {string} Attribute name.  Not case-sensitive.
- * @param val {*} Default value to use if attribute doesn't exist.
+ * @param attributeName {string} Attribute name.  Not case-sensitive.
+ * @param defaultValue {*} Default value to use if attribute doesn't exist.
  * @param type {ArgType|function|*[]}
  *     If an array, use the value if it's in the array, otherwise return undefined.
  *     If it's a function, pass the value to the function and return the result.
- * @return {*} */
-export function getArg(el, name, val=null, type=ArgType.String) {
-	let attrVal = el.getAttribute(name);
+ * @param fallback {*} If the defaultValue is undefiend and type can't be parsed as the given type, use this value.
+ *     TODO: Should this be merged with the defaultValue argument?
+ * @return {*} Undefined if attribute isn't set.  */
+export function getArg(el, attributeName, defaultValue=undefined, type=ArgType.String, fallback=undefined) {
+	let val = defaultValue;
+	let attrVal = el.getAttribute(attributeName) || el.getAttribute(Util.camelToDashes(attributeName));
 	if (attrVal !== null) // If attribute doesn't exist.
 		val = attrVal;
 		
 	if (Array.isArray(type))
-		return type.includes(val) ? val : undefined;
+		return type.includes(val) ? val : fallback;
 	
 	if (typeof type === 'function')
 		return type(val);
@@ -44,22 +47,29 @@ export function getArg(el, name, val=null, type=ArgType.String) {
 	// If bool, it's true as long as it exists and its value isn't falsey.
 	if (type===ArgType.Bool) {
 		let lAttrVal = typeof val === 'string' ? val.toLowerCase() : val;
-		return !['false', '0', false, 0, null, undefined].includes(lAttrVal);
+		if (['false', '0', false, 0, null, undefined, NaN].includes(lAttrVal))
+			return false;
+		if (['true', true].includes(lAttrVal) || parseFloat(lAttrVal) !== 0)
+			return true;
+		return fallback;
 	}
 	
 	// Attribute doesn't exist
+	let result;
 	switch (type) {
 		case ArgType.Int:
-			return parseInt(val);
+			result = parseInt(val);
+			return isNaN(result) ? fallback : result;
 		case ArgType.Float:
-			return parseFloat(val);
+			result = parseFloat(val);
+			return isNaN(result) ? fallback : result;
 		case ArgType.String:
 			return [undefined, null, false].includes(val) ? '' : val+'';
-		case ArgType.JSON:
+		case ArgType.Json:
 		case ArgType.Eval:
 			if (typeof val === 'string' && val.length)
 				try {
-					if (type === ArgType.JSON)
+					if (type === ArgType.Json)
 						return JSON.parse(val);
 					else
 						return eval(`(${val})`);
@@ -67,6 +77,8 @@ export function getArg(el, name, val=null, type=ArgType.String) {
 					return val;
 				}
 			else return val;
+
+		// type not provided
 		default:
 			return val;
 	}
@@ -85,12 +97,15 @@ var ArgType = {
 	Int: 'Int',
 	Float: 'Float',
 	String: 'String',
-	
+
+	/** @deprecated for Json */
+	JSON: 'Json',
+
 	/**
 	 * Parse the string value as JSON.
 	 * If it's not parsable, return the value as a string. */
-	JSON: 'JSON',
-	
+	Json: 'Json',
+
 	/**
 	 * Evaluate the string as JavaScript using the eval() function.
 	 * If it can't be evaluated, return the original string. */