solarite 0.5.2 → 0.7.0

package/src/PathToAttribs.js

@@ -1,81 +1,114 @@
-import Path from "./Path.js";
-import Globals from "./Globals.js";
-import assert from "./assert.js";
-
-export default class PathToAttribs extends Path {
-
-	/**
-	 * @type {Set<string>} Used for type=AttribType.Multiple to remember the attributes that were added. */
-	attrNames;
-
-	/** @type {boolean} Provides one or more attributes on a component. */
-	isComponent;
-
-	constructor(nodeBefore, nodeMarker) {
-		super(null, null);
-		this.nodeMarker = nodeMarker;
-		this.attrNames = new Set();
-	}
-
-	/**
-	 * @param exprs {Expr[][]} Only the first is used.
-	 * @param freeNodeGroups {boolean} Used only for watch. */
-	apply(exprs, freeNodeGroups) {
-		//#IFDEV
-		assert(Array.isArray(exprs));
-		//#ENDIF
-
-		let expr = exprs[0];
-		let node = this.nodeMarker;
-
-		if (Array.isArray(expr))
-			expr = expr.flat().join(' ');  // flat and join so we can accept arrays of arrays of strings.
-
-		// Add new attributes
-		let oldNames = this.attrNames;
-		this.attrNames = new Set();
-		if (expr) {
-			if (typeof expr === 'function') {
-				Globals.currentPath = this; // Used by watch()
-				this.watchFunction = expr; // used by renderWatched()
-				expr = expr();
-				Globals.currentPath = null;
-			}
-
-			// Attribute as name: value object.
-			if (typeof expr === 'object') {
-				for (let name in expr) {
-					let value = expr[name];
-					if (value === undefined || value === false || value === null)
-						continue;
-					node.setAttribute(name, value);
-					this.attrNames.add(name)
-				}
-			}
-
-			// Attributes as string
-			else {
-				let attrs = (expr + '') // Split string into multiple attributes.
-					.split(/([\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|\S+))/g)
-					.map(text => text.trim())
-					.filter(text => text.length);
-
-				for (let attr of attrs) {
-					let [name, value] = attr.split(/\s*=\s*/); // split on first equals.
-					value = (value || '').replace(/^(['"])(.*)\1$/, '$2'); // trim value quotes if they match.
-					node.setAttribute(name, value);
-					this.attrNames.add(name)
-				}
-			}
-		}
-
-		// Remove old attributes.
-		for (let oldName of oldNames)
-			if (!this.attrNames.has(oldName))
-				node.removeAttribute(oldName);
-	}
-
-
-	getExpressionCount() { return 1 }
-	getValue(exprs) { return exprs[0]; }
+import Path from "./Path.js";
+import Util from "./Util.js";
+import assert from "./assert.js";
+import PathToAttribValue from "./PathToAttribValue.js";
+import PathToEvent from "./PathToEvent.js";
+import {JsxAttr, styleToCss} from "./jsx.js";
+
+export default class PathToAttribs extends Path {
+
+	/**
+	 * @type {Set<string>} Used for type=AttribType.Multiple to remember the attributes that were added. */
+	attrNames;
+
+	/** @type {boolean} Provides one or more attributes on a component. */
+	isComponent;
+
+	constructor(nodeBefore, nodeMarker) {
+		super(null, null);
+		this.nodeMarker = nodeMarker;
+		this.attrNames = new Set();
+	}
+
+	/**
+	 * @param exprs {Expr[][]} Only the first is used. */
+	apply(exprs) {
+		//#IFDEV
+		assert(Array.isArray(exprs));
+		//#ENDIF
+		this.applySingle(exprs[0]);
+	}
+
+	/**
+	 * @param expr {Expr} */
+	applySingle(expr) {
+		let node = this.nodeMarker;
+
+		// JSX Tier 1 whole-attribute hole: `<a ` + jsxAttr("href", v) + `>`.
+		if (expr instanceof JsxAttr)
+			return this.applyJsxAttr(expr);
+
+		if (Array.isArray(expr))
+			expr = expr.flat().join(' ');  // flat and join so we can accept arrays of arrays of strings.
+
+		// Add new attributes
+		let oldNames = this.attrNames;
+		this.attrNames = new Set();
+		if (expr) {
+			if (typeof expr === 'function')
+				expr = expr();
+
+			// Attribute as name: value object.
+			if (typeof expr === 'object') {
+				for (let name in expr) {
+					let value = expr[name];
+					if (value === undefined || value === false || value === null)
+						continue;
+					node.setAttribute(name, value);
+					this.attrNames.add(name)
+				}
+			}
+
+			// Attributes as string
+			else {
+				let attribs = Util.splitAttribs(expr);
+				for (let name in attribs) {
+					node.setAttribute(name, attribs[name]);
+					this.attrNames.add(name);
+				}
+			}
+		}
+
+		// Remove old attributes.
+		for (let oldName of oldNames)
+			if (!this.attrNames.has(oldName))
+				node.removeAttribute(oldName);
+	}
+
+
+	/**
+	 * Apply a single JSX jsxAttr(name, value) pair.  We delegate to a cached PathToEvent or
+	 * PathToAttribValue sub-path so events, html properties, two-way binding, booleans, and
+	 * contenteditable all behave exactly as `name=${value}` in a tagged template.  The attr name
+	 * at a given hole is a compile-time literal, so the sub-path is stable across renders.
+	 * @param attr {JsxAttr} */
+	applyJsxAttr(attr) {
+		let name = attr.name;
+		if (name === 'key') // Lifted onto template.key by jsxTemplate(); never rendered as an attribute.
+			return;
+		let value = attr.value;
+
+		let sub = this.jsxSub;
+		if (sub === undefined || this.jsxSubName !== name) {
+			let node = this.nodeMarker;
+			if (Util.isEvent(name))
+				sub = new PathToEvent(null, node, name, null);
+			else {
+				sub = new PathToAttribValue(null, node, name, null);
+				sub.isHtmlProperty = Util.isHtmlProp(node, name);
+			}
+			sub.isComponentAttrib = this.isComponentAttrib;
+			this.jsxSub = sub;
+			this.jsxSubName = name;
+		}
+		sub.nodeMarker = this.nodeMarker;
+		sub.parentNg = this.parentNg;
+		if (name === 'style')
+			value = styleToCss(value);
+		sub.applySingle(value);
+	}
+
+
+	getExpressionCount() { return 1 }
+	getValue(exprs) { return exprs[0]; }
 }

package/src/PathToComment.js

@@ -1,8 +1,8 @@
-import Path from "./Path.js";
-
-// This Path renders nothing.
-export default class PathToComment extends Path {
-	constructor(nodeBefore, nodeMarker) {
-		super(nodeBefore, nodeMarker);
-	}
+import Path from "./Path.js";
+
+// This Path renders nothing.
+export default class PathToComment extends Path {
+	constructor(nodeBefore, nodeMarker) {
+		super(nodeBefore, nodeMarker);
+	}
 }

package/src/PathToComponent.js

@@ -1,189 +1,184 @@
-import Path from "./Path.js";
-import Util from "./Util.js";
-import delve from "./delve.js";
-import assert from "./assert.js";
-import PathToAttribValue from "./PathToAttribValue.js";
-import Globals from "./Globals.js";
-
-export default class PathToComponent extends Path {
-
-	/** @type {PathToAttribValue[]} Paths to dynamics attributes that will be set on the component.*/
-	attribPaths;
-
-	constructor(nodeBefore, nodeMarker) {
-		super(null, nodeMarker);
-	}
-
-	/**
-	 * Call render() on the component pointed to by this Path.
-	 * And instantiate it (from a -solarite-placeholder element) if it hasn't been done yet.
-	 * @param exprs {Expr[][]} Expressions to evaluate for each attribute to pass to the constructor.
-	 * This is different than other Path.apply() functions which only receive Expr[] and not Expr[][].
-	 * Because here we're receiving an array of arrays of expressions, one for each dynamic attribute.
-	 * @param freeNodeGroups {boolean} Used only by watch.js.
-	 * @param changed {boolean} True if the exprs have changed since the last time render() was called.*/
-	apply(exprs, freeNodeGroups=true, changed=true) {
-		//#IFDEV
-		assert(Array.isArray(exprs));
-		assert(!exprs.length || Array.isArray(exprs[0]));
-		//#ENDIF
-
-		//#IFDEV
-		assert(exprs.length === this.attribPaths.length);
-		//#ENDIF
-
-		let el = this.nodeMarker;
-
-		// 1. Attributes
-		let attribs = Util.attribsToObject(el, '_is');
-		for (let i=0, attribPath; attribPath = this.attribPaths[i]; i++) {
-			if (attribPath instanceof PathToAttribValue) {
-				let name = Util.dashesToCamel(attribPath.attrName);
-				attribs[name] = attribPath.getValue(exprs[i]);
-			}
-			else { // PathToAttribs
-				let val = attribPath.getValue(exprs[i]);
-				if (typeof val === 'object')
-					for (let name in val)
-						attribs[Util.dashesToCamel(name)] = val[name];
-				else if (typeof val === 'string') {
-					let attrs = val.split(/([\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|\S+))/g)
-						.map(text => text.trim())
-						.filter(text => text.length);
-
-					for (let attr of attrs) {
-						let [name, value] = attr.split(/\s*=\s*/); // split on first equals.
-						value = (value || '').replace(/^(['"])(.*)\1$/, '$2'); // trim value quotes if they match.
-						attribs[Util.dashesToCamel(name)] = value;
-					}
-				}
-			}
-		}
-
-		// 2. Instantiate component on first time.
-		let isAttrib = el.getAttribute('_is');
-		if (el.tagName.endsWith('-SOLARITE-PLACEHOLDER') || isAttrib) {
-
-
-			// 2a. Instantiate component
-			let tagName = (isAttrib || el.tagName.slice(0, -21)).toLowerCase(); // Remove -SOLARITE-PLACEHOLDER
-			let Constructor = customElements.get(tagName);
-			if (!Constructor)
-				throw new Error(`Must call customElements.define('${tagName}', Class) before using it.`);
-
-			Globals.currentSlotChildren = [...el.childNodes]; // TODO: Does this need to be a stack?
-			let newEl = new Constructor(attribs);
-
-			// 2b. Copy attributes over.
-			if (isAttrib) {
-				newEl.setAttribute('is', isAttrib);
-			//	el.removeAttribute('_is');
-			}
-			for (let attrib of el.attributes)
-				if (attrib.name !== '_is')
-					newEl.setAttribute(attrib.name, attrib.value);
-
-			// Set dynamic attributes if they are primitive types.
-			for (let name in attribs) {
-				let val = attribs[name];
-				let valType = typeof val;
-				if (valType === 'boolean') {
-					if (val !== false && val !== undefined && val !== null) // Util.isFalsy() inlined
-						newEl.setAttribute(name, '');
-				}
-
-				// If type is a non-boolean primitive, set the attribute value.
-				else if (valType==='string' || valType === 'number' || valType==='bigint')
-					newEl.setAttribute(name, val);
-			}
-
-
-			// 2c. If an id pointed at the placeholder, update it to point to the new element.
-			let id = newEl.getAttribute('data-id') || newEl.getAttribute('id');
-			if (id)
-				delve(this.parentNg.getRootNode(), id.split(/\./g), newEl);
-
-			// 2d. Update paths to use replaced element.
-			let ng = this.parentNg;
-			this.nodeMarker = newEl;
-			for (let path of ng.paths) {
-				if (path.nodeMarker === el)
-					path.nodeMarker = newEl;
-				if (path.nodeBefore === el)
-					path.nodeBefore = newEl;
-			}
-			if (ng.startNode === el)
-				ng.startNode = newEl;
-			if (ng.endNode === el)
-				ng.endNode = newEl;
-
-			// 2f. Call render() if it wasn't called by the constructor.
-			// This must happen before we add it to the DOM which can trigger connectedCallback() -> renderFirstTime()
-			// Because that path renders it without the attribute expressions.
-			if (typeof newEl.render === 'function' && !Globals.rendered.has(newEl))
-				newEl.render(attribs, changed);
-
-			// 2g. Update attribute paths to use the new element and re-apply them.
-			for (let i=0, attribPath; attribPath = this.attribPaths[i]; i++) {
-				attribPath.parentNg = this.parentNg;
-				attribPath.nodeMarker = newEl;
-				attribPath.apply(exprs[i]);
-			}
-
-			// 2e. Swap it to the DOM.
-			el.replaceWith(newEl);
-		}
-
-		// 2f. Render
-		else if (typeof el.render === 'function')
-			el.render(attribs, changed);
-
-		Globals.currentSlotChildren = null;
-	}
-
-	/**
-	 * @param newRoot {HTMLElement}
-	 * @param pathOffset {int}
-	 * @return {Path} */
-	clone(newRoot, pathOffset=0) {
-		/*#IFDEV*/this.verify();/*#ENDIF*/
-		let nodeMarker = this.getNewNodeMarker(newRoot, pathOffset);
-		let result = new PathToComponent(null, nodeMarker);
-		result.attribPaths = this.attribPaths.map(path => path.clone(newRoot, pathOffset));
-
-		//#IFDEV
-		result.verify();
-		//#ENDIF
-
-		return result;
-	}
-
-	getExpressionCount() { return 0 }
-
-	//#IFDEV
-	verify() {
-		super.verify();
-		assert(this.nodeMarker.nodeType === Node.ELEMENT_NODE);
-		assert(this.nodeMarker.tagName.includes('-') || this.nodeMarker.hasAttribute('is') || this.nodeMarker.hasAttribute('_is'));
-		if (this.attribPaths)
-			for (let path of this.attribPaths)
-				path.verify();
-	}
-
-	//#ENDIF
-}
-
-
-// TODO: Conver this to an iterator, to make it faster?
-// Especially since it's only used on the first render?
-function getNodes(startNode, endNode) {
-	let result = [];
-	let current = startNode
-	let afterLast = endNode?.nextSibling
-	while (current && current !== afterLast) {
-		result.push(current)
-		current = current.nextSibling
-	}
-
-	return result;
+import Path from "./Path.js";
+import Util from "./Util.js";
+import delve, {isDelvePath} from "./delve.js";
+import assert from "./assert.js";
+import PathToAttribValue from "./PathToAttribValue.js";
+import PathToKey from "./PathToKey.js";
+import Globals from "./Globals.js";
+import {getObjectHash} from "./Template.js";
+
+export default class PathToComponent extends Path {
+
+	/** @type {PathToAttribValue[]} Paths to dynamics attributes that will be set on the component.*/
+	attribPaths;
+
+	/** @type {string} Hash of the exprs from the previous apply(), used to detect changes. */
+	appliedExprsHash;
+
+	constructor(nodeBefore, nodeMarker) {
+		super(null, nodeMarker);
+	}
+
+	/**
+	 * Call render() on the component pointed to by this Path.
+	 * And instantiate it (from a -solarite-placeholder element) if it hasn't been done yet.
+	 * @param exprs {Expr[][]} Expressions to evaluate for each attribute to pass to the constructor.
+	 * This is different than other Path.apply() functions which only receive Expr[] and not Expr[][].
+	 * Because here we're receiving an array of arrays of expressions, one for each dynamic attribute. */
+	apply(exprs) {
+		//#IFDEV
+		assert(Array.isArray(exprs));
+		assert(!exprs.length || Array.isArray(exprs[0]));
+		//#ENDIF
+
+		//#IFDEV
+		assert(exprs.length === this.attribPaths.length);
+		//#ENDIF
+
+		// Deep comparison via hashing, so mutating a field on the same object counts as changed.
+		let newHash = getObjectHash(exprs);
+		let changed = newHash !== this.appliedExprsHash;
+		this.appliedExprsHash = newHash;
+
+		let el = this.nodeMarker;
+
+		// 1. Attributes
+		let attribs = Util.attribsToObject(el, '_is');
+		for (let i=0, attribPath; attribPath = this.attribPaths[i]; i++) {
+			if (attribPath instanceof PathToKey) // The list key is never a component arg.
+				continue;
+			if (attribPath instanceof PathToAttribValue) {
+				let name = Util.dashesToCamel(attribPath.attrName);
+				
+				// Resolve two way bindimg path before we pass it to the component.
+				let value = attribPath.getValue(exprs[i]);
+				if (!attribPath.attrValue && isDelvePath(value))
+					value = delve(value[0], value.slice(1));
+				
+				attribs[name] = value;
+			}
+			else { // PathToAttribs
+				let val = attribPath.getValue(exprs[i]);
+				if (typeof val === 'object')
+					for (let name in val)
+						attribs[Util.dashesToCamel(name)] = val[name];
+				else if (typeof val === 'string') {
+					let attrs = Util.splitAttribs(val);
+					for (let name in attrs)
+						attribs[Util.dashesToCamel(name)] = attrs[name];
+				}
+			}
+		}
+
+		// 2. Instantiate component on first time.
+		let isAttrib = el.getAttribute('_is');
+		if (el.tagName.endsWith('-SOLARITE-PLACEHOLDER') || isAttrib) {
+
+
+			// 2a. Instantiate component
+			let tagName = (isAttrib || el.tagName.slice(0, -21)).toLowerCase(); // Remove -SOLARITE-PLACEHOLDER
+			let Constructor = customElements.get(tagName);
+			if (!Constructor)
+				throw new Error(`Must call customElements.define('${tagName}', Class) before using it.`);
+
+			Globals.currentSlotChildren = [...el.childNodes]; // TODO: Does this need to be a stack?
+			let newEl = new Constructor(attribs);
+
+			// 2b. Copy attributes over.
+			if (isAttrib) {
+				newEl.setAttribute('is', isAttrib);
+			//	el.removeAttribute('_is');
+			}
+			for (let attrib of el.attributes)
+				if (attrib.name !== '_is')
+					newEl.setAttribute(attrib.name, attrib.value);
+
+			// Set dynamic attributes if they are primitive types.
+			for (let name in attribs) {
+				let val = attribs[name];
+				let valType = typeof val;
+				if (valType === 'boolean') {
+					if (val !== false && val !== undefined && val !== null) // Util.isFalsy() inlined
+						newEl.setAttribute(name, '');
+				}
+
+				// If type is a non-boolean primitive, set the attribute value.
+				else if (valType==='string' || valType === 'number' || valType==='bigint')
+					newEl.setAttribute(name, val);
+			}
+
+
+			// 2c. If an id pointed at the placeholder, update it to point to the new element.
+			let id = newEl.getAttribute('data-id') || newEl.getAttribute('id');
+			if (id)
+				delve(this.parentNg.getRootNode(), id.split(/\./g), newEl);
+
+			// 2d. Update paths to use replaced element.
+			let ng = this.parentNg;
+			this.nodeMarker = newEl;
+			for (let path of ng.paths) {
+				if (path.nodeMarker === el)
+					path.nodeMarker = newEl;
+				if (path.nodeBefore === el)
+					path.nodeBefore = newEl;
+			}
+			if (ng.startNode === el)
+				ng.startNode = newEl;
+			if (ng.endNode === el)
+				ng.endNode = newEl;
+
+			// 2f. Call render() if it wasn't called by the constructor.
+			// This must happen before we add it to the DOM which can trigger connectedCallback() -> renderFirstTime()
+			// Because that path renders it without the attribute expressions.
+			if (typeof newEl.render === 'function' && !Globals.rendered.has(newEl))
+				newEl.render(attribs, true);
+
+			// 2g. Update attribute paths to use the new element and re-apply them.
+			for (let i=0, attribPath; attribPath = this.attribPaths[i]; i++) {
+				attribPath.parentNg = this.parentNg;
+				attribPath.nodeMarker = newEl;
+				attribPath.apply(exprs[i]);
+			}
+
+			// 2e. Swap it to the DOM.
+			el.replaceWith(newEl);
+		}
+
+		// 2f. Render
+		else if (typeof el.render === 'function')
+			el.render(attribs, changed);
+
+		Globals.currentSlotChildren = null;
+	}
+
+	/**
+	 * @param newRoot {HTMLElement}
+	 * @param pathOffset {int}
+	 * @return {Path} */
+	clone(newRoot, pathOffset=0) {
+		/*#IFDEV*/this.verify();/*#ENDIF*/
+		let nodeMarker = this.getNewNodeMarker(newRoot, pathOffset);
+		let result = new PathToComponent(null, nodeMarker);
+		result.attribPaths = this.attribPaths.map(path => path.clone(newRoot, pathOffset));
+
+		//#IFDEV
+		result.verify();
+		//#ENDIF
+
+		return result;
+	}
+
+	getExpressionCount() { return 0 }
+
+	//#IFDEV
+	verify() {
+		super.verify();
+		assert(this.nodeMarker.nodeType === Node.ELEMENT_NODE);
+		assert(this.nodeMarker.tagName.includes('-') || this.nodeMarker.hasAttribute('is') || this.nodeMarker.hasAttribute('_is'));
+		if (this.attribPaths)
+			for (let path of this.attribPaths)
+				path.verify();
+	}
+
+	//#ENDIF
 }