Replace old DetectElementResize script with ResizeObserver, fixes #1332 and #2743

README.md

@@ -186,6 +186,7 @@ If you need to make it work with IE11, you need to include these polyfills befor
 
 - [promise-polyfill](https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js)
 - [classlist.js](https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill)
+- [ResizeObserver polyfill](https://cdn.jsdelivr.net/npm/@juggle/resize-observer)
 - [findIndex](https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn) - You will need this only if you require timeline/rangebar charts
 - [canvg](https://unpkg.com/canvg@3.0.4/lib/umd.js) - You will need this only if you require PNG download of your charts
 

src/apexcharts.js

@@ -12,6 +12,7 @@ import XAxis from './modules/axes/XAxis'
 import YAxis from './modules/axes/YAxis'
 import InitCtxVariables from './modules/helpers/InitCtxVariables'
 import Destroy from './modules/helpers/Destroy'
+import { addResizeListener, removeResizeListener } from './utils/Resize'
 
 /**
  *
@@ -69,7 +70,7 @@ export default class ApexCharts {
 
         this.events.fireEvent('beforeMount', [this, this.w])
         window.addEventListener('resize', this.windowResizeHandler)
-        window.addResizeListener(this.el.parentNode, this.parentResizeHandler)
+        addResizeListener(this.el.parentNode, this.parentResizeHandler)
 
         let graphData = this.create(this.w.config.series, {})
         if (!graphData) return resolve(this)
@@ -347,7 +348,7 @@ export default class ApexCharts {
   destroy() {
     window.removeEventListener('resize', this.windowResizeHandler)
 
-    window.removeResizeListener(this.el.parentNode, this.parentResizeHandler)
+    removeResizeListener(this.el.parentNode, this.parentResizeHandler)
     // remove the chart's instance from the global Apex._chartInstances
     const chartID = this.w.config.chart.id
     if (chartID) {

src/modules/helpers/InitCtxVariables.js

@@ -31,7 +31,6 @@ import 'svg.select.js'
 import 'svg.resize.js'
 
 import '../../assets/apexcharts.css'
-import '../../utils/DetectElementResize'
 
 // global Apex object which user can use to override chart's defaults globally
 if (typeof window.Apex === 'undefined') {

src/utils/Resize.js

@@ -0,0 +1,35 @@
+// Helpers to react to element resizes, regardless of what caused them
+// TODO Currently this creates a new ResizeObserver every time we want to observe an element for resizes
+// Ideally, we should be able to use a single observer for all elements
+let ros = new WeakMap() // Map callbacks to ResizeObserver instances for easy removal
+
+export function addResizeListener(el, fn) {
+  let called = false
+
+  let ro = new ResizeObserver((r) => {
+    // ROs fire immediately after being created,
+    // per spec: https://drafts.csswg.org/resize-observer/#ref-for-element%E2%91%A3
+    // we don't want that so we just discard the first run
+    if (called) {
+      fn.call(el, r)
+    }
+    called = true
+  })
+
+  if (el.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+    // Document fragment, observe children instead (needed for Shadow DOM, see #1332)
+    Array.from(el.children).forEach((c) => ro.observe(c))
+  } else {
+    ro.observe(el)
+  }
+
+  ros.set(fn, ro)
+}
+
+export function removeResizeListener(el, fn) {
+  let ro = ros.get(fn)
+  if (ro) {
+    ro.disconnect()
+    ros.delete(fn)
+  }
+}