Question about components (not web components)
FbN opened this issue · comments
I have recently been approaching the lib coming from vdom based libs.
I see I can simply declare components like
const li = v => html`<li class="test">${v}</li>`
const ul = list => html`<ul class="test">${list.map(li)}</ul>`Is there a way to attache an event listerner to a component (the result of the function) and be able intercept only events from that component?
Try to explain the API I would like to obtain
const isolate = component => {
//...
return {
component: ...,
on: selector => event => callback => {
// .... return unsubsribe
}
}
}
const LI = v => html`<li class="test">${v}</li>`
const UL = list => html`<ul class="test"><li>ADD</li>${list.map(isolate(LI))}</ul>`
const {ul, on} = isolate(UL)
on('li')('click')(console.log)Then the delegate (on the UL? and if I have other siblings?) would act on events on the first
Any suggestion on how to obtain something similar? I think I can hack the template strings and add ref="" to root elements to react to element creations and mark root elements of components in some way. Or there are better solutions?
if you come from vdom ... maybe you come from P/React and/or hooks? In that case, have you checked uland ?
Thank you for the quick reply. I Looked at uland but I dont want to use on* events directly as attribute on elements. With ref= is possible to know when an element is created and attached to DOM. Is there a way to know when an element is removed from the DOM? If yes I think I can build the API as above
how did you hook into elements lifecycle before? nothing really different here ... but curious to know ... anyway, MutationObserver is there to help out with connected/disconnected things, but it requires your own integration here
I see ... well, I have an alternative here: https://github.com/WebReflection/lighterhtml-plus#lighterhtml-plus
maybe one day I'll have the same in uhtml too ... the thing is, when those events matter, I usually go for Custom Elements right away, either builtin extend or regular
I realized that ref=${callback} the callback is called with the element but befor it is attached to the DOM (when it's still resident on the document fragment). So I cannot access the node parent using ref=. Is it the desired behaviour?
Yes, because none of the things you are doing are documented as such for ref ... connected and disconnected are a different beast, but you can use ref to hook your node into that loop, still I don't know why you need it so desperately
I want to attach a event listener to the parent of an html<><><><> result to capture events coming from the generated node in a programmatic way (to construct isolated components). This without any explict attribute wrote directly on html code or visible custom elements.
Something like
html`<div >${onButtonClick(callback)(html`<button /><button /><button />`)}</div>`you can do that via <div onclick=${callback}> ... not sure why you are trying to avoid what's uhtml all about 🤔
or use custom elements instead, so you have all connected/disconnected you
then I believe custom elements are the primitive you're looking for ... see uce, ube, or p-cool elements