Replace old DetectElementResize script with ResizeObserver, fixes #1332 and #2743 #2750
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
junedchhipa
approved these changes
Nov 6, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
New Pull Request
Currently, ApexCharts uses a script that hasn't been updated since 2014 to detect element resizes, which adds two functions to the global scope, breaking module encapsulation (see #2743) and even causes errors when Apex Charts are used in Shadow DOM (see #1332).
We now have
ResizeObserverto react to element resizes which is faster and more robust, and is supported pretty much everywhere.In this PR I added a new utility module that exports two helper functions (
addResizeListener()andremoveResizeListener()) that follow the same API as the existing library used. I also added guidance for people who need to support IE11, pointing to the most popular polyfill.Fixes #1332
Fixes #2743
As a heads up, I could not get the tests in this repo to work prior to making this change. Just running
npm installand thennpm buildandnpm testin a fresh clone resulted in the entire testsuite failing. I see they seem to be passing in CI, so not sure what's up with that. If something additional is needed to get the testsuite working, it may be good to mention it inCONTRIBUTING.md. Therefore, it was hard to test for any regressions, but code seems to work when tested manually by browsing samples and e.g. changing the CSS for<body>so that the chart resizes.Type of change
Please delete options that are not relevant.
Checklist: