solarite 0.2.4 → 0.3.1

package/src/solarite/Util.js

@@ -1,388 +0,0 @@
-let Util = {
-
-	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)
-		}
-
-		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;
-			}
-		}
-	},
-
-	/**
-	 * 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;
-
-
-
-let div = document.createElement('div');
-export {div}
-
-let isEvent = attrName => attrName.startsWith('on') && attrName in 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();
-}
-
-
-
-
-
-/**
- * Returns false if they're the same.  Or the first index where they differ.
- * @param a
- * @param b
- * @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 false;
-	return true; // the same.
-}
-
-
-/**
- * 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
-//#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/solarite/createSolarite.js

@@ -1,274 +0,0 @@
-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 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 (!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.
- * 4.  We can use this.html = r`...` to set html.
- * 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 = Util.callback();
-		
-		onFirstConnect = Util.callback();
-		onDisconnect = Util.callback();
-
-		/**
-		 * @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 children before constructor code executes.
-			// PendingChildren is setup in NodeGroup.createNewComponent()
-			// TODO: Match named slots.
-			let ch = Globals.pendingChildren.pop();
-			if (ch)
-				(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);
-				this.onFirstConnect();
-			}
-			this.onConnect();
-		}
-		
-		disconnectedCallback() {
-			this.onDisconnect();
-		}
-
-
-		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
-	}
-}
-