-
Notifications
You must be signed in to change notification settings - Fork 784
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
HMR doesn't call componentDidUnload lifecycle hook #1316
Comments
I have a similar issue with https://github.com/mikaelkaron/stencil-apexcharts/blob/master/src/components/apex-chart/apex-chart.tsx and with some help I’ve resorted to marking |
This is still an issue I'm seeing on |
Had the same issue and tested with a @Element() el: HTMLSpectatorInteractionElement;
componentDidLoad(){
// Retrieve IntervalHandle
const intervalHandle = setInterval( ()=>{console.log("Ping")} , 1000)
// Create MO with callback
const observer = new MutationObserver((m,o)=>{
console.log("Mutation!",m,o);
// Remove Interval
clearInterval(IntervalHandle);
observer.disconnect();
});
// Set subject/target to this component native element
observer.observe(this.el, { attributes: true, childList: false, subtree: false });
}
|
Not a deep dive, but looking at the source, should export const hmrStart = (elm: d.HostElement, cmpMeta: d.ComponentRuntimeMeta, hmrVersionId: string) => {
// ¯\_(ツ)_/¯
const hostRef = getHostRef(elm);
+ // call disconnectedCallback(elm); here?
+ disconnectedCallback(elm);
// reset state flags to only have been connected
hostRef.$flags$ = HOST_FLAGS.hasConnected;
// TODO
// detatch any event listeners that may have been added
// because we're not passing an exact event name it'll
// remove all of this element's event, which is good
// create a callback for when this component finishes hmr
elm['s-hmr-load'] = () => {
// finished hmr for this element
delete elm['s-hmr-load'];
hmrFinish(elm, cmpMeta);
};
// re-initialize the component
initializeComponent(elm, hostRef, cmpMeta, hmrVersionId);
}; |
The documentation is unclear as to whether it should be It sounds like it should be the former. |
Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now. We do not support Stencil versions less than v2, and you seem to be using an older version of Stencil. Let me know if you need anything else! |
Stencil version:
I'm submitting a:
[x] bug report
[ ] feature request
[ ] support request
Current behavior:
I use
this.interval = setInterval(...)
in thecomponentWillLoad
hook, andclearInterval(this.interval)
in thecomponentWillUnload
hook. When that component gets replaced by HMR, I have two intervals running, because apparently thecomponentWillLoad
hook gets executed again, but thecomponentDidUnload
hook doesn't.Expected behavior:
When a component gets replaced by HMR, it should probably call the
componentWillUnload
hook of the old component instance that gets replaced? Not sure whether that introduces issues with keeping the component state, but imo it shouldn't.Related code:
I wrote this example component to showcase it:
Steps to reproduce:
name: undefined
along with the log of the second interval, because the first interval has not been cleared (thecomponentWillUnload
hook wasn't executed)The text was updated successfully, but these errors were encountered: