Events exposion via `.share`?

[jaandrle]

https://developer.mozilla.org/en-US/docs/Web/API/EventListener

Current

testA({ onclick: console.log }).mount(somewhere);
function testA({ onclick: onclickPublic }){
    const onclick= function(ev){ onclickPublic.call(this, ev); console.log("Multiple+internal"); };
    return $dom.component("P", { textContent: "test", onclick }).share;
}
testB({ onclick: console.log }).mount(somewhere);
function testB({ onclick }){
    return $dom.component("P", { textContent: "test" })
    .oninit(el=> el.addEventListener("click", onclick))
    .oninit(el=> el.addEventListener("click", console.log.bind(null, "Multiple+internal")))
    .share;
}
testC({ onclick: console.log }).mount(somewhere);
function testC({ onclick }){
    const c= $dom.component("P", { textContent: "test" });
    const el= c.getReference();
    el.addEventListener("click", onclick);
    el.addEventListener("click", console.log.bind(null, "Multiple+internal"));
    return c.share;
}

New?

const log_click= $dom.componentListener("click", console.log);


testD({ listeners: [ log_click ] }).mount(somewhere);
function testD({ listeners }){
    return $dom.component("P", { textContent: "test" })
    .on(...listeners)//?
    .share;
}


const c= testE({ listeners: [ log_click ] });
c.addEventListener("public_name", console.log);
c.addEventListener("public_name", function(ev){ //???
    this.update(({ counter })=> ({ counter: counter+1 }));
});
c.mount(somewhere);

function testE(){
    return $dom.component("P")
    .onevent("click", "public_name" /*, ...args */)//?
    .onupdate({ counter: 1 }, ({ counter })=> ({ textContent: `Test ${counter}.` })) //???
    .share;
}

[jaandrle]

Not exactly "solved". Now, it is possible to use:

//…
// OLD
const update_textBasedOnState= $dom.componentListener(
    "update",
    { state: "old_state" },
    ({ state })=> ({ textContent: state })
);
// NEW
const click_changeState= $dom.componentListener(
    "click",
    function(event){
        this.update({ state: "new_state" });
        //this.getRefernce() =>this element
        //this.removeEventListener() => remove this EventListener
    },
    { passive: true, once: true }
);
//…
    add("SPAN").on(click_changeState, update_textBasedOnState);
//…