refactor(linear-progress): remove ts resize observer type polyfill

fixes mwc: #2047

PiperOrigin-RevId: 352883271

Author: Elliott Marquez

packages/mdc-linear-progress/adapter.ts

@@ -29,6 +29,8 @@
  * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
  */
 
+import {MDCResizeObserver, MDCResizeObserverCallback} from './types';
+
 export interface MDCLinearProgressAdapter {
   addClass(className: string): void;
   /**
@@ -42,7 +44,8 @@ export interface MDCLinearProgressAdapter {
    *    root element with the given callback. `null` if `ResizeObserver` is not
    *    implemented or polyfilled.
    */
-  attachResizeObserver(callback: ResizeObserverCallback): ResizeObserver|null;
+  attachResizeObserver(callback: MDCResizeObserverCallback): MDCResizeObserver
+      |null;
   forceLayout(): void;
   setBufferBarStyle(styleProperty: string, value: string): void;
   setPrimaryBarStyle(styleProperty: string, value: string): void;

packages/mdc-linear-progress/component.ts

@@ -25,6 +25,7 @@ import {MDCComponent} from '@material/base/component';
 import {MDCProgressIndicator} from '@material/progress-indicator/component';
 import {MDCLinearProgressAdapter} from './adapter';
 import {MDCLinearProgressFoundation} from './foundation';
+import {WithMDCResizeObserver} from './types';
 
 export class MDCLinearProgress extends
     MDCComponent<MDCLinearProgressFoundation> implements MDCProgressIndicator {
@@ -96,9 +97,10 @@ export class MDCLinearProgress extends
       setStyle: (name: string, value: string) => {
         (this.root as HTMLElement).style.setProperty(name, value);
       },
-      attachResizeObserver: (callback: ResizeObserverCallback) => {
-        if (window.ResizeObserver) {
-          const ro = new ResizeObserver(callback);
+      attachResizeObserver: (callback) => {
+        const RO = (window as unknown as WithMDCResizeObserver).ResizeObserver;
+        if (RO) {
+          const ro = new RO(callback);
           ro.observe(this.root);
           return ro;
         }

packages/mdc-linear-progress/foundation.ts

@@ -27,6 +27,7 @@ import {MDCProgressIndicatorFoundation} from '@material/progress-indicator/found
 
 import {MDCLinearProgressAdapter} from './adapter';
 import {animationDimensionPercentages as percents, cssClasses, strings} from './constants';
+import {MDCResizeObserver} from './types';
 
 export class MDCLinearProgressFoundation extends
     MDCFoundation<MDCLinearProgressAdapter> implements
@@ -58,7 +59,7 @@ export class MDCLinearProgressFoundation extends
   private isDeterminate!: boolean;
   private progress!: number;
   private buffer!: number;
-  private observer: ResizeObserver|null = null;
+  private observer: MDCResizeObserver|null = null;
 
   constructor(adapter?: Partial<MDCLinearProgressAdapter>) {
     super({...MDCLinearProgressFoundation.defaultAdapter, ...adapter});

packages/mdc-linear-progress/index.ts

@@ -25,3 +25,4 @@ export * from './adapter';
 export * from './component';
 export * from './constants';
 export * from './foundation';
+export * from './types';

packages/mdc-linear-progress/package.json

@@ -27,7 +27,6 @@
     "tslib": "^1.9.3"
   },
   "devDependencies": {
-    "@types/resize-observer-browser": "^0.1.3"
   },
   "publishConfig": {
     "access": "public"

packages/mdc-linear-progress/test/component.test.ts

@@ -24,14 +24,17 @@
 
 import {animationDimensionPercentages as percentages} from '../../mdc-linear-progress/constants';
 import {MDCLinearProgress, MDCLinearProgressFoundation} from '../../mdc-linear-progress/index';
+import {MDCResizeObserver, MDCResizeObserverCallback, MDCResizeObserverEntry, WithMDCResizeObserver} from '../../mdc-linear-progress/types';
 import {emitEvent} from '../../../testing/dom/events';
 import {createMockFoundation} from '../../../testing/helpers/foundation';
 import {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';
 
 interface WithObserverFoundation {
-  foundation: {observer: null|ResizeObserver};
+  foundation: {observer: null|MDCResizeObserver};
 }
 
+const RO = (window as unknown as WithMDCResizeObserver).ResizeObserver;
+
 const roundPixelsToTwoDecimals = (val: string) => {
   const numberVal = Number(val.split('px')[0]);
   return Math.floor(numberVal * 100) / 100;
@@ -59,7 +62,7 @@ function getFixture() {
   return el;
 }
 
-const originalResizeObserver = window.ResizeObserver;
+const originalResizeObserver = RO;
 
 function setupTest(hasMockFoundation = false) {
   const root = getFixture();
@@ -156,11 +159,13 @@ describe('MDCLinearProgress', () => {
       if (root) {
         document.body.removeChild(root);
       }
-      window.ResizeObserver = originalResizeObserver;
+      (window as unknown as WithMDCResizeObserver).ResizeObserver =
+          originalResizeObserver;
     });
 
     it('will not error if there is no resize observer', () => {
-      (window.ResizeObserver as unknown as null) = null;
+      ((window as unknown as WithMDCResizeObserver).ResizeObserver as unknown as
+       null) = null;
       component = setupTest().component;
 
       const foundation =
@@ -171,7 +176,7 @@ describe('MDCLinearProgress', () => {
     });
 
     it('will update size on resize', async () => {
-      if (!window.ResizeObserver) {
+      if (!RO) {
         // skip tests on IE which wouldn't run these anyway
         return;
       }
@@ -183,7 +188,7 @@ describe('MDCLinearProgress', () => {
       class MockObserver {
         observedElement: HTMLElement|null = null;
 
-        constructor(public callback: ResizeObserverCallback) {
+        constructor(public callback: MDCResizeObserverCallback) {
           this.callback = callback;
         }
 
@@ -198,12 +203,13 @@ describe('MDCLinearProgress', () => {
         triggerResize(width: number) {
           const fakeEntry = {contentRect: {width}};
           this.callback(
-              [fakeEntry as unknown as ResizeObserverEntry],
-              this as unknown as ResizeObserver);
+              [fakeEntry as unknown as MDCResizeObserverEntry],
+              this as unknown as MDCResizeObserver);
         }
       }
 
-      window.ResizeObserver = MockObserver as unknown as typeof ResizeObserver;
+      (window as unknown as WithMDCResizeObserver).ResizeObserver =
+          MockObserver as unknown as typeof RO;
       ({root, component} = setupTest());
       document.body.appendChild(root);
       component.determinate = false;

packages/mdc-linear-progress/test/foundation.test.ts

@@ -23,11 +23,14 @@
 
 import {animationDimensionPercentages as percentages} from '../../mdc-linear-progress/constants';
 import {MDCLinearProgressFoundation} from '../../mdc-linear-progress/foundation';
+import {WithMDCResizeObserver} from '../../mdc-linear-progress/types';
 import {checkNumTimesSpyCalledWithArgs, verifyDefaultAdapter} from '../../../testing/helpers/foundation';
 import {setUpFoundationTest} from '../../../testing/helpers/setup';
 
 const {cssClasses, strings} = MDCLinearProgressFoundation;
 
+const RO = (window as unknown as WithMDCResizeObserver).ResizeObserver;
+
 const multiplyPercentages = (multipler: number) => {
   return {
     PRIMARY_HALF: percentages.PRIMARY_HALF * multipler,
@@ -94,7 +97,7 @@ describe('MDCLinearProgressFoundation', () => {
   it('#setDeterminate false updates custom props', () => {
     const {foundation, mockAdapter} = setupTest();
     mockAdapter.getWidth.and.returnValue(100);
-    mockAdapter.attachResizeObserver.and.returnValue(window.ResizeObserver);
+    mockAdapter.attachResizeObserver.and.returnValue(RO);
     mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)
         .and.returnValue(false);
     foundation.init();
@@ -103,7 +106,7 @@ describe('MDCLinearProgressFoundation', () => {
     foundation.setDeterminate(false);
     expect(foundation.getDeterminate()).toBe(false);
 
-    if (!window.ResizeObserver) {
+    if (!RO) {
       expect(mockAdapter.setStyle).toHaveBeenCalledTimes(0);
       return;
     }
@@ -212,40 +215,36 @@ describe('MDCLinearProgressFoundation', () => {
        const {foundation, mockAdapter} = setupTest();
        mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)
            .and.returnValue(true);
-       mockAdapter.attachResizeObserver.and.returnValue(window.ResizeObserver);
+       mockAdapter.attachResizeObserver.and.returnValue(RO);
        foundation.init();
-       expect(mockAdapter.setStyle)
-           .toHaveBeenCalledTimes(window.ResizeObserver ? 10 : 0);
+       expect(mockAdapter.setStyle).toHaveBeenCalledTimes(RO ? 10 : 0);
      });
 
   it('#calculateAndSetDimensions called only on setDeterminate(false)', () => {
     const {foundation, mockAdapter} = setupTest();
     mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)
         .and.returnValue(true);
-    mockAdapter.attachResizeObserver.and.returnValue(window.ResizeObserver);
+    mockAdapter.attachResizeObserver.and.returnValue(RO);
     foundation.init();
-    expect(mockAdapter.setStyle)
-        .toHaveBeenCalledTimes(window.ResizeObserver ? 10 : 0);
+    expect(mockAdapter.setStyle).toHaveBeenCalledTimes(RO ? 10 : 0);
 
     foundation.setDeterminate(true);
 
-    expect(mockAdapter.setStyle)
-        .toHaveBeenCalledTimes(window.ResizeObserver ? 10 : 0);
+    expect(mockAdapter.setStyle).toHaveBeenCalledTimes(RO ? 10 : 0);
 
     foundation.setDeterminate(false);
 
-    expect(mockAdapter.setStyle)
-        .toHaveBeenCalledTimes(window.ResizeObserver ? 20 : 0);
+    expect(mockAdapter.setStyle).toHaveBeenCalledTimes(RO ? 20 : 0);
   });
 
   it('#calculateAndSetDimensions restarts animation with a forced reflow',
      () => {
        const {foundation, mockAdapter} = setupTest();
        mockAdapter.hasClass.withArgs(cssClasses.INDETERMINATE_CLASS)
            .and.returnValue(true);
-       mockAdapter.attachResizeObserver.and.returnValue(window.ResizeObserver);
+       mockAdapter.attachResizeObserver.and.returnValue(RO);
        foundation.init();
-       if (window.ResizeObserver) {
+       if (RO) {
          expect(mockAdapter.addClass)
              .toHaveBeenCalledWith(cssClasses.ANIMATION_READY_CLASS);
          expect(mockAdapter.forceLayout).toHaveBeenCalledTimes(1);

packages/mdc-linear-progress/types.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2021 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+// Opt-in resize observer types
+
+export interface MDCResizeObserverEntry {
+  contentRect: DOMRectReadOnly;
+}
+
+export interface MDCResizeObserver {
+  new(callback: MDCResizeObserverCallback): MDCResizeObserver;
+  disconnect(): void;
+  observe(target: Element): void;
+}
+
+export interface WithMDCResizeObserver {
+  ResizeObserver: MDCResizeObserver;
+}
+
+export type MDCResizeObserverCallback =
+    (entries: MDCResizeObserverEntry[], observer: MDCResizeObserver) => void;