railsjazz / peity_vanilla

Vanila JS Sparklines library inspired by peity.js
https://www.railsjazz.com/
MIT License
69 stars 1 forks source link

Deprecation Warning for DOMSubtreeModified #4

Open 500Foods opened 1 year ago

500Foods commented 1 year ago

peity-vanilla.min.js:6 [Deprecation] Listener added for a synchronous 'DOMSubtreeModified' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

mathieugalle commented 3 months ago

Hi,

This morning, peity broke on a user's desktop because Chrome removed DOMSubtreeModified support.

Here is a quick fix in peity-vanilla.js : you replace the mount and unmount functions by :

        mount() {
            if (!svgSupported) return;
            this.observer = new MutationObserver(this.draw.bind(this));
            const config = { attributes: true, childList: true, subtree: true };
            this.observer.observe(this.element, config);
            this.draw();
            this.mounted = true;
        }

        unmount() {
            if (this.observer) {
                this.observer.disconnect();
            }

            this.svg.remove();
            this.mounted = false;
        }

It looks like support for MutationObserver is 98%

I'm not sure yet of all the consequences of this change, but it works on my Chrome, Firefox and Edge, give it a try if you have the same problem.

mathieugalle commented 2 months ago

pull request here #5