diff --git a/package.json b/package.json index 05196d016a..f3172be356 100644 --- a/package.json +++ b/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", diff --git a/src/components/views/elements/PersistedElement.tsx b/src/components/views/elements/PersistedElement.tsx index b5fb8df34e..97a197d2bf 100644 --- a/src/components/views/elements/PersistedElement.tsx +++ b/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 { 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 diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index 8a919eee82..a46f010617 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/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 { 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); } diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts index a9747852a1..21faf44818 100644 --- a/src/stores/UIStore.ts +++ b/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); } diff --git a/test/setupTests.js b/test/setupTests.js index fec7e514ab..3ed4e8c390 100644 --- a/test/setupTests.js +++ b/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; diff --git a/yarn.lock b/yarn.lock index 51ea173f58..1de8453fa4 100644 --- a/yarn.lock +++ b/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"