Only polyfill ResizeObserver for UMD builds (#7208)

diff --git a/package-lock.json b/package-lock.json
index dcb717ade9a0b90c1142e865f3865c6db62a8670..149d078117f36e9ba7fcdfbca9559232c7c3bf8d 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -15505,6 +15505,15 @@
         "rollup-pluginutils": "^2.3.3"
       }
     },
+    "rollup-plugin-polyfill": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-polyfill/-/rollup-plugin-polyfill-3.0.0.tgz",
+      "integrity": "sha512-LfJ1OR/wJrJdNDVNrdhVm7CgENfaNoQlFYMaQ0vlQH3zO+BMVrBMWDX9k6HVcr9gHsKbthrkiBzWRfFU9fr0hQ==",
+      "dev": true,
+      "requires": {
+        "magic-string": "^0.25.3"
+      }
+    },
     "rollup-plugin-terser": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.2.0.tgz",

diff --git a/package.json b/package.json
index 684e82115287c2788aa5b29c5bf0ad7a37cf24a9..41b643be6502df9b645debf3e7617993361bd7c3 100644 (file)
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "rollup": "^1.31.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-cleanup": "^3.1.1",
+    "rollup-plugin-polyfill": "^3.0.0",
     "rollup-plugin-terser": "^5.2.0",
     "rollup-plugin-web-worker-loader": "^0.8.1",
     "typedoc": "^0.16.10",

diff --git a/rollup.config.js b/rollup.config.js
index 607221dc277575997f40ec9860ce0403af8aecab..a9d49a223c456dea883f13c3a49809f3b99a7b87 100644 (file)
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,6 +3,7 @@
 
 const babel = require('rollup-plugin-babel');
 const cleanup = require('rollup-plugin-cleanup');
+const polyfill = require('rollup-plugin-polyfill')
 const json = require('@rollup/plugin-json');
 const resolve = require('@rollup/plugin-node-resolve');
 const terser = require('rollup-plugin-terser').terser;
@@ -24,6 +25,7 @@ module.exports = [
        {
                input,
                plugins: [
+                       polyfill(['resize-observer-polyfill', './platform/platform.dom.js']),
                        json(),
                        resolve(),
                        babel(),
@@ -42,6 +44,7 @@ module.exports = [
        {
                input,
                plugins: [
+                       polyfill(['resize-observer-polyfill', './platform/platform.dom.js']),
                        json(),
                        resolve(),
                        babel(),

diff --git a/src/platform/platform.dom.js b/src/platform/platform.dom.js
index e0186ab072b11ad4cb4169c3ddc6ab4ef3f4a621..e721c0c2c1cf372fce506f43d78f6b43d728090e 100644 (file)
--- a/src/platform/platform.dom.js
+++ b/src/platform/platform.dom.js
@@ -5,7 +5,6 @@
 import helpers from '../helpers/index';
 import BasePlatform from './platform.base';
 import {_getParentNode} from '../helpers/helpers.dom';
-import ResizeObserver from 'resize-observer-polyfill';
 
 /**
  * @typedef { import("../core/core.controller").default } Chart
@@ -178,7 +177,6 @@ function throttled(fn, thisArg) {
  * Calling `fn` is limited to once per animation frame
  * @param {Element} element - The element to monitor
  * @param {function} fn - Callback function to call when resized
- * @return {ResizeObserver}
  */
 function watchForResize(element, fn) {
        const resize = throttled((width, height) => {
@@ -196,6 +194,7 @@ function watchForResize(element, fn) {
                }
        }, window);
 
+       // @ts-ignore until https://github.com/Microsoft/TypeScript/issues/28502 implemented
        const observer = new ResizeObserver(entries => {
                const entry = entries[0];
                resize(entry.contentRect.width, entry.contentRect.height);