Remove ResizeObserver Polyfill (#7844)

package.json

@@ -110,7 +110,6 @@
     "react-dom": "17.0.2",
     "react-focus-lock": "^2.5.0",
     "react-transition-group": "^4.4.1",
-    "resize-observer-polyfill": "^1.5.1",
     "rfc4648": "^1.4.0",
     "sanitize-html": "^2.3.2",
     "tar-js": "^0.3.0",

src/components/views/elements/PersistedElement.tsx

@@ -24,7 +24,6 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ActionPayload } from "../../../dispatcher/payloads";
-import { ResizeObserverPolyfill } from "../../../stores/UIStore";
 
 export const getPersistKey = (appId: string) => 'widget_' + appId;
 
@@ -81,7 +80,7 @@ export default class PersistedElement extends React.Component<IProps> {
     constructor(props: IProps) {
         super(props);
 
-        this.resizeObserver = new ResizeObserverPolyfill(this.repositionChild);
+        this.resizeObserver = new ResizeObserver(this.repositionChild);
         // Annoyingly, a resize observer is insufficient, since we also care
         // about when the element moves on the screen without changing its
         // dimensions. Doesn't look like there's a ResizeObserver equivalent

src/components/views/messages/CallEvent.tsx

@@ -27,7 +27,6 @@ import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { formatCallTime } from "../../../DateUtils";
 import Clock from "../audio_messages/Clock";
-import { ResizeObserverPolyfill } from "../../../stores/UIStore";
 
 const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
 
@@ -64,7 +63,7 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
 
-        this.resizeObserver = new ResizeObserverPolyfill(this.resizeObserverCallback);
+        this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
         this.wrapperElement.current && this.resizeObserver.observe(this.wrapperElement.current);
     }
 

src/stores/UIStore.ts

@@ -14,21 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import EventEmitter from "events"; // eslint-disable-line @typescript-eslint/no-var-requires
-import ResizeObserverEntry from 'resize-observer-polyfill/src/ResizeObserverEntry';
-
-// XXX: resize-observer-polyfill has types that now conflict with typescript's
-// own DOM types: https://github.com/que-etc/resize-observer-polyfill/issues/80
-// Using require here rather than import is a horrendous workaround. We should
-// be able to remove the polyfill once Safari 14 is released.
-export const ResizeObserverPolyfill = require('resize-observer-polyfill'); // eslint-disable-line @typescript-eslint/no-var-requires
+import EventEmitter from "events";
 
 export enum UI_EVENTS {
     Resize = "resize"
 }
 
-export type ResizeObserverCallbackFunction = (entries: ResizeObserverEntry[]) => void;
-
 export default class UIStore extends EventEmitter {
     private static _instance: UIStore = null;
 
@@ -48,7 +39,7 @@ export default class UIStore extends EventEmitter {
         // eslint-disable-next-line no-restricted-properties
         this.windowHeight = window.innerHeight;
 
-        this.resizeObserver = new ResizeObserverPolyfill(this.resizeObserverCallback);
+        this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
         this.resizeObserver.observe(document.body);
     }
 

test/setupTests.js

@@ -13,6 +13,14 @@ require('jest-fetch-mock').enableMocks();
 // polyfill until setImmediate use in client can be removed
 global.setImmediate = callback => setTimeout(callback, 0);
 
+// Stub ResizeObserver
+class ResizeObserver {
+    observe() {} // do nothing
+    unobserve() {} // do nothing
+    disconnect() {} // do nothing
+}
+window.ResizeObserver = ResizeObserver;
+
 // polyfilling TextEncoder as it is not available on JSDOM
 // view https://github.com/facebook/jest/issues/9983
 global.TextEncoder = TextEncoder;

yarn.lock

@@ -7663,11 +7663,6 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
-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==
-
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"