Use of deprecated mutation events in development mode

[Dario Piotrowicz]

Marko Version: 5.21.9

Details

When working on a Marko application in development mode, I saw both in chrome (v.105) and firefox (v.105) present warnings about the use of mutation events (firefox presents the warning just once whilst chrome presents if after every dom manipulation):

I am pretty sure this is caused by the following code:

marko/packages/marko/src/runtime/components/util/index-browser.js

Lines 162 to 167 in 955ea00

 exports.___startDOMManipulationWarning = function (host) { 
   host.addEventListener("DOMNodeRemoved", warnNodeRemoved); 
 }; 
 exports.___stopDOMManipulationWarning = function (host) { 
   host.removeEventListener("DOMNodeRemoved", warnNodeRemoved); 
 }; 

Mutations events are indeed deprecated and MDN also mentions that its use is not recommended. So an equivalent implementation using mutation observers should be applied instead.

Additional Info

Environment

• Browsers: Chrome 105 and Firefox 105
• Operating System: Ubuntu 20.04.2 LTS

Steps to Reproduce

• Create a new Marko app via: npx @marko/create
• Tweak the console verbosity if needed
• See the warning/s appear in the console as soon as the app bootstraps

[Dario Piotrowicz]

I put this as a bug, but I am not sure if it could be considered that or maybe a feature request?

Anyways, I am not too familiar of how Marko works but this on face value seems like a simple change to make, please let me know if you'd like me to have a crack at it 🙂

Unless this needs to be implemented using Mutation Events for some specific reason?

[Dylan Piercey]

@dario-piotrowicz this is something I'd like to see changed however there isn't a modern browser API that lets us achieve what we want. Essentially what we're trying to do is capture a stack trace of when comment marker DOM nodes (used internally by Marko) are removed from the DOM so that if that section is re-rendered we can point to where things went wrong. MutationObserver doesn't get fired early enough that we can capture the stack trace here.

One potential thing we could do is disable this in dev mode by default and print a generic error if you've done this and provide some opt in way to allow you to use these older API's to get more information about the error.

[Dario Piotrowicz]

Hey @DylanPiercey thanks for the quick reply, I see so it wasn't just forgotten, but it wasn't updated for a specific reason

Could you suggest a quick way to trigger such an issue so that I can see the stack traces we're talking about?

With that I could have a play around and see if I can get some ideas related to what you suggested 🙂

(PS: if nothing can be done here I would suggest at the very least to put a comment in or something so that people don't reopen an issue such as this one)

[Dylan Piercey]

Seems chrome no longer warns with this error so closing for now.