tagu-tagu 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tagu-tagu",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"description": "A lightweight helper for vanilla `HTMLElement`, with reactivity.",
 	"keywords": [
 		"vanilla",

package/src/Modify.ts

@@ -11,6 +11,7 @@ type EventListenerType<
 type EventListenerRecord<TEventType2Event> = {
 	[TEventType in keyof TEventType2Event]?:
 		| EventListenerType<TEventType2Event, TEventType>
+		| Binding
 		| {
 				listener: EventListenerType<TEventType2Event, TEventType>;
 				options: boolean | AddEventListenerOptions;
@@ -170,6 +171,13 @@ function initializeEventListeners<TEventType2Event>(
 		if (!listener) continue;
 		if (typeof listener === "function") {
 			element.addEventListener(eventName, listener as EventListener);
+		} else if (listener instanceof Binding) {
+			waitForData(element, {
+				[listener.key]: (data) => {
+					const func = listener.map(data);
+					element.addEventListener(eventName, func);
+				},
+			});
 		} else {
 			element.addEventListener(
 				eventName,

package/src/data/useBinding.ts

@@ -1,10 +1,15 @@
-export function useBinding<T>(key: string, map: (value: T) => string) {
+export function useBinding<T>(key: string): Binding<T, T>;
+export function useBinding<T, TResult>(
+	key: string,
+	map: (value: T) => TResult,
+): Binding<T, TResult>;
+export function useBinding<T>(key: string, map = (value: T) => value) {
 	return new Binding(key, map);
 }
 
-export class Binding<T = any> {
+export class Binding<T = any, TResult = any> {
 	constructor(
 		public key: string,
-		public map: (value: T) => string,
+		public map: (value: T) => TResult,
 	) {}
 }