solarite 0.1.0

package/src/solarite/Shell.js

@@ -0,0 +1,307 @@
+import {assert} from "../util/Errors.js";
+import ExprPath, {PathType, getNodePath} from "./ExprPath.js";
+
+import {div, htmlContext, isEvent} from "./Util.js";
+
+/**
+ * A Shell is created from a tagged template expression instantiated as Nodes,
+ * but without any expressions filled in. */
+export default class Shell {
+
+	/**
+	 * @type {DocumentFragment} 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 = [];
+
+	/** @type {int[][]} Array of paths */
+	ids = [];
+	scripts = [];
+	styles = [];
+
+	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.
+	 * @param html {string[]} */
+	constructor(html=null) {
+		if (!html)
+			return;
+
+		//#IFDEV
+		this.html = html.join('');
+		//#ENDIF
+
+		// 1.  Add placeholders
+		// We increment the placeholder char as we go because nodes can't have the same attribute more than once.
+		let placeholder = 0xe000; // https://en.wikipedia.org/wiki/Private_Use_Areas  6400.
+
+		let buffer = [];
+		let commentPlaceholder = `<!--!✨!-->`;
+		let componentNames = {};
+
+		htmlContext(null); // Reset the context.
+		for (let i=0; i<html.length; i++) {
+			let lastHtml = html[i];
+			let context = htmlContext(lastHtml);
+
+			// Swap out Embedded Solarite Components with ${} attributes.
+			// Later, NodeGroup.render() will search for these and replace them with the real components.
+			// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
+			if (context === htmlContext.Attribute) {
+
+				let lastIndex, lastMatch;
+				lastHtml.replace(/<[a-z][a-z0-9]*-[a-z0-9-]+/ig, (match, index) => {
+					lastIndex = index+1; // +1 for after opening <
+					lastMatch = match.slice(1);
+				})
+
+				if (lastMatch) {
+					let newTagName = lastMatch + '-redcomponent-placeholder';
+					lastHtml = lastHtml.slice(0, lastIndex) + newTagName + lastHtml.slice(lastIndex + lastMatch.length);
+					componentNames[lastMatch] = newTagName
+				}
+			}
+
+			buffer.push(lastHtml);
+			//console.log(lastHtml, context)
+			if (i < html.length-1)
+				if (context === htmlContext.Text)
+					buffer.push(commentPlaceholder) // Comment Placeholder. because we can't put text in between <tr> tags for example.
+				else
+					buffer.push(String.fromCharCode(placeholder+i));
+		}
+
+		// 2. Create elements from html with placeholders.
+		let template = document.createElement('template'); // Using a single global template won't keep the nodes as children of the DocumentFragment.
+		let joinedHtml = buffer.join('');
+
+		// Replace '-redcomponent-placeholder' close tags.
+		// TODO: is there a better way?  What if the close tag is inside a comment?
+		for (let name in componentNames)
+			joinedHtml = joinedHtml.replaceAll(`</${name}>`, `</${componentNames[name]}>`);
+		
+        if (joinedHtml)
+		    template.innerHTML = joinedHtml;
+        else // Create one text node, so shell isn't empty and NodeGroups created from it have something to point the startNode and endNode at.
+            template.content.append(document.createTextNode(''))
+		this.fragment = template.content;
+
+		// 3. Find placeholders
+		let node;
+		let toRemove = [];
+		const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT);
+		while (node = walker.nextNode()) {
+
+			// Remove previous after each iteration, so paths will still be calculated correctly.
+			toRemove.map(el => el.remove());
+			toRemove = [];
+
+			// Replace attributes
+			if (node.nodeType === 1) {
+				for (let attr of [...node.attributes]) { // Copy the attributes array b/c we remove attributes as we go.
+
+					// Whole attribute
+					let matches = attr.name.match(/^[\ue000-\uf8ff]$/)
+					if (matches) {
+						this.paths.push(new ExprPath(null, node, PathType.Multiple));
+						node.removeAttribute(matches[0]);
+					}
+
+					// Just the attribute value.
+					else {
+						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));
+							node.setAttribute(attr.name, parts.join(''));
+						}
+					}
+				}
+			}
+			// Replace comment placeholders
+			else if (node.nodeType === Node.COMMENT_NODE && node.nodeValue === '!✨!') {
+
+				// 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);
+					node.parentNode.insertBefore(nodeBefore, node)
+				}
+				/*#IFDEV*/assert(nodeBefore);/*#ENDIF*/
+
+				// Get the next node.
+				let nodeMarker;
+
+				// A subsequent node is available to be a nodeMarker.
+				if (node.nextSibling && (node.nextSibling.nodeType !== 8 || node.nextSibling.textContent !== '!✨!')) {
+					nodeMarker = node.nextSibling;
+					toRemove.push(node); // Removing them here will mess up the treeWalker.
+				}
+				// Re-use existing comment placeholder.
+				else {
+					nodeMarker = node;
+					nodeMarker.textContent = 'PathEnd:'+ 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);
+			}
+			
+			
+			// Sometimes users will comment out a block of html code that has expressions.
+			// Here we look for expressions in comments.
+			// We don't actually update them dynamically, but we still add paths for them.
+			// That way the expression count still matches.
+			else if (node.nodeType === Node.COMMENT_NODE) {
+				let parts = node.textContent.split(/[\ue000-\uf8ff]/g);
+				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);
+				}
+			}
+
+			// Replace comment placeholders inside script and style tags, which have become text nodes.
+			else if (node.nodeType === Node.TEXT_NODE && ['SCRIPT', 'STYLE'].includes(node.parentNode?.nodeName)) {
+				let parts = node.textContent.split(commentPlaceholder);
+				if (parts.length > 1) {
+
+					let placeholders = [];
+					for (let i = 0; i<parts.length; i++) {
+						let current = document.createTextNode(parts[i]);
+						node.parentNode.insertBefore(current, node);
+						if (i > 0)
+							placeholders.push(current)
+					}
+
+					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
+						this.paths.push(path);
+
+						/*#IFDEV*/path.verify();/*#ENDIF*/
+					}
+
+					// Removing them here will mess up the treeWalker.
+					toRemove.push(node);
+				}
+			}
+		}
+		toRemove.map(el => el.remove());
+
+		// Handle redcomponent-placeholder's.
+		// Ctrl+F "redcomponent-placeholder" in project to find all code that manages subcomponents.
+		//if (componentNames.size)
+		//	this.components = [...this.fragment.querySelectorAll([...componentNames].join(','))]
+
+		// Rename "is" attributes so the Web Components don't instantiate until we have the values of their PathExpr arguments.
+		// that happens in NodeGroup.applyComponentExprs()
+		for (let el of this.fragment.querySelectorAll('[is]')) {
+			el.setAttribute('_is', el.getAttribute('is'))
+		//	this.components.push(el);
+		}
+
+		for (let path of this.paths) {
+			if (path.nodeBefore)
+				path.nodeBeforeIndex = Array.prototype.indexOf.call(path.nodeBefore.parentNode.childNodes, path.nodeBefore)
+			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 &&
+				(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. */
+	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))
+
+		let idEls = this.fragment.querySelectorAll('[id],[data-id]');
+		
+
+		// Check for valid id names.
+		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.`)
+		}
+
+
+		this.ids = Array.prototype.map.call(idEls, el => getNodePath(el))
+
+		// Events (not yet used)
+		for (let el of this.fragment.querySelectorAll('*')) {
+			for (let attrib of el.attributes)
+				if (isEvent(attrib.name))
+					this.events.push([attrib.name, getNodePath(el)])
+
+			if (el.tagName.includes('-') || el.hasAttribute('_is'))
+
+				// Dynamic components have attributes with expression values.
+				// They are created from applyExprs()
+				// But static components are created in a separate path inside the NodeGroup constructor.
+				if (!this.paths.find(path => path.nodeMarker === el))
+					this.staticComponents.push(getNodePath(el));
+		}
+
+	}
+
+	/**
+	 * Get the shell for the html strings.
+	 * @param htmlStrings {string[]}
+	 * @returns {Shell} */
+	static get(htmlStrings) {
+		let result = shells.get(htmlStrings);
+		if (!result) {
+			result = new Shell(htmlStrings);
+			shells.set(htmlStrings, result); // cache
+		}
+
+		/*#IFDEV*/result.verify();/*#ENDIF*/
+		return result;
+	}
+
+	//#IFDEV
+	// For debugging only:
+	verify() {
+		for (let path of this.paths) {
+			assert(this.fragment.contains(path.getParentNode()))
+			path.verify();
+		}
+	}
+	//#ENDIF
+}
+
+let shells = new WeakMap();

package/src/solarite/Solarite.js

@@ -0,0 +1,19 @@
+import createSolarite from "./createSolarite.js";
+
+/**
+ * TODO: The Proxy and the multiple base classes mess up 'instanceof Solarite'
+ * @type {Node|Class<HTMLElement>|function(tagName:string):Node|Class<HTMLElement>} */
+let Solarite = new Proxy(createSolarite(), {
+	apply(self, _, args) {
+		return createSolarite(...args)
+	}
+});
+
+
+/** @type {HTMLElement|Class} */
+export {Solarite}
+export {default as r} from './r.js';
+export {getArg, ArgType} from './getArg.js';
+
+export {forEach, watchGet, watchSet} from './watch.js' // old, unfinished
+export {watch} from './watch2.js'; // unfinished

package/src/solarite/Template.js

@@ -0,0 +1,85 @@
+import {assert} from "../util/Errors.js";
+import {getObjectId} from "./hash.js";
+import NodeGroupManager from "./NodeGroupManager.js";
+
+
+/**
+ * The html strings and evaluated expressions from an html tagged template.
+ * A unique Template is created for each item in a loop.
+ * Although the reference to the html strings is shared among templates. */
+export default class Template {
+
+	/** @type {(Template|string|function)|(Template|string|function)[]} Evaulated expressions.  */
+	exprs = []
+
+	/** @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. */
+	hashedFields;
+
+    /**
+     * @deprecated
+     * @type {ExprPath} Used with forEach() from watch.js
+   	 * Set in NodeGroup.applyOneExpr() */
+    parentPath;
+	
+	/** @type {NodeGroup} */
+	nodeGroup;
+	
+	/**
+	 * @type {string[][]} */
+	paths = [];
+
+	/**
+	 *
+	 * @param htmlStrings {string[]}
+	 * @param exprs {*[]} */
+	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.
+		//this.hashedFields = [getObjectId(htmlStrings), exprs]
+
+		//#IFDEV
+		assert(Array.isArray(htmlStrings))
+		assert(Array.isArray(exprs))
+		
+		Object.defineProperty(this, 'debug', {
+			get() {
+				return JSON.stringify([this.html, this.exprs]);
+			}
+		})
+		//#ENDIF
+	}
+
+	/**
+	 * Called by JSON.serialize when it encounters a Template.
+	 * This prevents the hashed version from being too large. */
+	toJSON() {
+		if (!this.hashedFields)
+			this.hashedFields = [getObjectId(this.html, 'Html'), this.exprs];
+		
+		return this.hashedFields
+	}
+
+	toNode() {
+		let ngm = new NodeGroupManager();
+		return ngm.render(this);
+	}
+
+	getCloseKey() {
+		// Use the joined html when debugging?
+		//return '@'+this.html.join('|')
+
+		return '@'+this.hashedFields[0];
+	}
+}

package/src/solarite/Util.js

@@ -0,0 +1,264 @@
+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;
+			}
+		}
+	}
+
+
+};
+
+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 {int|false} */
+export function findArrayDiff(a, b) {
+	if (a.length !== b.length)
+		return -1;
+	let aLength = a.length;
+	for (let i=0; i<aLength; i++)
+		if (a[i] !== b[i])
+			return i;
+	return false; // 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