Dont recreate resize observers and replace polyfill (#6043)

package.json

@@ -104,7 +104,7 @@
     "node-vibrant": "^3.1.5",
     "proxy-polyfill": "^0.3.1",
     "regenerator-runtime": "^0.13.2",
-    "resize-observer": "^1.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "roboto-fontface": "^0.10.0",
     "superstruct": "^0.6.1",
     "unfetch": "^4.1.0",

src/data/area_registry.ts

@@ -2,6 +2,7 @@ import { Connection, createCollection } from "home-assistant-js-websocket";
 import { compare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
+import { Store } from "home-assistant-js-websocket/dist/store";
 
 export interface AreaRegistryEntry {
   area_id: string;
@@ -38,18 +39,27 @@ export const deleteAreaRegistryEntry = (hass: HomeAssistant, areaId: string) =>
     area_id: areaId,
   });
 
-const fetchAreaRegistry = (conn) =>
+const fetchAreaRegistry = (conn: Connection) =>
   conn
     .sendMessagePromise({
       type: "config/area_registry/list",
     })
-    .then((areas) => areas.sort((ent1, ent2) => compare(ent1.name, ent2.name)));
+    .then((areas) =>
+      (areas as AreaRegistryEntry[]).sort((ent1, ent2) =>
+        compare(ent1.name, ent2.name)
+      )
+    );
 
-const subscribeAreaRegistryUpdates = (conn, store) =>
+const subscribeAreaRegistryUpdates = (
+  conn: Connection,
+  store: Store<AreaRegistryEntry[]>
+) =>
   conn.subscribeEvents(
     debounce(
       () =>
-        fetchAreaRegistry(conn).then((areas) => store.setState(areas, true)),
+        fetchAreaRegistry(conn).then((areas: AreaRegistryEntry[]) =>
+          store.setState(areas, true)
+        ),
       500,
       true
     ),

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -175,6 +175,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   }
 
   protected firstUpdated(): void {
+    this._measureCard();
     this._attachObserver();
   }
 
@@ -236,10 +237,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   }
 
   private async _attachObserver(): Promise<void> {
-    await installResizeObserver();
-
-    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
-
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(
+        debounce(() => this._measureCard(), 250, false)
+      );
+    }
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
     if (!card) {
@@ -248,8 +251,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     this._resizeObserver.observe(card);
   }
 
-  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
-
   private _measureCard() {
     if (!this.isConnected) {
       return;

src/panels/lovelace/cards/hui-map-card.ts

@@ -39,6 +39,7 @@ import { EntityConfig } from "../entity-rows/types";
 import { LovelaceCard } from "../types";
 import "../../../components/ha-card";
 import { MapCardConfig } from "./types";
+import { installResizeObserver } from "../common/install-resize-observer";
 
 @customElement("hui-map-card")
 class HuiMapCard extends LitElement implements LovelaceCard {
@@ -90,17 +91,16 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   private _leafletMap?: Map;
 
-  // @ts-ignore
   private _resizeObserver?: ResizeObserver;
 
   private _debouncedResizeListener = debounce(
     () => {
-      if (!this._leafletMap) {
+      if (!this.isConnected || !this._leafletMap) {
         return;
       }
       this._leafletMap.invalidateSize();
     },
-    100,
+    250,
     false
   );
 
@@ -110,8 +110,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   private _mapPaths: Array<Polyline | CircleMarker> = [];
 
-  private _connected = false;
-
   private _colorDict: { [key: string]: string } = {};
 
   private _colorIndex = 0;
@@ -174,16 +172,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   public connectedCallback(): void {
     super.connectedCallback();
-    this._connected = true;
+    this._attachObserver();
     if (this.hasUpdated) {
       this.loadMap();
-      this._attachObserver();
     }
   }
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
-    this._connected = false;
 
     if (this._leafletMap) {
       this._leafletMap.remove();
@@ -193,8 +189,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
     if (this._resizeObserver) {
       this._resizeObserver.unobserve(this._mapEl);
-    } else {
-      window.removeEventListener("resize", this._debouncedResizeListener);
     }
   }
 
@@ -250,9 +244,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    if (this._connected) {
-      this._attachObserver();
-    }
+    this._attachObserver();
 
     if (!this._config.aspect_ratio) {
       root.style.paddingBottom = "100%";
@@ -564,20 +556,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     this._mapPaths.forEach((marker) => map.addLayer(marker));
   }
 
-  private _attachObserver(): void {
+  private async _attachObserver(): Promise<void> {
     // Observe changes to map size and invalidate to prevent broken rendering
-    // Uses ResizeObserver in Chrome, otherwise window resize event
 
-    // @ts-ignore
-    if (typeof ResizeObserver === "function") {
-      // @ts-ignore
-      this._resizeObserver = new ResizeObserver(() =>
-        this._debouncedResizeListener()
-      );
-      this._resizeObserver.observe(this._mapEl);
-    } else {
-      window.addEventListener("resize", this._debouncedResizeListener);
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(this._debouncedResizeListener);
     }
+    this._resizeObserver.observe(this);
   }
 
   private async _getHistory(): Promise<void> {

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -431,6 +431,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
   }
 
   protected firstUpdated(): void {
+    this._measureCard();
     this._attachObserver();
   }
 
@@ -618,8 +619,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     );
   }
 
-  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
-
   private _measureCard() {
     const card = this.shadowRoot!.querySelector("ha-card");
     if (!card) {
@@ -631,9 +630,12 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
   }
 
   private async _attachObserver(): Promise<void> {
-    await installResizeObserver();
-    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
-
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(
+        debounce(() => this._measureCard(), 250, false)
+      );
+    }
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
     if (!card) {

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -102,6 +102,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
   }
 
   protected firstUpdated(): void {
+    this._measureCard();
     this._attachObserver();
   }
 
@@ -292,7 +293,9 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
   private async _attachObserver(): Promise<void> {
     if (!this._resizeObserver) {
       await installResizeObserver();
-      this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
+      this._resizeObserver = new ResizeObserver(
+        debounce(() => this._measureCard(), 250, false)
+      );
     }
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
@@ -302,8 +305,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     this._resizeObserver.observe(card);
   }
 
-  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
-
   private _measureCard() {
     if (!this.isConnected) {
       return;

src/panels/lovelace/common/install-resize-observer.ts

@@ -1,6 +1,5 @@
 export const installResizeObserver = async () => {
   if (typeof ResizeObserver !== "function") {
-    const modules = await import("resize-observer");
-    modules.install();
+    window.ResizeObserver = (await import("resize-observer-polyfill")).default;
   }
 };

src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts

@@ -47,15 +47,6 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
 
   private _resizeObserver?: ResizeObserver;
 
-  private _debouncedResizeListener = debounce(
-    () => {
-      this._narrow = (this.clientWidth || 0) < 300;
-      this._veryNarrow = (this.clientWidth || 0) < 225;
-    },
-    250,
-    true
-  );
-
   public setConfig(config: EntityConfig): void {
     if (!config || !config.entity) {
       throw new Error("Invalid Configuration: 'entity' required");
@@ -66,9 +57,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
 
   public connectedCallback(): void {
     super.connectedCallback();
-    if (!this._resizeObserver) {
-      this._attachObserver();
-    }
+    this._attachObserver();
   }
 
   public disconnectedCallback(): void {
@@ -76,6 +65,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
   }
 
   protected firstUpdated(): void {
+    this._measureCard();
     this._attachObserver();
   }
 
@@ -214,12 +204,22 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  private _attachObserver(): void {
-    installResizeObserver().then(() => {
-      this._resizeObserver = new ResizeObserver(this._debouncedResizeListener);
+  private async _attachObserver(): Promise<void> {
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(
+        debounce(() => this._measureCard(), 250, false)
+      );
+    }
+    this._resizeObserver.observe(this);
+  }
 
-      this._resizeObserver.observe(this);
-    });
+  private _measureCard() {
+    if (!this.isConnected) {
+      return;
+    }
+    this._narrow = (this.clientWidth || 0) < 300;
+    this._veryNarrow = (this.clientWidth || 0) < 225;
   }
 
   private _computeControlIcon(stateObj: HassEntity): string {

yarn.lock

@@ -12758,11 +12758,6 @@ resize-observer-polyfill@^1.5.1:
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
-resize-observer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/resize-observer/-/resize-observer-1.0.0.tgz#4f8380b73b411af4ed7d916fe85a2d59900e71ef"
-  integrity sha512-D7UFShDm2TgrEDEyeg+/tTEbvOgPWlvPAfJtxiKp+qutu6HowmcGJKjECgGru0PPDIj3SAucn3ZPpOx54fF7DQ==
-
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"