From 7a2c3e6a4b748a3e3b869aa6661da1574b8e6de5 Mon Sep 17 00:00:00 2001
From: Jan Andrle <andrle.jan@centrum.cz>
Date: Wed, 23 Aug 2023 20:15:30 +0200
Subject: [PATCH] :recycle: use eventsSink for n-binding

---
 README.md     | 14 ++++++--------
 test/index.js | 42 +++++++++++++++++++++---------------------
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 1575841..f784292 100644
--- a/README.md
+++ b/README.md
@@ -98,16 +98,14 @@ document.body.append(
 ```
 
 ## Events and dynamic parts
+*investigation*:
 ```js
-const output_dynamic= (function(){
-	const element= el("span", { style: { fontWeight: "bold" }, textContent: "" });
-	return {
-		element,
-		onchange: listen("change", event=> assign(element, { textContent: event.target.value }))
-	};
-})();
+const output_dynamic= eventsSink(store=> ({
+	element,
+	onchange: listen("change", event=> assign(store.element, { textContent: event.target.value }))
+}));
 document.body.append(
-	output_dynamic.element,
+	el("span", { style: { fontWeight: "bold" }, textContent: "" }, output_dynamic.target),
 	el("input", { type: "text" }, output_dynamic.onchange)
 );
 ```
diff --git a/test/index.js b/test/index.js
index 35acdb6..904ffad 100644
--- a/test/index.js
+++ b/test/index.js
@@ -22,36 +22,36 @@ function component({ value= "World" }= {}){
 		}
 	`;
 	
-	const output= (function(){
-		const element= el("strong", { textContent: value });
-		return {
-			element,
-			onchange: listen("change", function(event){
-				assign(element, { textContent: event.target.value });
-			})
-		}
-	})();
-	const input= (function(){
-		const element= el("input", { type: "text", value }, output.onchange);
-		return {
-			element,
-			onchange: listen("change", function(event){
-				assign(element, { value: event.detail });
-				dispatch("change")(element);
-			})
-		};
-	})();
+	const output= eventsSink(store=> ({
+		onchange: listen("change", function(event){
+			assign(store.element, { textContent: event.target.value });
+		})
+	}));
+	const input= eventsSink(store=> ({
+		onchange: listen("change", function(event){
+			assign(store.element, { value: event.detail });
+			dispatch("change")(input.element);
+		})
+	}));
 	return el("div", { className: name }, input.onchange).append(
 		el("p").append(
 			el("#text", { textContent: "Hello " }),
-			output.element,
+			el("strong", { textContent: value }, output.target),
 		),
 		el("label").append(
 			el("#text", { textContent: "Set name:" }),
-			input.element
+			el("input", { type: "text", value }, output.onchange, input.target)
 		)
 	)
 }
+function eventsSink(fn){
+	const store= {
+		element: null,
+		target: function(element){ store.element= element; },
+	};
+	Object.assign(store, fn(store));
+	return store;
+}
 function createStyle(){
 	const style= el("style");
 	return {