Mount/Dismount
Closed this issue · 15 comments
You mention mount and dismount. How would you take advantage of these? An example would be appreciated. Looking at the source code, it looks like mount also fires when a node is updated. Is that correct? Otherwise, how would you suggest checking for when a component is updated?
Hey, good question.
The best way to work with 'mount' and 'dismount' events is to use event delegation. There are many of these libraries out there (even jquery supports event delegation). Here is an example using this one:
import delegate from 'delegate'
delegate('#my-component-d', 'mount', (e) => {
// Element is at e.delegateTarget
})
delegate('#my-component-d', 'dismount', (e) => {
// Element is at e.delegateTarget
})For performance reasons set-dom does not trigger update events. Instead mount events are triggered the first time an element is 'set' and after an element is added to the dome via set-dom's algorithm. Dismount events are only triggered before removing an element from the dom.
Another thing (again for performance reasons) is these particular events will only fire if the element has a data-key or id attribute to prevent huge amounts of events.
Does that make sense?
As far as checking for an updated component goes, you could just do your changes after every time your component is invoked, but it depends on your actual use case. Mind showing me an example?
@rbiggs: Also are you using Rill? If so I can show you how I achieve this.
Oh, doh! 🤦♂️ I was expecting there to be a way to attach the event directly to the element, sort of like onclick. I was able to use addEventListener, but of course that wouldn't catch the first mount.
So, I'm still curious about catching when a node gets patched/updated. Does mount cover that as well? If, not, how would you approach that?
Do you mind providing me with an example of what you are trying to do and why? Typically I handle updates in my render functions or better yet have stateless ui.
I actually wasn't trying to accomplish anything. I just wanted to see how to capture lifecycle events. I already trashed what I was working on the other day. Sorry. Limme see if I can recreate what I had, tomorrow ;-)
I'll do a Copepen, Requirebin, or something.
Okay sounds good - id be happy to help regardless :).
Hmmm... I tried setting up something using zenorocha/delegate, but I couldn't get anything to happen. Could you put together a gist of how this works?
Hey here is a pen with the example https://codepen.io/dylanpiercey/pen/BWwROp.
Two things to note:
- zenorocha/delegate does not use capture by default so I had to pass true (also it expects a root element which is kinda lame).
- setDOM will only emit mount and dismount's on keyed (or id'd) nodes as mentioned before.
Sorry for taking a while to reply to this.
Gonna close the issue for now but please feel free to come back with more questions if you need more help :).
Funny. I see the mount alert in your pen, but nothing appears to mount. Your code looks like it should append <b>Hello world!</b> but it doesn't. Is that because the root div is empty?
@rbiggs I don't know how I missed this but you are right, it is not working. The issue looks like it's a regression with 7.0.0 (specifically regarding text nodes and the empty white space in the example I provided). Currently releasing 7.0.1 with a patch and more tests which should resolve the issue.
Yay! I thought I did something wrong. By the way, doh! I was expecting that i could register event listeners on nodes being mounted. Now it's clear 🤦♂️
@rbiggs glad it's working for you now :). let me know if you need any more help.
Is there any way to capture an update based on id or checksum? same like mount and dismount.
Currently that is left out of the api for performance reasons. Typically when I need to handle change events I will handle them in my render functions. Do you mind posting and example of what you are trying to do an perhaps I can help?