@torpor/view 1.1.0 → 1.1.1

package/dist/compile.cjs

@@ -2201,12 +2201,15 @@ function headElementSelector(node) {
 function buildElementAttributes$1(node, varName, status, b) {
 	let fragment = status.fragmentStack.at(-1)?.fragment;
 	if (!fragment) throw new Error("No fragment on stack");
-	for (let { name, value, reactive, fullyReactive, span } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && fullyReactive) {
-		if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b);
-		else if (name === "&value" || name === "&checked") buildBindAttribute(node, varName, name, value, status, b);
+	const combinedHandlers = combinedEventHandlers(node, status);
+	const consumedHandlers = new Set(Array.from(combinedHandlers.values(), (c) => c.index));
+	for (let [index, { name, value, reactive, fullyReactive, span }] of node.attributes.entries()) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && fullyReactive) {
+		if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b, combinedHandlers.get(index));
+		else if (name === "&value" || name === "&checked") buildBindAttribute(node, varName, name, value, status, b, combinedHandlers.get(index));
 		else if (name === "onmount") buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
-		else if (name.startsWith("on")) buildEventAttribute(varName, name, value, span, status, b);
-		else if (name.startsWith("transition")) buildTransitionAttribute(node, varName, name, value, status, b);
+		else if (name.startsWith("on")) {
+			if (!consumedHandlers.has(index)) buildEventAttribute(varName, name, value, span, status, b);
+		} else if (name.startsWith("transition")) buildTransitionAttribute(node, varName, name, value, status, b);
 		else if (name === "class") {
 			status.imports.add("t_class");
 			const params = [value];
@@ -2244,21 +2247,20 @@ function buildElementAttributes$1(node, varName, status, b) {
 		}
 	}
 }
-function buildBindGroupAttribute(node, varName, value, status, b) {
+function buildBindGroupAttribute(node, varName, value, status, b, combined) {
 	value = replaceForVarNames(value, status);
 	let eventName = "change";
 	let inputValue = node.attributes.find((a) => a.name === "value")?.value;
 	let set = `${value} == ${inputValue}`;
 	let propName = "checked";
 	buildRun("setBinding", `${`${varName}.${propName} = ${set}`};`, status, b);
-	status.imports.add("t_event");
-	b.append(`t_event(${varName}, "${eventName}", (e) => {
-			if (e.target.${propName}) ${value} = ${inputValue};
-		});`);
+	emitBindEvent(varName, eventName, `(e) => {
+				if (e.target.${propName}) ${value} = ${inputValue};
+			}`, `if (e.target.${propName}) ${value} = ${inputValue};`, combined, status, b);
 }
-function buildBindAttribute(node, varName, name, value, status, b) {
+function buildBindAttribute(node, varName, name, value, status, b, combined) {
 	value = replaceForVarNames(value, status);
-	let eventName = "input";
+	let eventName = bindEventName(node, name);
 	let defaultValue = "\"\"";
 	let inputValue = "e.target.value";
 	if (node.tagName === "input") {
@@ -2271,25 +2273,83 @@ function buildBindAttribute(node, varName, name, value, status, b) {
 			case "checkbox":
 				defaultValue = "false";
 				inputValue = "e.target.checked";
-				break;
-			case "radio":
-				eventName = "change";
-				inputValue = "e.target.value";
 		}
 	} else if (node.tagName === "select") {
-		eventName = "change";
 		if (node.attributes.find((a) => a.name === "multiple")) {
 			buildRun("setBinding", `Array.from(${varName}.options).forEach((opt) => opt.selected = Array.isArray(${value}) && ${value}.includes(opt.value));`, status, b);
-			status.imports.add("t_event");
-			b.append(`t_event(${varName}, "change", (e) => ${value} = Array.from(e.target.selectedOptions).map((opt) => opt.value));`);
+			emitBindEvent(varName, eventName, `(e) => ${value} = Array.from(e.target.selectedOptions).map((opt) => opt.value)`, `${value} = Array.from(e.target.selectedOptions).map((opt) => opt.value);`, combined, status, b);
 			return;
 		}
 	}
 	let set = `${value} || ${defaultValue}`;
 	const propName = name.substring(1);
 	buildRun("setBinding", `${propName === "value" ? `${varName}.${propName} = String(${set})` : `${varName}.${propName} = ${set}`};`, status, b);
+	emitBindEvent(varName, eventName, `(e) => ${value} = ${inputValue}`, `${value} = ${inputValue};`, combined, status, b);
+}
+/**
+* Gets the name of the event that a &-binding attribute uses to write the
+* element's state back to the bound value
+*/
+function bindEventName(node, name) {
+	if (name === "&group") return "change";
+	if (node.tagName === "select") return "change";
+	if (node.tagName === "input") {
+		let typeAttribute = node.attributes.find((a) => a.name === "type");
+		if (typeAttribute?.value && trimQuotes(typeAttribute.value) === "radio") return "change";
+	}
+	return "input";
+}
+/**
+* Pairs &-binding attributes (&value, &checked, &group) with user `on<event>`
+* handler attributes listening to the same event. Both would emit their own
+* t_event call for the element, but the second registration would clobber
+* the first -- typically the binding's state write -- so the pair is emitted
+* as one t_event that calls the binding write and the user handler in source
+* order. Returns a map from binding attribute index to the combined handler.
+*/
+function combinedEventHandlers(node, status) {
+	const bindings = /* @__PURE__ */ new Map();
+	const handlers = /* @__PURE__ */ new Map();
+	for (let [index, { name, value, fullyReactive }] of node.attributes.entries()) {
+		if (value == null || !fullyReactive) continue;
+		if (name === "&value" || name === "&checked" || name === "&group") bindings.set(bindEventName(node, name), index);
+		else if (name.startsWith("on")) handlers.set(name.substring(2), index);
+	}
+	const combined = /* @__PURE__ */ new Map();
+	for (let [eventName, bindingIndex] of bindings) {
+		const handlerIndex = handlers.get(eventName);
+		if (handlerIndex === void 0) continue;
+		const handler = node.attributes[handlerIndex];
+		combined.set(bindingIndex, {
+			index: handlerIndex,
+			value: replaceForVarNames(handler.value, status),
+			span: handler.span,
+			first: handlerIndex < bindingIndex
+		});
+	}
+	return combined;
+}
+/**
+* Emits the t_event call for a &-binding, optionally combined with a user
+* `on<event>` handler for the same event (which is called after -- or, when
+* it appeared first in source, before -- the binding write)
+*/
+function emitBindEvent(varName, eventName, listener, body, combined, status, b) {
 	status.imports.add("t_event");
-	b.append(`t_event(${varName}, "${eventName}", (e) => ${value} = ${inputValue});`);
+	if (!combined) {
+		b.append(`t_event(${varName}, "${eventName}", ${listener});`);
+		return;
+	}
+	b.append(`t_event(${varName}, "${eventName}", (e) => {`);
+	const handlerCall = `((${combined.value}) as ((e: any) => any) | undefined)?.(e);`;
+	if (combined.first) {
+		addMappedText("", handlerCall, "", combined.span, status, b);
+		b.append(body);
+	} else {
+		b.append(body);
+		addMappedText("", handlerCall, "", combined.span, status, b);
+	}
+	b.append("});");
 }
 function buildEventAttribute(varName, name, value, span, status, b) {
 	value = replaceForVarNames(value, status);

package/dist/compile.mjs

@@ -2200,12 +2200,15 @@ function headElementSelector(node) {
 function buildElementAttributes$1(node, varName, status, b) {
 	let fragment = status.fragmentStack.at(-1)?.fragment;
 	if (!fragment) throw new Error("No fragment on stack");
-	for (let { name, value, reactive, fullyReactive, span } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && fullyReactive) {
-		if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b);
-		else if (name === "&value" || name === "&checked") buildBindAttribute(node, varName, name, value, status, b);
+	const combinedHandlers = combinedEventHandlers(node, status);
+	const consumedHandlers = new Set(Array.from(combinedHandlers.values(), (c) => c.index));
+	for (let [index, { name, value, reactive, fullyReactive, span }] of node.attributes.entries()) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && fullyReactive) {
+		if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b, combinedHandlers.get(index));
+		else if (name === "&value" || name === "&checked") buildBindAttribute(node, varName, name, value, status, b, combinedHandlers.get(index));
 		else if (name === "onmount") buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
-		else if (name.startsWith("on")) buildEventAttribute(varName, name, value, span, status, b);
-		else if (name.startsWith("transition")) buildTransitionAttribute(node, varName, name, value, status, b);
+		else if (name.startsWith("on")) {
+			if (!consumedHandlers.has(index)) buildEventAttribute(varName, name, value, span, status, b);
+		} else if (name.startsWith("transition")) buildTransitionAttribute(node, varName, name, value, status, b);
 		else if (name === "class") {
 			status.imports.add("t_class");
 			const params = [value];
@@ -2243,21 +2246,20 @@ function buildElementAttributes$1(node, varName, status, b) {
 		}
 	}
 }
-function buildBindGroupAttribute(node, varName, value, status, b) {
+function buildBindGroupAttribute(node, varName, value, status, b, combined) {
 	value = replaceForVarNames(value, status);
 	let eventName = "change";
 	let inputValue = node.attributes.find((a) => a.name === "value")?.value;
 	let set = `${value} == ${inputValue}`;
 	let propName = "checked";
 	buildRun("setBinding", `${`${varName}.${propName} = ${set}`};`, status, b);
-	status.imports.add("t_event");
-	b.append(`t_event(${varName}, "${eventName}", (e) => {
-			if (e.target.${propName}) ${value} = ${inputValue};
-		});`);
+	emitBindEvent(varName, eventName, `(e) => {
+				if (e.target.${propName}) ${value} = ${inputValue};
+			}`, `if (e.target.${propName}) ${value} = ${inputValue};`, combined, status, b);
 }
-function buildBindAttribute(node, varName, name, value, status, b) {
+function buildBindAttribute(node, varName, name, value, status, b, combined) {
 	value = replaceForVarNames(value, status);
-	let eventName = "input";
+	let eventName = bindEventName(node, name);
 	let defaultValue = "\"\"";
 	let inputValue = "e.target.value";
 	if (node.tagName === "input") {
@@ -2270,25 +2272,83 @@ function buildBindAttribute(node, varName, name, value, status, b) {
 			case "checkbox":
 				defaultValue = "false";
 				inputValue = "e.target.checked";
-				break;
-			case "radio":
-				eventName = "change";
-				inputValue = "e.target.value";
 		}
 	} else if (node.tagName === "select") {
-		eventName = "change";
 		if (node.attributes.find((a) => a.name === "multiple")) {
 			buildRun("setBinding", `Array.from(${varName}.options).forEach((opt) => opt.selected = Array.isArray(${value}) && ${value}.includes(opt.value));`, status, b);
-			status.imports.add("t_event");
-			b.append(`t_event(${varName}, "change", (e) => ${value} = Array.from(e.target.selectedOptions).map((opt) => opt.value));`);
+			emitBindEvent(varName, eventName, `(e) => ${value} = Array.from(e.target.selectedOptions).map((opt) => opt.value)`, `${value} = Array.from(e.target.selectedOptions).map((opt) => opt.value);`, combined, status, b);
 			return;
 		}
 	}
 	let set = `${value} || ${defaultValue}`;
 	const propName = name.substring(1);
 	buildRun("setBinding", `${propName === "value" ? `${varName}.${propName} = String(${set})` : `${varName}.${propName} = ${set}`};`, status, b);
+	emitBindEvent(varName, eventName, `(e) => ${value} = ${inputValue}`, `${value} = ${inputValue};`, combined, status, b);
+}
+/**
+* Gets the name of the event that a &-binding attribute uses to write the
+* element's state back to the bound value
+*/
+function bindEventName(node, name) {
+	if (name === "&group") return "change";
+	if (node.tagName === "select") return "change";
+	if (node.tagName === "input") {
+		let typeAttribute = node.attributes.find((a) => a.name === "type");
+		if (typeAttribute?.value && trimQuotes(typeAttribute.value) === "radio") return "change";
+	}
+	return "input";
+}
+/**
+* Pairs &-binding attributes (&value, &checked, &group) with user `on<event>`
+* handler attributes listening to the same event. Both would emit their own
+* t_event call for the element, but the second registration would clobber
+* the first -- typically the binding's state write -- so the pair is emitted
+* as one t_event that calls the binding write and the user handler in source
+* order. Returns a map from binding attribute index to the combined handler.
+*/
+function combinedEventHandlers(node, status) {
+	const bindings = /* @__PURE__ */ new Map();
+	const handlers = /* @__PURE__ */ new Map();
+	for (let [index, { name, value, fullyReactive }] of node.attributes.entries()) {
+		if (value == null || !fullyReactive) continue;
+		if (name === "&value" || name === "&checked" || name === "&group") bindings.set(bindEventName(node, name), index);
+		else if (name.startsWith("on")) handlers.set(name.substring(2), index);
+	}
+	const combined = /* @__PURE__ */ new Map();
+	for (let [eventName, bindingIndex] of bindings) {
+		const handlerIndex = handlers.get(eventName);
+		if (handlerIndex === void 0) continue;
+		const handler = node.attributes[handlerIndex];
+		combined.set(bindingIndex, {
+			index: handlerIndex,
+			value: replaceForVarNames(handler.value, status),
+			span: handler.span,
+			first: handlerIndex < bindingIndex
+		});
+	}
+	return combined;
+}
+/**
+* Emits the t_event call for a &-binding, optionally combined with a user
+* `on<event>` handler for the same event (which is called after -- or, when
+* it appeared first in source, before -- the binding write)
+*/
+function emitBindEvent(varName, eventName, listener, body, combined, status, b) {
 	status.imports.add("t_event");
-	b.append(`t_event(${varName}, "${eventName}", (e) => ${value} = ${inputValue});`);
+	if (!combined) {
+		b.append(`t_event(${varName}, "${eventName}", ${listener});`);
+		return;
+	}
+	b.append(`t_event(${varName}, "${eventName}", (e) => {`);
+	const handlerCall = `((${combined.value}) as ((e: any) => any) | undefined)?.(e);`;
+	if (combined.first) {
+		addMappedText("", handlerCall, "", combined.span, status, b);
+		b.append(body);
+	} else {
+		b.append(body);
+		addMappedText("", handlerCall, "", combined.span, status, b);
+	}
+	b.append("});");
 }
 function buildEventAttribute(varName, name, value, span, status, b) {
 	value = replaceForVarNames(value, status);