feat(typescript): bump typescript version to v4.2.3

This _might_ be a breaking change for typescript consumers since they might also need to update their typescript version to v4.2.3 or whatever version added the type definitions for `ResizeObserver`. This also changed the `resize-observer-polyfill` dependency to `@juggle/resize-observer` since `resize-observer-polyfill` hasn't been updated since 2018 and the type definitions cause issues with the `lib.d.ts` definitions now provided for the `ResizeObserver`.
mlaursen · Apr 14, 2021 · b094b36 · b094b36
1 parent c758982
commit b094b36
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 25 deletions.
diff --git a/packages/form/src/text-field/__tests__/TextArea.tsx b/packages/form/src/text-field/__tests__/TextArea.tsx
@@ -3,13 +3,13 @@
 import React, { ReactElement, useState } from "react";
 import { act, fireEvent, render } from "@testing-library/react";
 import { mocked } from "ts-jest/utils";
-import ResizeObserverPolyfill from "resize-observer-polyfill";
+import { ResizeObserver } from "@juggle/resize-observer";
 
 import { TextArea } from "../TextArea";
 
-jest.mock("resize-observer-polyfill");
+jest.mock("@juggle/resize-observer");
 
-const ResizeObserverMock = mocked(ResizeObserverPolyfill);
+const ResizeObserverMock = mocked(ResizeObserver);
 const DEFAULT_DOM_RECT: DOMRectReadOnly = {
   x: 0,
   y: 0,
@@ -57,7 +57,12 @@ class MockedObserver implements ResizeObserver {
 
     act(() => {
       this._callback(
-        this._elements.map((target) => ({ target, contentRect })),
+        this._elements.map((target) => ({
+          target,
+          contentRect,
+          borderBoxSize: [],
+          contentBoxSize: [],
+        })),
         this
       );
     });
@@ -68,6 +73,7 @@ describe("TextArea", () => {
   let observer: MockedObserver | undefined;
   beforeAll(() => {
     ResizeObserverMock.mockImplementation((callback) => {
+      // @ts-ignore
       observer = new MockedObserver(callback);
       return observer;
     });

diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -40,8 +40,8 @@
     "access": "public"
   },
   "dependencies": {
-    "classnames": "^2.3.1",
-    "resize-observer-polyfill": "^1.5.1"
+    "@juggle/resize-observer": "^3.3.0",
+    "classnames": "^2.3.1"
   },
   "devDependencies": {
     "react": "^17.0.2",

diff --git a/packages/utils/src/layout/__tests__/GridList.tsx b/packages/utils/src/layout/__tests__/GridList.tsx
@@ -1,15 +1,15 @@
 /* eslint-disable no-underscore-dangle */
 import React from "react";
 import { act, render } from "@testing-library/react";
-import ResizeObserverPolyfill from "resize-observer-polyfill";
+import { ResizeObserver } from "@juggle/resize-observer";
 import { mocked } from "ts-jest/utils";
 
 import { GridList } from "../GridList";
 import { useGridListSize } from "../useGridList";
 
-jest.mock("resize-observer-polyfill");
+jest.mock("@juggle/resize-observer");
 
-const ResizeObserverMock = mocked(ResizeObserverPolyfill);
+const ResizeObserverMock = mocked(ResizeObserver);
 
 const DEFAULT_DOM_RECT: DOMRectReadOnly = {
   x: 100,
@@ -53,7 +53,12 @@ class MockedObserver implements ResizeObserver {
 
     act(() => {
       this._callback(
-        this._elements.map((target) => ({ target, contentRect })),
+        this._elements.map((target) => ({
+          target,
+          contentRect,
+          borderBoxSize: [],
+          contentBoxSize: [],
+        })),
         this
       );
     });
@@ -64,6 +69,7 @@ let observer: MockedObserver | undefined;
 let getBoundingClientRect: jest.SpyInstance<DOMRect, []>;
 beforeAll(() => {
   ResizeObserverMock.mockImplementation((callback) => {
+    // @ts-ignore
     observer = new MockedObserver(callback);
     return observer;
   });

diff --git a/packages/utils/src/sizing/__tests__/useResizeObserver.tsx b/packages/utils/src/sizing/__tests__/useResizeObserver.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import React, { useRef } from "react";
 import { act, render } from "@testing-library/react";
-import ResizeObserverPolyfill from "resize-observer-polyfill";
+import { ResizeObserver } from "@juggle/resize-observer";
 import { mocked } from "ts-jest/utils";
 
 import {
@@ -10,9 +10,9 @@ import {
   useResizeObserver,
 } from "../useResizeObserver";
 
-jest.mock("resize-observer-polyfill");
+jest.mock("@juggle/resize-observer");
 
-const ResizeObserverMock = mocked(ResizeObserverPolyfill);
+const ResizeObserverMock = mocked(ResizeObserver);
 const observe = jest.fn();
 const unobserve = jest.fn();
 const disconnect = jest.fn();
@@ -62,7 +62,12 @@ class MockedObserver implements ResizeObserver {
 
     act(() => {
       this._callback(
-        this._elements.map((target) => ({ target, contentRect })),
+        this._elements.map((target) => ({
+          target,
+          contentRect,
+          borderBoxSize: [],
+          contentBoxSize: [],
+        })),
         this
       );
     });
@@ -78,7 +83,10 @@ class MockedObserver implements ResizeObserver {
         throw new Error("Unable to find triggerable element");
       }
 
-      this._callback([{ target, contentRect }], this);
+      this._callback(
+        [{ target, contentRect, borderBoxSize: [], contentBoxSize: [] }],
+        this
+      );
     });
   }
 }
@@ -87,6 +95,7 @@ describe("useResizeObserver", () => {
   let observer: MockedObserver | undefined;
   beforeAll(() => {
     ResizeObserverMock.mockImplementation((callback) => {
+      // @ts-ignore
       observer = new MockedObserver(callback);
       return observer;
     });

diff --git a/packages/utils/src/sizing/useResizeObserver.ts b/packages/utils/src/sizing/useResizeObserver.ts
@@ -1,5 +1,5 @@
 import { Ref } from "react";
-import ResizeObserverPolyfill from "resize-observer-polyfill";
+import { ResizeObserver } from "@juggle/resize-observer";
 
 import { EnsuredRefs, useEnsuredRef } from "../useEnsuredRef";
 import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect";
@@ -123,7 +123,7 @@ function isWidthChange(
  * @see https://github.com/WICG/resize-observer/issues/59
  * @internal
  */
-let sharedObserver: ResizeObserverPolyfill | undefined;
+let sharedObserver: ResizeObserver | undefined;
 
 /**
  *
@@ -142,7 +142,7 @@ function init(): void {
     return;
   }
 
-  sharedObserver = new ResizeObserverPolyfill((entries) => {
+  sharedObserver = new ResizeObserver((entries) => {
     // Note: might need to wait until an requestAnimationFrame has completed to
     // fix the resize observer loop exceeded error if switching to
     // `useIsomorphicLayoutEffect` and a shared observer didn't fix that error:

diff --git a/packages/utils/src/sizing/useResizeObserverV1.ts b/packages/utils/src/sizing/useResizeObserverV1.ts
@@ -1,5 +1,5 @@
 import { MutableRefObject, useEffect } from "react";
-import ResizeObserverPolyfill from "resize-observer-polyfill";
+import { ResizeObserver } from "@juggle/resize-observer";
 
 /**
  * A function that will return the resize observer target element. This should
@@ -201,7 +201,7 @@ export function useResizeObserverV1<E extends HTMLElement>({
     }
 
     let prevSize: ElementSize | undefined;
-    const observer = new ResizeObserverPolyfill((entries) => {
+    const observer = new ResizeObserver((entries) => {
       for (let i = 0; i < entries.length; i += 1) {
         const entry = entries[i];
         const target = entry.target as HTMLElement;

diff --git a/yarn.lock b/yarn.lock
@@ -621,6 +621,11 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@juggle/resize-observer@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.0.tgz#2e7a2935adbfae46f9efbd1e1455254ee7ea2219"
+  integrity sha512-P1v2nvK7z2gOLVM/bveIRLG9L99uEahTGgTltyF03zixZAjI9YmKLj5Z9MpS9wBIUt5WDoQORT2lXvLOIF89iA==
+
 "@lerna/add@4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-4.0.0.tgz#c36f57d132502a57b9e7058d1548b7a565ef183f"
@@ -13062,11 +13067,6 @@ require-uncached@^1.0.2:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
-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"