solarite 0.5.2 → 0.7.1

package/src/PathToAttribValue.js

@@ -1,262 +1,402 @@
-import Path from "./Path.js";
-import Globals from "./Globals.js";
-import Util from "./Util.js";
-import delve from "./delve.js";
-import assert from "./assert.js";
-
-export default class PathToAttribValue extends Path {
-
-	/** @type {?string} Used only if type=AttribType.Value. */
-	attrName;
-
-	/**
-	 * @type {?string[]} Used only if type=AttribType.Value. If null, use one expr to set the whole attribute value. */
-	attrValue;
-
-	/** @type {boolean} Provides value for attribute on a component. */
-	isComponent;
-
-	isHtmlProperty;
-
-	constructor(nodeBefore, nodeMarker, attrName=null, attrValue=null) {
-		super(null, nodeMarker);
-		this.attrName = attrName;
-		this.attrValue = attrValue;
-	}
-
-	/**
-	 * Set the value of an attribute.  This can be for any attribute, not just attributes named "value".
-	 * @param exprs {Expr[]} */
-	apply(exprs) {
-		//#IFDEV
-		assert(Array.isArray(exprs));
-		//#ENDIF
-
-		let node = this.nodeMarker;
-		let expr = exprs[0];
-
-		let multiple = this.attrValue;
-
-		// Two-way binding between attributes
-		// Passing a path to the value attribute.
-		// Copies the attribute to the property when the input event fires.
-		// value=${[this, 'value]'}
-		// checked=${[this, 'isAgree']}
-		// This same logic is in NodeGroup.instantiateComponent() for components.
-		if (!multiple && Util.isPath(expr)) {
-
-			// Don't bind events to component placeholders.
-			// PathToComponent will do the binding later when it instantiates the component.
-			if (this.isComponentAttrib && node.tagName.endsWith('-SOLARITE-PLACEHOLDER'))
-				return;
-
-			/** @type {[Object, string[]]} */
-			let [obj, path] = [expr[0], expr.slice(1)];
-
-			if (!obj)
-				throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${[${expr.map(item => item ? `'${item}'` : item+'').join(', ')}]}>.`);
-
-			let value = delve(obj, path);
-
-			// Special case to allow setting select-multiple value from an array
-			if (this.attrName === 'value' && node.type === 'select-multiple' && Array.isArray(value)) {
-				// Set the .selected property on the options having a value within value.
-				let strValues = value.map(v => v + '');
-				for (let option of node.options)
-					option.selected = strValues.includes(option.value)
-			}
-			else {
-				// TODO: should we remove isFalsy, since these are always props?
-				const strValue = Util.isFalsy(value) ? '' : value;
-
-				// Special case for contenteditable
-				if (this.attrName === 'value' && node.hasAttribute('contenteditable')) {
-					const existingValue = node.innerHTML;
-					if (strValue !== existingValue)
-						node.innerHTML = strValue;
-				}
-				else {
-
-					// If we don't have this condition, when we call render(), the browser will scroll to the currently
-					// selected item in a <select> and mess up manually scrolling to a different value.
-					if (strValue !== node[this.attrName])
-						node[this.attrName] = strValue;
-				}
-			}
-
-			// TODO: We need to remove any old listeners, like in bindEventAttribute.
-			// Does bindEvent() now handle that?
-			let func = () => {
-				let value = (this.attrName === 'value')
-					? Util.getInputValue(node)
-					: node[this.attrName];
-				delve(obj, path, value);
-			}
-
-			// We use capture so we update the values before other events added by the user.
-			// TODO: Bind to scroll events also?
-			// What about resize events and width/height?
-			this.bindEvent(node, this.parentNg.getRootNode(), this.attrName, 'input', func, [], true);
-		}
-
-		// Regular attribute
-		else {
-			// Cache this on Path.isHtmlProperty when Shell creates the props.
-			// Have Path.clone() copy .isHtmlProperty?
-			let isProp = this.isHtmlProperty;
-
-			// Values to toggle an attribute
-			if (!multiple) {
-				Globals.currentPath = this; // Used by watch()
-				if (typeof expr === 'function') {
-					if (this.isComponentAttrib)
-						return;
-
-					this.watchFunction = expr; // The function that gets the expression, used for renderWatched()
-					expr = expr();
-				}
-				else
-					expr = Util.makePrimitive(expr);
-				Globals.currentPath = null;
-			}
-
-
-			if (!multiple && (expr === undefined || expr === false || expr === null)) { // Util.isFalsy() inlined.
-				if (isProp)
-					node[this.attrName] = false;
-				node.removeAttribute(this.attrName);
-			}
-			else if (!multiple && expr === true) {
-				if (isProp)
-					node[this.attrName] = true;
-				node.setAttribute(this.attrName, '');
-			}
-
-			// A non-toggled attribute
-			else {
-
-				// If it's a series of expressions among strings, join them together.
-				let joinedValue = multiple // avoid function call if there are no strings
-					? this.getValue(exprs)
-					: expr 	// If the attribute is one expression with no strings
-
-				// Only update attributes if the value has changed.
-				// This is needed for setting input.value, .checked, option.selected, etc.
-				let oldVal = isProp
-					? node[this.attrName]
-					: node.getAttribute(this.attrName);
-				if (oldVal !== joinedValue) {
-
-					// <textarea value=${expr}></textarea>
-					// Without this branch we have no way to set the value of a textarea,
-					// since we also prohibit expressions that are a child of textarea.
-					if (isProp)
-						node[this.attrName] = joinedValue;
-
-						// Allow one-way binding to contenteditable value attribute.
-						// Contenteditables normally don't have a value attribute and have their content set via innerHTML.
-					// Solarite doesn't allow contenteditables to have expressions as their children.
-					else if (this.attrName === 'value' && node.hasAttribute('contenteditable')) {
-						node.innerHTML = joinedValue;
-					}
-
-					// TODO: Putting an 'else' here would be more performant
-					node.setAttribute(this.attrName, joinedValue);
-				}
-			}
-		}
-	}
-
-
-	getExpressionCount() { return this.attrValue ? this.attrValue.length-1 : 1 }
-
-	/**
-	 * @param exprs {Expr|Expr[]} // TODO: Why is this sometimes not an array?
-	 * @return {string} The joined values of the expressions, or the first expression if there are no strings. */
-	getValue(exprs) {
-
-		//#IFDEV
-		assert(Array.isArray(exprs));
-		//#ENDIF
-		//if (!Array.isArray(exprs))
-		//	return exprs;
-
-		if (!this.attrValue) {// If it's not multiple paths inside a single attribute, return first (and only) expression.
-			//#IFDEV
-			assert(exprs.length === 1);
-			//#ENDIF
-			return exprs[0];
-		}
-
-		let result = [];
-		let values = this.attrValue;
-		for (let i = 0; i < values.length; i++) {
-			result.push(values[i]);
-			if (i < values.length - 1) {
-				Globals.currentPath = this; // Used by watch()
-				let val = Util.makePrimitive(exprs[i]);
-				Globals.currentPath = null;
-				if (!Util.isFalsy(val))
-					result.push(val);
-			}
-		}
-		return result.join('')
-	}
-
-	/**
-	 * Call function when eventName is triggerd on node.
-	 * @param node {HTMLElement}
-	 * @param root {HTMLElement}
-	 * @param key {string}
-	 * @param eventName {string}
-	 * @param func {function}
-	 * @param args {array}
-	 * @param capture {boolean} */
-	bindEvent(node, root, key, eventName, func, args, capture=false) {
-		let nodeEvents = Globals.nodeEvents.get(node);
-		if (!nodeEvents) {
-			nodeEvents = {[key]: new Array(3)};
-			Globals.nodeEvents.set(node, nodeEvents);
-		}
-		let nodeEvent = nodeEvents[key];
-		if (!nodeEvent)
-			nodeEvents[key] = nodeEvent = new Array(3);
-
-		if (typeof func !== 'function')
-			throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${${func}}> because it's not a function.`);
-
-		// If function has changed, remove and rebind the event.
-		if (nodeEvent[0] !== func) {
-
-			// TODO: We should be removing event listeners when calling getNodeGroup(),
-			// when we get the node from the list of nodeGroupsAttached/nodeGroupsDetached,
-			// instead of only when we rebind an event.
-			let [existing, existingBound, _] = nodeEvent;
-			if (existing)
-				node.removeEventListener(eventName, existingBound, capture);
-
-			let originalFunc = func;
-
-			// BoundFunc sets the "this" variable to be the current Solarite component.
-			let boundFunc = (event) => {
-				let args = nodeEvent[2];
-				return originalFunc.call(root, ...args, event, node);
-			}
-
-			// Save both the original and bound functions.
-			// Original so we can compare it against a newly assigned function.
-			// Bound so we can use it with removeEventListner().
-			nodeEvent[0] = originalFunc;
-			nodeEvent[1] = boundFunc;
-
-			node.addEventListener(eventName, boundFunc, capture);
-
-			// TODO: classic event attribs?
-			//el[attr.name] = e => // e.g. el.onclick = ... // put "event", "el", and "this" in scope for the event code.
-			//	(new Function('event', 'el', attr.value)).bind(this.manager.rootEl)(e, el)
-		}
-
-		//  Otherwise just update the args to the function.
-		nodeEvents[key][2] = args;
-	}
+import Path from "./Path.js";
+import Util from "./Util.js";
+import delve, {isDelvePath} from "./delve.js";
+import assert from "./assert.js";
+
+export default class PathToAttribValue extends Path {
+
+	/** @type {?string} Used only if type=AttribType.Value. */
+	attrName;
+
+	/**
+	 * @type {?string[]} Used only if type=AttribType.Value. If null, use one expr to set the whole attribute value. */
+	attrValue;
+
+	/** @type {boolean} Provides value for attribute on a component. */
+	isComponent;
+
+	isHtmlProperty;
+
+	constructor(nodeBefore, nodeMarker, attrName=null, attrValue=null) {
+		super(null, nodeMarker);
+		this.attrName = attrName;
+		this.attrValue = attrValue;
+	}
+
+	/**
+	 * Set the value of an attribute.  This can be for any attribute, not just attributes named "value".
+	 * @param exprs {Expr[]} */
+	apply(exprs) {
+		//#IFDEV
+		assert(Array.isArray(exprs));
+		//#ENDIF
+
+		// Multiple expressions in one attribute value, e.g. class="a ${b} c ${d}"
+		if (this.attrValue) {
+			let node = this.nodeMarker;
+			let joinedValue = this.getValue(exprs);
+			let isProp = this.isHtmlProperty;
+
+			// Only update attributes if the value has changed.
+			// This is needed for setting input.value, .checked, option.selected, etc.
+			let oldVal = isProp
+				? node[this.attrName]
+				: node.getAttribute(this.attrName);
+			if (oldVal !== joinedValue) {
+				if (isProp)
+					node[this.attrName] = joinedValue;
+				else if (this.attrName === 'value' && node.hasAttribute('contenteditable'))
+					node.innerHTML = joinedValue;
+				node.setAttribute(this.attrName, joinedValue);
+			}
+		}
+		else
+			this.applySingle(exprs[0]);
+	}
+
+	/**
+	 * Set the attribute from a single expression that makes up its whole value.
+	 * @param expr {Expr} */
+	applySingle(expr) {
+		// One expression surrounded by strings, e.g. class="a ${b} c".  Join through apply().
+		if (this.attrValue)
+			return this.apply([expr]);
+
+		let node = this.nodeMarker;
+
+		// Two-way binding between attributes
+		// Passing a path to the value attribute.
+		// Copies the attribute to the property when the input event fires.
+		// value=${[this, 'value]'}
+		// checked=${[this, 'isAgree']}
+		// This same logic is in NodeGroup.instantiateComponent() for components.
+		if (isDelvePath(expr)) {
+
+			// Don't bind events to component placeholders.
+			// PathToComponent will do the binding later when it instantiates the component.
+			if (this.isComponentAttrib && node.tagName.endsWith('-SOLARITE-PLACEHOLDER'))
+				return;
+
+			/** @type {[Object, string[]]} */
+			let [obj, path] = [expr[0], expr.slice(1)];
+
+			if (!obj)
+				throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${[${expr.map(item => item ? `'${item}'` : item+'').join(', ')}]}>.`);
+
+			let value = delve(obj, path);
+
+			// Special case to allow setting select-multiple value from an array
+			if (this.attrName === 'value' && node.type === 'select-multiple' && Array.isArray(value)) {
+				// Set the .selected property on the options having a value within value.
+				let strValues = value.map(v => v + '');
+				for (let option of node.options)
+					option.selected = strValues.includes(option.value)
+			}
+
+			// Radio group: this radio is checked when its value matches the bound model value.
+			else if (node.type === 'radio')
+				node.checked = node.value === (value + '');
+
+			else {
+				// TODO: should we remove isFalsy, since these are always props?
+				const strValue = Util.isFalsy(value) ? '' : value;
+
+				// Special case for contenteditable
+				if (this.attrName === 'value' && node.hasAttribute('contenteditable')) {
+					const existingValue = node.innerHTML;
+					if (strValue !== existingValue)
+						node.innerHTML = strValue;
+				}
+				else {
+
+					// If we don't have this condition, when we call render(), the browser will scroll to the currently
+					// selected item in a <select> and mess up manually scrolling to a different value.
+					if (strValue !== node[this.attrName])
+						node[this.attrName] = strValue;
+				}
+			}
+
+			// TODO: We need to remove any old listeners, like in bindEventAttribute.
+			// Does bindEvent() now handle that?
+			let func = () => {
+				let value = (this.attrName === 'value' || node.type === 'radio')
+					? Util.getInputValue(node)
+					: node[this.attrName];
+				delve(obj, path, value);
+			}
+
+			// We use capture so we update the values before other events added by the user.
+			// TODO: Bind to scroll events also?
+			// What about resize events and width/height?
+			this.bindEvent(node, this.parentNg.getRootNode(), this.attrName, 'input', func, null, true);
+		}
+
+		// Regular attribute
+		else {
+			// Cache this on Path.isHtmlProperty when Shell creates the props.
+			// Have Path.clone() copy .isHtmlProperty?
+			let isProp = this.isHtmlProperty;
+
+			if (typeof expr === 'function') {
+				if (this.isComponentAttrib)
+					return;
+				expr = expr();
+			}
+			else
+				expr = Util.makePrimitive(expr);
+
+			// Values to toggle an attribute
+			if (expr === undefined || expr === false || expr === null) { // Util.isFalsy() inlined.
+				if (isProp)
+					node[this.attrName] = false;
+				node.removeAttribute(this.attrName);
+			}
+			else if (expr === true) {
+				if (isProp)
+					node[this.attrName] = true;
+				node.setAttribute(this.attrName, '');
+			}
+
+			// A non-toggled attribute
+			else {
+				// Only update attributes if the value has changed.
+				// This is needed for setting input.value, .checked, option.selected, etc.
+				// A missing attribute counts as '', so empty values don't write empty attributes.
+				let oldVal = isProp
+					? node[this.attrName]
+					: node.getAttribute(this.attrName) ?? '';
+				if (oldVal !== expr) {
+
+					// <textarea value=${expr}></textarea>
+					// Without this branch we have no way to set the value of a textarea,
+					// since we also prohibit expressions that are a child of textarea.
+					if (isProp)
+						node[this.attrName] = expr;
+
+						// Allow one-way binding to contenteditable value attribute.
+						// Contenteditables normally don't have a value attribute and have their content set via innerHTML.
+					// Solarite doesn't allow contenteditables to have expressions as their children.
+					else if (this.attrName === 'value' && node.hasAttribute('contenteditable')) {
+						node.innerHTML = expr;
+					}
+
+					// TODO: Putting an 'else' here would be more performant
+					node.setAttribute(this.attrName, expr);
+				}
+			}
+		}
+	}
+
+
+	getExpressionCount() { return this.attrValue ? this.attrValue.length-1 : 1 }
+
+	/**
+	 * @param exprs {Expr|Expr[]} // TODO: Why is this sometimes not an array?
+	 * @return {string} The joined values of the expressions, or the first expression if there are no strings. */
+	getValue(exprs) {
+
+		//#IFDEV
+		assert(Array.isArray(exprs));
+		//#ENDIF
+		//if (!Array.isArray(exprs))
+		//	return exprs;
+
+		if (!this.attrValue) {// If it's not multiple paths inside a single attribute, return first (and only) expression.
+			//#IFDEV
+			assert(exprs.length === 1);
+			//#ENDIF
+			return exprs[0];
+		}
+
+		let result = [];
+		let values = this.attrValue;
+		for (let i = 0; i < values.length; i++) {
+			result.push(values[i]);
+			if (i < values.length - 1) {
+				let val = Util.makePrimitive(exprs[i]);
+				if (!Util.isFalsy(val))
+					result.push(val);
+			}
+		}
+		return result.join('')
+	}
+
+	/**
+	 * Call function when eventName is triggerd on node.
+	 * @param node {HTMLElement}
+	 * @param root {HTMLElement}
+	 * @param key {string}
+	 * @param eventName {string}
+	 * @param func {function}
+	 * @param args {array}
+	 * @param capture {boolean} */
+	/**
+	 * @param funcAndArgs {?Array} The [func, ...args] array from the template, or null if func stands alone. */
+	bindEvent(node, root, key, eventName, func, funcAndArgs, capture=false) {
+		if (typeof func !== 'function')
+			throw new Error(`Solarite cannot bind to <${node.tagName.toLowerCase()} ${this.attrName}=\${${func}}> because it's not a function.`);
+
+		// Whether to delegate is decided in registerBinding(), which only runs for a NEW binding.
+		// Re-renders rebind existing rows (just updating binding.args below), so they skip the
+		// options lookup + delegatableEvents check entirely.
+		let options = this.parentNg.rootNg.options;
+
+		// Store the callable as a single [func, ...args] array.  Array-form bindings
+		// (onclick=${[fn, arg]}, the hot per-row case) pass it through with no allocation;
+		// a plain function allocates a one-element array, which is rare (buttons, two-way).
+		let args = funcAndArgs || [func];
+
+		// One stable EventBinding object per node+key is registered with addEventListener
+		// and dispatches to the current args.  This way, assigning a new function
+		// (e.g. a fresh arrow function on each render) never needs add/removeEventListener.
+		// Most nodes have one binding, stored directly; a second key upgrades to a map.
+		let nodeEvents = node[eventBindingsKey];
+		if (nodeEvents === undefined) {
+			let b = node[eventBindingsKey] = new EventBinding(root, node, key, args);
+			registerBinding(b, node, eventName, capture, options, root);
+			return;
+		}
+
+		let binding;
+
+		// The node already has a single EventBinding stored directly at node[eventBindingsKey].
+		// If it's for this same key (e.g. 'click' rebound on re-render), just update it below.
+		// Otherwise this is the node's second event key, so upgrade the slot to a
+		// {key: EventBinding} map holding both.  Nodes with one handler (the common case)
+		// never pay for that map object.
+		if (nodeEvents instanceof EventBinding) {
+			if (nodeEvents.key === key)
+				binding = nodeEvents;
+			else {
+				let map = node[eventBindingsKey] = {};
+				map[nodeEvents.key] = nodeEvents;
+				binding = map[key] = new EventBinding(root, node, key, args);
+				registerBinding(binding, node, eventName, capture, options, root);
+				return;
+			}
+		}
+		else {
+			binding = nodeEvents[key];
+			if (!binding) {
+				binding = nodeEvents[key] = new EventBinding(root, node, key, args);
+				registerBinding(binding, node, eventName, capture, options, root);
+				return;
+			}
+		}
+		binding.root = root;
+		binding.args = args;
+	}
+}
+
+const eventBindingsKey = Symbol('solariteEvents');
+
+/**
+ * Get the EventBinding registered for a node+key, or undefined.
+ * Lets a component invoke its own two-way binding (e.g. flush a bound value before
+ * dispatching a change event) without exposing the private storage Symbol.
+ * @param node {Node}
+ * @param key {string}
+ * @return {EventBinding|undefined} */
+export function getEventBinding(node, key) {
+	let b = node[eventBindingsKey];
+	if (b === undefined)
+		return undefined;
+	return b instanceof EventBinding ? (b.key === key ? b : undefined) : b[key];
+}
+
+/**
+ * Attach a new EventBinding either directly or through the root component's delegated
+ * dispatcher.  The dispatcher lives on the root element (not the document) so a component
+ * still receives delegated events while detached from the document, and events stay scoped
+ * to the component that rendered them. */
+function registerBinding(binding, node, eventName, capture, options, root) {
+	// Bubbling events are delegated by default: they skip addEventListener entirely, and one
+	// root-level dispatcher per event type finds bindings by walking up from the event target.
+	// eventDelegation:false opts out; an array delegates only the named events.  Capture
+	// bindings and non-bubbling events always stay direct.
+	let delegate = false;
+	if (capture === false) {
+		let opt = options?.eventDelegation ?? true;
+		if (opt !== false && delegatableEvents.has(eventName))
+			delegate = opt === true || opt.includes(eventName);
+	}
+
+	if (delegate) {
+		binding.delegated = true;
+		let types = root[delegatedTypesKey];
+		if (types === undefined)
+			types = root[delegatedTypesKey] = new Set();
+		if (!types.has(eventName)) {
+			types.add(eventName);
+			root.addEventListener(eventName, delegatedDispatcher);
+		}
+	}
+	else
+		node.addEventListener(eventName, binding, capture);
+}
+
+// Bubbling events that one root-level listener can dispatch.  Same set Solid.js delegates.
+const delegatableEvents = new Set(['beforeinput', 'click', 'contextmenu', 'dblclick', 'focusin', 'focusout',
+	'input', 'keydown', 'keyup', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup',
+	'pointerdown', 'pointermove', 'pointerout', 'pointerover', 'pointerup', 'touchend', 'touchmove', 'touchstart']);
+
+// Per-root-element Set of event types that already have a delegated dispatcher registered.
+const delegatedTypesKey = Symbol('solariteDelegatedTypes');
+
+// Marks an event the innermost root dispatcher has already walked, so an outer root's
+// listener (when components are nested) skips it instead of dispatching the bindings again.
+const delegatedDoneKey = Symbol('solariteDelegated');
+
+/**
+ * The per-root listener for each delegated event type.  The first (innermost) root the
+ * bubbling event reaches walks from the event target upward, invoking delegated
+ * EventBindings stored on the nodes along the way; outer roots then see the done-marker and
+ * skip.  Each binding carries its own root, so handlers in an outer component still run with
+ * the correct `this`.  event.currentTarget is patched to the node whose binding is running,
+ * and restored after.  stopPropagation() inside a handler ends the walk, mirroring native
+ * bubbling. */
+function delegatedDispatcher(ev) {
+	if (ev[delegatedDoneKey])
+		return;
+	ev[delegatedDoneKey] = true;
+	let type = ev.type;
+	let current = ev.target;
+	Object.defineProperty(ev, 'currentTarget', {configurable: true, get() { return current }});
+	while (current) {
+		let b = current[eventBindingsKey];
+		if (b !== undefined) {
+			let binding = b instanceof EventBinding ? b : b[type];
+			if (binding !== undefined && binding.delegated === true && binding.key === type) {
+				binding.handleEvent(ev);
+				if (ev.cancelBubble)
+					break;
+			}
+		}
+		current = current.parentNode;
+	}
+	delete ev.currentTarget; // Restore the native getter from the prototype.
+}
+
+class EventBinding {
+	constructor(root, node, key, args) {
+		this.root = root;
+		this.node = node;
+		this.key = key;
+
+		/** @type {Array} [func, ...args]; always at least [func]. */
+		this.args = args;
+	}
+
+	// Called by the browser via the addEventListener(name, object) form.
+	// Sets the "this" variable to be the current Solarite component.
+	// Quoted so the minifier's property mangling doesn't rename it, since the browser looks it up by name.
+	'handleEvent'(event) {
+		let a = this.args;
+		switch (a.length) {
+			case 1: return a[0].call(this.root, event, this.node);
+			case 2: return a[0].call(this.root, a[1], event, this.node);
+			case 3: return a[0].call(this.root, a[1], a[2], event, this.node);
+		}
+		return a[0].call(this.root, ...a.slice(1), event, this.node);
+	}
 }