solarite 0.7.0 → 0.8.0

package/src/PathToAttribs.js

@@ -1,6 +1,5 @@
 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";
@@ -11,24 +10,21 @@ 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;
+	/** @type {PathToEvent|PathToAttribValue|undefined} Cached sub-path for the JSX
+	 * whole-attribute fast path; see applyJsxAttr().  Declared so the first assignment
+	 * doesn't transition the hidden class. */
+	jsxSub;
+
+	/** @type {?string} The attribute name jsxSub was built for. */
+	jsxSubName;
 
 	constructor(nodeBefore, nodeMarker) {
-		super(null, null);
-		this.nodeMarker = nodeMarker;
+		// nodeBefore is discarded: an attribute path has no nodes of its own.  The marker goes
+		// straight through the base constructor rather than being stored a second time after it.
+		super(null, 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) {
@@ -107,8 +103,4 @@ export default class PathToAttribs extends Path {
 			value = styleToCss(value);
 		sub.applySingle(value);
 	}
-
-
-	getExpressionCount() { return 1 }
-	getValue(exprs) { return exprs[0]; }
 }

package/src/PathToComponent.js

@@ -4,6 +4,7 @@ import delve, {isDelvePath} from "./delve.js";
 import assert from "./assert.js";
 import PathToAttribValue from "./PathToAttribValue.js";
 import PathToKey from "./PathToKey.js";
+import PathToEvent from "./PathToEvent.js";
 import Globals from "./Globals.js";
 import {getObjectHash} from "./Template.js";
 
@@ -23,15 +24,15 @@ export default class PathToComponent extends Path {
 	 * 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[][].
+	 * This is different than other Path.applyAll() 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
+	applyAll(exprs) {
+		//#IFDEBUG
 		assert(Array.isArray(exprs));
 		assert(!exprs.length || Array.isArray(exprs[0]));
 		//#ENDIF
 
-		//#IFDEV
+		//#IFDEBUG
 		assert(exprs.length === this.attribPaths.length);
 		//#ENDIF
 
@@ -47,8 +48,15 @@ export default class PathToComponent extends Path {
 		for (let i=0, attribPath; attribPath = this.attribPaths[i]; i++) {
 			if (attribPath instanceof PathToKey) // The list key is never a component arg.
 				continue;
+			// Event attributes like onchange=${...} are bound with addEventListener when the
+			// PathToEvent itself is applied.  They must not also become constructor fields:
+			// a component that assigns its fields onto itself would set the native on*
+			// property, making the handler fire a second time with only the (event) argument
+			// instead of Solarite's documented (event, element) signature.
+			if (attribPath instanceof PathToEvent)
+				continue;
 			if (attribPath instanceof PathToAttribValue) {
-				let name = Util.dashesToCamel(attribPath.attrName);
+				let name = Util.dashesToCamel(attribPath.attribName);
 				
 				// Resolve two way bindimg path before we pass it to the component.
 				let value = attribPath.getValue(exprs[i]);
@@ -78,8 +86,27 @@ export default class PathToComponent extends Path {
 			// 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.`);
+
+			// Not defined yet (e.g. the module is being lazily imported): keep the placeholder
+			// and instantiate when the definition lands, like a native custom-element upgrade.
+			// deferredExprs always holds the LATEST exprs so re-renders while undefined win.
+			if (!Constructor) {
+				this.deferredExprs = exprs;
+				if (!this.whenDefinedPending) {
+					this.whenDefinedPending = true;
+					console.warn(`Solarite: <${tagName}> is not defined yet; waiting for customElements.define().`);
+					customElements.whenDefined(tagName).then(() => {
+						this.whenDefinedPending = false;
+						let deferred = this.deferredExprs;
+						this.deferredExprs = null;
+						// Skip if a newer render already instantiated or replaced the placeholder.
+						if (deferred && this.nodeMarker === el && el.tagName.endsWith('-SOLARITE-PLACEHOLDER'))
+							this.applyAll(deferred);
+					});
+				}
+				Globals.currentSlotChildren = null;
+				return;
+			}
 
 			Globals.currentSlotChildren = [...el.childNodes]; // TODO: Does this need to be a stack?
 			let newEl = new Constructor(attribs);
@@ -97,8 +124,10 @@ export default class PathToComponent extends Path {
 			for (let name in attribs) {
 				let val = attribs[name];
 				let valType = typeof val;
+				// Only true and false can reach here, so the undefined/null halves of the
+				// falsy test this used to spell out could never have decided anything.
 				if (valType === 'boolean') {
-					if (val !== false && val !== undefined && val !== null) // Util.isFalsy() inlined
+					if (val)
 						newEl.setAttribute(name, '');
 				}
 
@@ -111,7 +140,7 @@ export default class PathToComponent extends Path {
 			// 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);
+				delve(this.parentNg.getRootEl(), id.split(/\./g), newEl);
 
 			// 2d. Update paths to use replaced element.
 			let ng = this.parentNg;
@@ -137,7 +166,7 @@ export default class PathToComponent extends Path {
 			for (let i=0, attribPath; attribPath = this.attribPaths[i]; i++) {
 				attribPath.parentNg = this.parentNg;
 				attribPath.nodeMarker = newEl;
-				attribPath.apply(exprs[i]);
+				attribPath.applyAll(exprs[i]);
 			}
 
 			// 2e. Swap it to the DOM.
@@ -156,21 +185,16 @@ export default class PathToComponent extends Path {
 	 * @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);
+		// A component path's nodeBefore is always null (the constructor discards it), so the
+		// base clone() resolves only the nodeMarker and hands back a new PathToComponent.
+		let result = super.clone(newRoot, pathOffset);
 		result.attribPaths = this.attribPaths.map(path => path.clone(newRoot, pathOffset));
-
-		//#IFDEV
-		result.verify();
-		//#ENDIF
-
 		return result;
 	}
 
 	getExpressionCount() { return 0 }
 
-	//#IFDEV
+	//#IFDEBUG
 	verify() {
 		super.verify();
 		assert(this.nodeMarker.nodeType === Node.ELEMENT_NODE);

package/src/PathToEvent.js

@@ -1,15 +1,21 @@
 import assert from "./assert.js";
-import PathToAttribValue from "./PathToAttribValue.js";
+import PathToAttribValue, {delegatedKeyFor} from "./PathToAttribValue.js";
 
 // TODO: Merge this into PathToAttribValue?
 export default class PathToEvent extends PathToAttribValue {
 
-	/** @type {string} The attrName without the "on" prefix. */
+	/** @type {string} The attribName without the "on" prefix. */
 	eventName;
 
-	constructor(nodeBefore, nodeMarker, attrName=null, attrValue=null) {
-		super(null, nodeMarker, attrName, attrValue);
-		this.eventName = attrName ? attrName.slice(2) : null;
+	/** @type {symbol|undefined} Expando key nodes store this event's delegated handler under.
+	 * Undefined for non-delegatable (non-bubbling) events; bindEvent() then binds directly. */
+	delegatedKey;
+
+	constructor(nodeBefore, nodeMarker, attribName=null, attrValue=null) {
+		super(null, nodeMarker, attribName, attrValue);
+		this.skipIfSame = true;
+		this.eventName = attribName ? attribName.slice(2) : null;
+		this.delegatedKey = this.eventName !== null ? delegatedKeyFor(this.eventName) : undefined;
 	}
 
 	/**
@@ -19,8 +25,8 @@ export default class PathToEvent extends PathToAttribValue {
 	 * onclick=${[this, 'doSomething', 'meow']}
 	 *
 	 * @param exprs {Expr[]} Only the first is used.*/
-	apply(exprs) {
-		//#IFDEV
+	applyAll(exprs) {
+		//#IFDEBUG
 		assert(Array.isArray(exprs));
 		//#ENDIF
 
@@ -28,7 +34,7 @@ export default class PathToEvent extends PathToAttribValue {
 		// We have expressions within a string attribute value that's not a Solarite event.  E.g.
 		// <div onclick="alert(${1});"
 		if (this.attrValue?.length > 1) {
-			super.apply(exprs);
+			super.applyAll(exprs);
 			return;
 		}
 
@@ -40,16 +46,16 @@ export default class PathToEvent extends PathToAttribValue {
 	applySingle(expr) {
 		// Expressions within a string attribute value that's not a Solarite event.
 		if (this.attrValue?.length > 1)
-			return super.apply([expr]);
+			return super.applyAll([expr]);
 
 		// Don't bind events to component placeholders.
 		// PathToComponent will do the binding later when it instantiates the component.
 		if (this.isComponentAttrib && this.nodeMarker.tagName.endsWith('-SOLARITE-PLACEHOLDER'))
 			return;
 
-		let root = this.parentNg.rootNg.root
+		let root = this.parentNg.rootNg.rootEl
 
-		/*#IFDEV*/
+		/*#IFDEBUG*/
 		assert(root?.nodeType === 1);
 		/*#ENDIF*/
 
@@ -67,7 +73,7 @@ export default class PathToEvent extends PathToAttribValue {
 			expr = null;
 		}
 		else
-			throw new Error(`Invalid event binding: <${node.tagName.toLowerCase()} ${this.attrName}=\${${JSON.stringify(expr)}}>`);
+			throw new Error(`Solarite: ${this.attribName}=\${...} is not a function.`);
 
 		this.bindEvent(node, root, eventName, eventName, func, expr);
 	}

package/src/PathToKey.js

@@ -7,12 +7,6 @@ import Path from "./Path.js";
  * matches NodeGroups to new templates by this key. */
 export default class PathToKey extends Path {
 
-	/**
-	 * @param exprs {Expr[]} Only the first is used. */
-	apply(exprs) {
-		this.parentNg.key = exprs[0];
-	}
-
 	applySingle(expr) {
 		this.parentNg.key = expr;
 	}