From ad318ac86f57dd6df095e349583d2b74a62a163b Mon Sep 17 00:00:00 2001 From: Larry Gregory Date: Tue, 5 Aug 2025 15:17:43 -0400 Subject: [PATCH] Remove resize-observer-polyfill (#230297) close https://github.com/elastic/kibana/issues/121509 This pull request removes the dependency on the `resize-observer-polyfill` package and replaces its TEST usage with a custom implementation of the `ResizeObserver` class. The changes simplify the codebase by eliminating the need for the polyfill and updating related test cases. ### Removal of `resize-observer-polyfill` dependency: * [`package.json`](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L1357): Removed the `resize-observer-polyfill` package from the dependencies. ### Replacement with custom `ResizeObserver` implementation: * [`src/platform/packages/shared/kbn-test/src/jest/setup/polyfills.jsdom.js`](diffhunk://#diff-d20f940201d6ffb3751d4696a2502f77aebcd9cbbb71c38e65ac2bc76516ed57L34-R45): Added a custom implementation of the `ResizeObserver` class to replace the polyfill. The custom class uses event listeners for `resize` events. ### Updates to test cases: * [`src/platform/plugins/shared/kibana_utils/public/resize_checker/resize_checker.test.ts`](diffhunk://#diff-0aa7cb2b3833f42456fdf78b791624b2a2a503115a5762f3b9fc60fe9ec3269dL13-L17): Removed the mock implementation of `resize-observer-polyfill` and its associated code, as it is no longer needed. [[1]](diffhunk://#diff-0aa7cb2b3833f42456fdf78b791624b2a2a503115a5762f3b9fc60fe9ec3269dL13-L17) [[2]](diffhunk://#diff-0aa7cb2b3833f42456fdf78b791624b2a2a503115a5762f3b9fc60fe9ec3269dL44-L53) ### Cleanup of polyfill usage in the main codebase: * [`src/platform/plugins/shared/kibana_utils/public/resize_checker/resize_checker.ts`](diffhunk://#diff-c28fee2aa7f94e97473c034328cdc2d9e951627be00cc5978332993133d0a899L12): Removed the import of `resize-observer-polyfill` from the `ResizeChecker` implementation. --------- Co-authored-by: Anton Dosov (cherry picked from commit 6bf697f308628b6c894896a94276b5f43cc8dd3d) --- package.json | 1 - .../kbn-test/src/jest/setup/polyfills.jsdom.js | 13 ++++++++++++- .../public/resize_checker/resize_checker.test.ts | 15 --------------- .../public/resize_checker/resize_checker.ts | 1 - yarn.lock | 2 +- 5 files changed, 13 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 0d703a0a28a46..bb51cb2e1ce65 100644 --- a/package.json +++ b/package.json @@ -1260,7 +1260,6 @@ "remark-stringify": "^8.0.3", "require-in-the-middle": "^7.4.0", "reselect": "^4.1.8", - "resize-observer-polyfill": "1.5.1", "rison-node": "1.0.2", "rxjs": "^7.8.2", "safe-squel": "^5.12.5", diff --git a/packages/kbn-test/src/jest/setup/polyfills.jsdom.js b/packages/kbn-test/src/jest/setup/polyfills.jsdom.js index 2546cc644f29b..e7c4cd7c24362 100644 --- a/packages/kbn-test/src/jest/setup/polyfills.jsdom.js +++ b/packages/kbn-test/src/jest/setup/polyfills.jsdom.js @@ -32,7 +32,18 @@ if (!Object.hasOwn(global, 'TextEncoder')) { global.Blob = require('blob-polyfill').Blob; if (!Object.hasOwn(global, 'ResizeObserver')) { - global.ResizeObserver = require('resize-observer-polyfill'); + global.ResizeObserver = class ResizeObserver { + constructor(callback) { + this.callback = callback; + } + observe(element) { + element.addEventListener('resize', this.callback); + } + unobserve(element) { + element.removeEventListener('resize', this.callback); + } + disconnect() {} + }; } if (!Object.hasOwn(global, 'Worker')) { diff --git a/src/plugins/kibana_utils/public/resize_checker/resize_checker.test.ts b/src/plugins/kibana_utils/public/resize_checker/resize_checker.test.ts index 1ead712dfd2f3..26ef717fdfad6 100644 --- a/src/plugins/kibana_utils/public/resize_checker/resize_checker.test.ts +++ b/src/plugins/kibana_utils/public/resize_checker/resize_checker.test.ts @@ -10,11 +10,6 @@ import { ResizeChecker } from './resize_checker'; import { EventEmitter } from 'events'; -// If you want to know why these mocks are created, -// please check: https://github.com/elastic/kibana/pull/44750 -jest.mock('resize-observer-polyfill'); -import ResizeObserver from 'resize-observer-polyfill'; - class MockElement { public clientWidth: number; public clientHeight: number; @@ -41,16 +36,6 @@ class MockElement { } } -(ResizeObserver as any).mockImplementation(function (this: any, callback: any) { - this.observe = function (el: MockElement) { - el.addEventListener('resize', callback); - }; - this.disconnect = function () {}; - this.unobserve = function (el: MockElement) { - el.removeEventListener('resize', callback); - }; -}); - describe('Resize Checker', () => { describe('events', () => { it('is an event emitter', () => { diff --git a/src/plugins/kibana_utils/public/resize_checker/resize_checker.ts b/src/plugins/kibana_utils/public/resize_checker/resize_checker.ts index 14aa9e33f28c1..d0e66cd80d231 100644 --- a/src/plugins/kibana_utils/public/resize_checker/resize_checker.ts +++ b/src/plugins/kibana_utils/public/resize_checker/resize_checker.ts @@ -9,7 +9,6 @@ import { EventEmitter } from 'events'; import { isEqual } from 'lodash'; -import ResizeObserver from 'resize-observer-polyfill'; function getSize(el: HTMLElement): [number, number] { return [el.clientWidth, el.clientHeight]; diff --git a/yarn.lock b/yarn.lock index e7bb4855c8287..1c9b9ad79bea1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -28955,7 +28955,7 @@ reselect@^4.0.0, reselect@^4.1.8: resolved "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz" integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ== -resize-observer-polyfill@1.5.1, resize-observer-polyfill@^1.5.1: +resize-observer-polyfill@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==