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 {