[Update] ui: format supports a dict k:v mapping

Author: sebastien

docs/ref-ui.md

@@ -521,7 +521,16 @@ If no handler is defined, `inout` uses the same default input behavior as `in`.
 
 ### Event Slots (`on:<event>`)
 
-Bind event handlers with explicit event types using `on:<event>="handlerName"`.
+`on:<event>` supports two modes:
+
+- handler mode: `on:<event>="handlerName"` (or `on:<event>` to default to the event type)
+- publish/effect mode: `on:<event>="effectExpr!EventName"`
+
+Effect expression forms:
+
+- `!EventName`: publish event only, payload defaults to current data
+- `path.to.value!EventName`: publish event with payload from data path
+- `path.to.value|processorA|processorB!EventName`: publish event with payload transformed by processors
 
 ```html
 <!-- Click event with "save" handler -->
@@ -530,6 +539,15 @@ Bind event handlers with explicit event types using `on:<event>="handlerName"`.
 <!-- Handler name defaults to event type if omitted -->
 <button on:click>Click me</button>
 
+<!-- Publish-only effect -->
+<button on:click="!Clicked">Click me</button>
+
+<!-- Publish payload from data path -->
+<button on:click="item.id!Select">Select</button>
+
+<!-- Publish payload with processors -->
+<button on:click="item.total|asCurrency!CheckoutTotal">Checkout</button>
+
 <!-- Form submit -->
 <form on:submit="handleSubmit">...</form>
 
@@ -545,6 +563,10 @@ Bind event handlers with explicit event types using `on:<event>="handlerName"`.
   click: (self, data, event) => {
     console.log("Clicked!");
   },
+  // Receives published events from effect mode
+  onCheckoutTotal: (self, data, evt) => {
+    console.log(evt.type, evt.data);
+  },
   highlight: (self, data, event) => {
     event.target.classList.add("highlighted");
   },

docs/ui.md

@@ -212,7 +212,7 @@ Dynamic("Badge", { label: "Ready" })
 - `out` with processors: `out="slot|Formatter|Formatter"` pipes the slot value through processors.
 - `in`: Binds a slot's input (e.g., value of an `<input>`) to instance data.
 - `inout`: Two-way binding between slot and instance data.
-- `on:<event>`: Binds a DOM event to an instance method or behavior handler.
+- `on:<event>`: Binds a DOM event to a handler (`on:click="save"`) or an effect publish expression (`on:click="item.id!Selected"`).
 - `when`: Conditional rendering with shorthand predicates, safe comparisons, and processors (non-eval).
 - `ref`: Provides a reference to the DOM node in the instance's `self.ref`.
 - `out:<attr>`: Binds a specific DOM attribute to a data value.
@@ -258,8 +258,22 @@ Registering processors:
 ```javascript
 ui.format("ClientItem", ClientItem)
 ui.format("asCurrency", (value) => `$${Number(value ?? 0).toFixed(2)}`)
+ui.format({
+	asPercent: (value) => `${Math.round(Number(value ?? 0) * 100)}%`,
+	asLabel: (value) => `${value ?? ""}`,
+})
 ```
 
+### `on:<event>` effects (`!Event`)
+
+Event bindings support handler mode and publish/effect mode:
+
+- `on:click="save"`: call behavior handler `save(self, data, event)`
+- `on:click`: same as `on:click="click"`
+- `on:click="!Clicked"`: publish `Clicked` with current component data as payload
+- `on:click="path.to.value!Selected"`: publish `Selected` with payload from data path
+- `on:click="path.to.value|processorA|processorB!Selected"`: same, after processors
+
 Using nested component-local processors:
 
 ```html

src/js/select/icons.js

@@ -146,7 +146,7 @@ function icon(
 	style = Object.assign({}, IconDefaults.style, source?.style, style);
 	const node = Object.entries({ width: size, height: size }).reduce(
 		(r, [k, v], i) => {
-			r.setAttribute(k, v instanceof Array ? v[i] : v);
+			r.setAttribute(k, Array.isArray(v) ? v[i] : v);
 			return r;
 		},
 		document.createElementNS(SVG, "svg"),
@@ -185,7 +185,9 @@ function icon(
 		// We support an inline mode, which is necessary for web components.
 		case "inline":
 			Object.assign(node.style, style);
-			classes.forEach((_) => node.classList.add(_));
+			classes.forEach((_) => {
+				node.classList.add(_);
+			});
 			icon.then((symbol) => {
 				if (!symbol) {
 					node.classList.add("missing");
@@ -209,7 +211,9 @@ function icon(
 			return node;
 		default: {
 			const use = document.createElementNS(SVG, "use");
-			use.classList.forEach((_) => node.classList.add(_));
+			use.classList.forEach((_) => {
+				node.classList.add(_);
+			});
 			Object.assign(node.style, style);
 			use.setAttribute("href", `#icon-${name}-${source}`);
 			node.appendChild(use);

src/js/select/ui/components.js

@@ -432,7 +432,19 @@ class UITemplateSlot {
 				for (const attr of node.attributes) {
 					if (attr.name.startsWith(prefix)) {
 						const eventType = attr.name.slice(prefix.length);
-						const handlerName = attr.value || eventType;
+						const parsed = TemplateParser.parseEventEffect(attr.value, eventType);
+						if (!parsed) {
+							log.warn("UITemplateSlot.FindEvent: invalid event effect, details", {
+								eventType,
+								effect: attr.value,
+							});
+							toRemove.push(attr.name);
+							continue;
+						}
+						const handlerName =
+							parsed.mode === "handler"
+								? parsed.handlerName || eventType
+								: `!${parsed.publishEvent}:${parsed.binding?.sourceKey || "data"}`;
 						toRemove.push(attr.name);
 
 						const slot = new UIEventTemplateSlot(
@@ -441,6 +453,9 @@ class UITemplateSlot {
 							UITemplateSlot.Path(node, parent, [i]),
 							eventType,
 							handlerName,
+							parsed.mode,
+							parsed.publishEvent,
+							parsed.binding,
 						);
 
 						if (!res[handlerName]) res[handlerName] = [];
@@ -715,14 +730,26 @@ class UIAttributeSlot {
 // - `eventType`: string - DOM event type (e.g., "click")
 // - `handlerName`: string - behavior method name to call
 class UIEventTemplateSlot {
-	constructor(node, parent, path, eventType, handlerName) {
+	constructor(
+		node,
+		parent,
+		path,
+		eventType,
+		handlerName,
+		mode = "handler",
+		publishEvent = null,
+		binding = null,
+	) {
 		this.node = node;
 		this.parent = parent;
 		this.path = path;
 		this.rootIndex = path[0];
 		this.tailPath = path.length > 1 ? path.slice(1) : null;
 		this.eventType = eventType;
 		this.handlerName = handlerName;
+		this.mode = mode;
+		this.publishEvent = publishEvent;
+		this.binding = binding;
 	}
 
 	resolve(nodes) {
@@ -747,6 +774,9 @@ class UIEventSlot {
 		this.parent = parent;
 		this.eventType = template.eventType;
 		this.handlerName = template.handlerName;
+		this.mode = template.mode;
+		this.publishEvent = template.publishEvent;
+		this.binding = template.binding;
 	}
 }
 // Class: UITemplate
@@ -1844,6 +1874,32 @@ class UIInstance {
 
 	// Binds event slot with explicit event type.
 	_bindEvent(name, target, handler = this.template.behavior?.[name]) {
+		if (target.mode === "publish" && target.publishEvent) {
+			const listener = (_event) => {
+				const data = this.data || {};
+				let payload = data;
+				if (target.binding?.sourceKey) {
+					payload = expand(resolveSourceValue(data, target.binding.sourceKey));
+					if (target.binding.processors?.length) {
+						payload = applyNamedProcessors(
+							this,
+							data,
+							payload,
+							target.binding.processors,
+							target.binding.sourceKey,
+						);
+					}
+				}
+				this.pub(target.publishEvent, payload);
+			};
+			target.node.addEventListener(target.eventType, listener);
+			this._domListeners.push({
+				node: target.node,
+				type: target.eventType,
+				handler: listener,
+			});
+			return;
+		}
 		if (handler) {
 			const listener = (event) => {
 				const result = handler(this, this.data || {}, event);

src/js/select/ui/html.js

@@ -252,6 +252,57 @@ class TemplateParser {
 		return { path, processors };
 	}
 
+	static parseEventEffect(expr, eventType = "") {
+		const source = typeof expr === "string" ? expr.trim() : "";
+		if (!source) {
+			return { mode: "handler", handlerName: eventType };
+		}
+		const separator = source.lastIndexOf("!");
+		if (separator === -1) {
+			return { mode: "handler", handlerName: source };
+		}
+		const publishEvent = source.slice(separator + 1).trim();
+		if (!publishEvent || /\s/.test(publishEvent)) {
+			return null;
+		}
+		const payloadExpr = source.slice(0, separator).trim();
+		if (!payloadExpr) {
+			return {
+				mode: "publish",
+				publishEvent,
+				binding: null,
+			};
+		}
+		const parts = payloadExpr.split("|");
+		for (let i = 0; i < parts.length; i++) {
+			parts[i] = parts[i].trim();
+			if (!parts[i]) {
+				return null;
+			}
+		}
+		const path = TemplateParser.parseTemplatePath(parts[0]);
+		if (!path) {
+			return null;
+		}
+		const processors = parts.length > 1 ? parts.slice(1) : [];
+		for (let i = 0; i < processors.length; i++) {
+			if (/\s/.test(processors[i])) {
+				return null;
+			}
+		}
+		const sourceKey =
+			path[0] === "."
+				? path.length === 1
+					? "."
+					: `.${path.slice(1).join(".")}`
+				: path.join(".");
+		return {
+			mode: "publish",
+			publishEvent,
+			binding: { sourceKey, processors },
+		};
+	}
+
 	static parseOutAttributeBinding(expr) {
 		const source = typeof expr === "string" ? expr : "";
 		if (!source) {

src/js/select/ui/index.js

@@ -343,6 +343,12 @@ function remap(value, f) {
 };
 
 function format(name, formatter) {
+	if (name && typeof name === "object" && !Array.isArray(name)) {
+		for (const key in name) {
+			format(key, name[key]);
+		}
+		return ui;
+	}
 	if (typeof name !== "string" || !name.trim()) {
 		log.error("ui.formats: invalid formatter name, details", {
 			name,