-
Notifications
You must be signed in to change notification settings - Fork 20
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
App crashes when DOM is modified externally #28
Comments
First off, thanks for posting about Flavour! It is an incredible framework and I'm glad to hear about other people using it. Like you said, changing the DOM without Flavour's knowledge will cause it to get confused, like any framework that keeps its own model and updates the DOM from its internal model. That seems reasonable. I also agree that it would be helpful to have more documentation about what is OK (reading from the DOM is harmless) and what is problematic (removing DOM nodes is particularly problematic). After a lot of Flavour usage, I have come to get a feel for how to do things "the Flavour way", using binding and Flavour elements instead of heavy DOM manipulation. Please let us know what you have been doing where you feel DOM manipulation is necessary. I'd like to see if the same requirements can be met via Flavour features. Looking forward to hearing more... |
One other note, I proposed a small note in the Flavour documentation about this here: |
@ScraM-Team thanks a lot for your answer! The precise example of what happened to me, which caused the DOM to be modified, and that cannot be reproduced using "Flavour mechanisms" is pretty simple : I just inspected the DOM manually in DevTools, and copied some innertext that I wanted to save. The problem with it, is not that it would be bad end-user experience, since end-users are not supposed to go into DevTools. The problem is that other developers like me, using Flavour, might copy something from the DOM using DevTools, see the page crash, not think that it was due to them copying something from DevTools, and spending a lot of time trying to reproduce the bug, mistakenly thinking that they have done something wrong. So in my precise case, the goal is to avoid time lost of Flavour users. But in general, I think it would help to avoid a crash when possible. This might save things such as Chrome extensions, for example page translations. |
Disclaimers:
Summary
When modifying DOM externally, for example by inspecting Elements in Devtools, and then doing something that causes a parent
AbstractComponent
to bedestroy
ed, app crashes with this stack trace :My theory of what is happening
destroy()
is called, it callsdomNode.removeChild(...)
, which throws this errorTo fix it or not to fix it
This is linked to this issue.
It seems that React also has this problem: https://stackoverflow.com/a/49618472/2873507
I understand that fundamentally, DOM manipulation and using a framework such as React or Flavour are mutually exclusive.
However, it seems to me that this specific problem could be easily avoided, by checking whether element is null before calling
removeChild
.The benefits of this would be:
Steps to reproduce
setView
if
The text was updated successfully, but these errors were encountered: