solarite 0.2.4 → 0.3.1

package/src/Util.js

@@ -0,0 +1,330 @@
+import Globals from "./Globals.js";
+import delve from "./delve.js";
+
+let Util = {
+
+	/**
+	 * Returns true if they're the same.
+	 * @param a
+	 * @param b
+	 * @returns {boolean} */
+	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 false;
+		return true; // the same.
+	},
+
+	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) {
+			// Keep track of one style id for each class.
+			// TODO: Put this outside the class in a map, so it doesn't conflict with static properties.
+			if (!root.constructor.styleId)
+				root.constructor.styleId = 1;
+			styleId = root.constructor.styleId++;
+
+			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}"]`)
+				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.
+	 *
+	 * - 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) {
+		// .type is a built-in DOM property
+		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
+	},
+
+	isEvent(attrName) {
+		return attrName.startsWith('on') && attrName in Globals.div;
+	},
+
+	/**
+	 * @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) && 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.
+	},
+
+	isFalsy(val) {
+		return val === undefined || val === false || val === null;
+	},
+
+	/*
+	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;
+	},
+
+	/**
+	 * Use an array as the value of a map, appending to it when we add.
+	 * Used by watch.js.
+	 * @param map {Map|WeakMap|Object}
+	 * @param key
+	 * @param value */
+	mapArrayAdd(map, key, value) {
+		let result = map.get(key);
+		if (!result) {
+			result = [value];
+			map.set(key, result);
+		}
+		else
+			result.push(value);
+	},
+
+	/**
+	 * 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;
+
+
+
+// For debugging only
+//#IFDEV
+export function setIndent(items, level=1) {
+	if (typeof items === 'string')
+		items = items.split(/\r?\n/g)
+
+	return items.map(str => {
+		if (level > 0)
+			return '  '.repeat(level) + str;
+		else if (level < 0)
+			return str.replace(new RegExp(`^  {0,${Math.abs(level)}}`), '');
+		return str;
+	})
+}
+
+export function nodeToArrayTree(node, callback=null) {
+	if (!node) return [];
+
+	let result = [];
+
+	if (callback)
+		result.push(...callback(node))
+
+	if (node.nodeType === 1) {
+		let attrs = Array.from(node.attributes).map(attr => `${attr.name}="${attr.value}"`).join(' ');
+		let openingTag = `<${node.nodeName.toLowerCase()}${attrs ? ' ' + attrs : ''}>`;
+
+		let childrenArray = [];
+		for (let child of node.childNodes) {
+			let childResult = nodeToArrayTree(child, callback);
+			if (childResult.length > 0) {
+				childrenArray.push(childResult);
+			}
+		}
+
+		//let closingTag = `</${node.nodeName.toLowerCase()}>`;
+
+		result.push(openingTag, ...childrenArray);
+	} else if (node.nodeType === 3) {
+		result.push("'"+node.nodeValue+"'");
+	}
+
+	return result;
+}
+
+
+export function flattenAndIndent(inputArray, indent = "") {
+	let result = [];
+
+	for (let item of inputArray) {
+		if (Array.isArray(item)) {
+			// Recursively handle nested arrays with increased indentation
+			result = result.concat(flattenAndIndent(item, indent + "  "));
+		} else {
+			result.push(indent + item);
+		}
+	}
+
+	return result;
+}
+//#ENDIF

package/src/{util/Errors.js → assert.js}

@@ -6,4 +6,5 @@ export function assert(val) {
 		throw new Error('Assertion failed: ' + val);
 	}
 }
+
 //#ENDIF

package/src/createSolarite.js

@@ -0,0 +1,154 @@
+import Util from './Util.js';
+import Globals from "./Globals.js";
+
+function defineClass(Class, tagName, extendsTag) {
+	if (!customElements[getName](Class)) { // If not previously defined.
+		tagName = tagName || Util.camelToDashes(Class.name)
+		if (!tagName.includes('-'))
+			tagName += '-element';
+
+		let options = null;
+		if (extendsTag)
+			options = {extends: extendsTag}
+
+		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. (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?
+ * 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.
+ * 2.  We can inherit from things like HTMLTableRowElement directly.
+ * 3.  There's less magic, since everyone is familiar with defining custom elements.
+ *
+ * @param extendsTag {?string}
+ * @return {Class} */
+export default function createSolarite(extendsTag=null) {
+
+	let BaseClass = HTMLElement;
+	if (extendsTag && !extendsTag.includes('-')) {
+		extendsTag = extendsTag.toLowerCase();
+
+		BaseClass = Globals.elementClasses[extendsTag];
+		if (!BaseClass) { // TODO: Use Cache
+			BaseClass = document.createElement(extendsTag).constructor;
+			Globals.elementClasses[extendsTag] = BaseClass
+		}
+	}
+
+	/**
+	 * Intercept the construct call to auto-define the class before the constructor is called.
+	 * @type {HTMLElement} */
+	let HTMLElementAutoDefine = new Proxy(BaseClass, {
+		construct(Parent, args, Class) {
+			defineClass(Class, null, extendsTag)
+
+			// This is a good place to manipulate any args before they're sent to the constructor.
+			// Such as loading them from attributes, if I could find a way to do so.
+
+			// This line is equivalent the to super() call.
+			return Reflect.construct(Parent, args, Class);
+		}
+	});
+
+	return class Solarite extends HTMLElementAutoDefine {
+		
+		
+		/**
+		 * TODO: Make these standalone functions.
+		 * Callbacks.
+		 * Use onConnect.push(() => ...); to add new callbacks. */
+		onConnect;
+		
+		onFirstConnect;
+		onDisconnect;
+
+		/**
+		 * @param options {RenderOptions} */
+		constructor(options={}) {
+			super();
+
+			// TODO: Is options.render ever used?
+			if (options.render===true)
+				this.render();
+
+			else if (options.render===false)
+				Globals.rendered.add(this); // Don't render on connectedCallback()
+
+			// Add slot children before constructor code executes.
+			// This breaks the styleStaticNested test.
+			// PendingChildren is setup in NodeGroup.instantiateComponent()
+			// TODO: Match named slots.
+			//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
+			Object.defineProperty(this, 'html', {
+				set(html) {
+					Globals.rendered.add(this);
+					if (typeof html === 'string') {
+						console.warn("Assigning to this.html without the r template prefix.")
+						this.innerHTML = html;
+					}
+					else
+						this.modifications = r(this, html, options);
+				}
+			})*/
+
+			/*
+			let pthis = new Proxy(this, {
+				get(obj, prop) {
+					return Reflect.get(obj, prop)
+				}
+			});
+			this.render = this.render.bind(pthis);
+			*/
+		}
+
+		/**
+		 * Call render() only if it hasn't already been called.	 */
+		renderFirstTime() {
+			if (!Globals.rendered.has(this) && this.render)
+				this.render();
+		}
+		
+		/**
+		 * Called automatically by the browser. */
+		connectedCallback() {
+			this.renderFirstTime();
+			if (!Globals.connected.has(this)) {
+				Globals.connected.add(this);
+				if (this.onFirstConnect)
+					this.onFirstConnect();
+			}
+			if (this.onConnect)
+				this.onConnect();
+		}
+		
+		disconnectedCallback() {
+			if (this.onDisconnect)
+				this.onDisconnect();
+		}
+
+
+		static define(tagName=null) {
+			defineClass(this, tagName, extendsTag)
+		}
+	}
+}
+
+// Trick to prevent minifier from renaming this method.
+let define = 'define';
+let getName = 'getName';

package/src/{util/delve.js → delve.js}

@@ -2,10 +2,10 @@
  * Follow a path into an object.
  * @param obj {object}
  * @param path {string[]}
- * @param createVal {*}  If set, non-existant paths will be created and value at path will be set to createVal.
+ * @param createVal {*}  If set, non-existent paths will be created and value at path will be set to createVal.
  * @return {*} The value, or undefined if it can't be reached. */
-export default function delve(obj, path, createVal = delveDontCreate) {
-	let isCreate = createVal !== delveDontCreate;
+export default function delve(obj, path, createVal = d) {
+	let isCreate = createVal !== d;
 
 	let len = path.length;
 	if (!obj && !isCreate && len)
@@ -40,4 +40,5 @@ export default function delve(obj, path, createVal = delveDontCreate) {
 	return obj;
 }
 
-let delveDontCreate = {};
+// d means "don't create"
+let d = {};

package/src/{solarite/getArg.js → getArg.js}

@@ -1,4 +1,4 @@
-
+import Util from "./Util.js";
 
 
 /**
@@ -24,23 +24,28 @@
  * }
  *
  * @param el {HTMLElement}
- * @param name {string} Attribute name.  Not case-sensitive.
- * @param val {*} Default value to use if attribute doesn't exist.
- * @param type {ArgType|function|*[]}
+ * @param attributeName {string} Attribute name.  Not case-sensitive.
+ * @param defaultValue {*} Default value to use if attribute doesn't exist.
+ * @param type {ArgType|function|Class|*[]}
  *     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.
- * @param fallback {*} If the type can't be parsed as the given type, use this value.
+ * @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, name, val=undefined, type=ArgType.String, fallback=undefined) {
-	let attrVal = el.getAttribute(name);
+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 : fallback;
 	
-	if (typeof type === 'function')
-		return type(val);
+	if (typeof type === 'function') {
+		return type.constructor
+			? new type(val) // arg type is custom Class
+			: type(val); // arg type is custom function
+	}
 	
 	// If bool, it's true as long as it exists and its value isn't falsey.
 	if (type===ArgType.Bool) {
@@ -63,18 +68,18 @@ export function getArg(el, name, val=undefined, type=ArgType.String, fallback=un
 			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})`);
 				} catch (e) {
 					return val;
 				}
-			else return fallback;
+			else return val;
 
 		// type not provided
 		default:
@@ -82,6 +87,24 @@ export function getArg(el, name, val=undefined, type=ArgType.String, fallback=un
 	}
 }
 
+
+/**
+ * Experimental.  Set multiple arguments/attributes all at once.
+ * @param el {HTMLElement}
+ * @param args {Record<string, any>}
+ * @param types {Record<string, ArgType|function|Class>}
+ *
+ * @example
+ * constructor({user, path}={}) {
+ *     setArgs(this, arguments[0], {user: User, path: ArgType.String});
+ * }
+ */
+export function setArgs(el, args, types) {
+	for (let name in args)
+		this[name] = getArg(el, name, args[name], types[name] || ArgType.String);
+}
+
+
 /**
  * @enum */
 var ArgType = {
@@ -95,12 +118,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. */