Allow supervisor panel to unsubscribe, cleanup (#16470)

hassio/src/supervisor-base-element.ts

@@ -53,34 +53,43 @@ export class SupervisorBaseElement extends urlSyncMixin(
 
   public connectedCallback(): void {
     super.connectedCallback();
-    this._initializeLocalize();
+    if (!this.hasUpdated) {
+      return;
+    }
+    if (this.route?.prefix === "/hassio") {
+      this._initSupervisor();
+    }
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
     Object.keys(this._unsubs).forEach((unsub) => {
       this._unsubs[unsub]();
+      delete this._unsubs[unsub];
     });
+    this.removeEventListener(
+      "supervisor-collection-refresh",
+      this._handleSupervisorStoreRefreshEvent
+    );
   }
 
   protected willUpdate(changedProperties: PropertyValues) {
+    if (!this.hasUpdated) {
+      if (this.route?.prefix === "/hassio") {
+        this._initSupervisor();
+      }
+    }
     if (changedProperties.has("hass")) {
       const oldHass = changedProperties.get("hass") as
         | HomeAssistant
         | undefined;
-      if (
+      if (oldHass?.language !== this.hass.language) {
-        oldHass !== undefined &&
-        oldHass.language !== undefined &&
-        oldHass.language !== this.hass.language
-      ) {
         this._language = this.hass.language;
       }
     }
 
-    if (changedProperties.has("_language")) {
+    if (changedProperties.has("_language") || !this.hasUpdated) {
-      if (changedProperties.get("_language") !== this._language) {
+      this._initializeLocalize();
-        this._initializeLocalize();
-      }
     }
   }
 
@@ -88,20 +97,6 @@ export class SupervisorBaseElement extends urlSyncMixin(
     this.supervisor = { ...this.supervisor, ...update };
   }
 
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    if (
-      this._language !== this.hass.language &&
-      this.hass.language !== undefined
-    ) {
-      this._language = this.hass.language;
-    }
-    this._initializeLocalize();
-    if (this.route?.prefix === "/hassio") {
-      this._initSupervisor();
-    }
-  }
-
   private async _initializeLocalize() {
     const { language, data } = await getTranslation(
       null,
@@ -134,6 +129,17 @@ export class SupervisorBaseElement extends urlSyncMixin(
     this._updateSupervisor({ [collection]: response.data });
   }
 
+  private _subscribeCollection(collection: string) {
+    if (this._unsubs[collection]) {
+      this._unsubs[collection]();
+    }
+    this._unsubs[collection] = this._collections[collection].subscribe((data) =>
+      this._updateSupervisor({
+        [collection]: data,
+      })
+    );
+  }
+
   private async _initSupervisor(): Promise<void> {
     this.addEventListener(
       "supervisor-collection-refresh",
@@ -143,6 +149,7 @@ export class SupervisorBaseElement extends urlSyncMixin(
     if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
       Object.keys(supervisorCollection).forEach((collection) => {
         if (collection in this._collections) {
+          this._subscribeCollection(collection);
           this._collections[collection].refresh();
         } else {
           this._collections[collection] = getSupervisorEventCollection(
@@ -150,15 +157,13 @@ export class SupervisorBaseElement extends urlSyncMixin(
             collection,
             supervisorCollection[collection]
           );
-          if (this._unsubs[collection]) {
+          if (this._collections[collection].state) {
-            this._unsubs[collection]();
+            // happens when the grace period of the collection unsubscribe has not passed yet
+            this._updateSupervisor({
+              [collection]: this._collections[collection].state,
+            });
           }
-          this._unsubs[collection] = this._collections[collection].subscribe(
+          this._subscribeCollection(collection);
-            (data) =>
-              this._updateSupervisor({
-                [collection]: data,
-              })
-          );
         }
       });
     } else {

src/data/supervisor/supervisor.ts

@@ -4,7 +4,7 @@ import {
   FlattenObjectKeys,
   LocalizeFunc,
 } from "../../common/translations/localize";
-import { HomeAssistant, TranslationDict } from "../../types";
+import { TranslationDict } from "../../types";
 import { HassioAddonsInfo } from "../hassio/addon";
 import { HassioHassOSInfo, HassioHostInfo } from "../hassio/host";
 import { NetworkInfo } from "../hassio/network";
@@ -95,7 +95,7 @@ async function processEvent(
     const data = await supervisorApiWsRequest<any>(conn, {
       endpoint: supervisorCollection[key],
     });
-    store.setState(data);
+    store.setState(data, true);
     return;
   }
 
@@ -104,10 +104,7 @@ async function processEvent(
     return;
   }
 
-  store.setState({
+  store.setState(event.data);
-    ...state,
-    ...event.data,
-  });
 }
 
 const subscribeSupervisorEventUpdates = (
@@ -130,17 +127,7 @@ export const getSupervisorEventCollection = (
   getCollection(
     conn,
     `_supervisor${key}Event`,
-    () => supervisorApiWsRequest(conn, { endpoint }),
+    (conn2) => supervisorApiWsRequest(conn2, { endpoint }),
     (connection, store) =>
       subscribeSupervisorEventUpdates(connection, store, key)
   );
-
-export const subscribeSupervisorEvents = (
-  hass: HomeAssistant,
-  onChange: (event) => void,
-  key: string,
-  endpoint: string
-) =>
-  getSupervisorEventCollection(hass.connection, key, endpoint).subscribe(
-    onChange
-  );

src/entrypoints/custom-panel.ts

@@ -140,3 +140,10 @@ document.addEventListener(
   () => window.parent.customPanel!.registerIframe(initialize, setProperties),
   { once: true }
 );
+
+window.addEventListener("unload", () => {
+  // allow disconnected callback to fire
+  while (document.body.lastChild) {
+    document.body.removeChild(document.body.lastChild);
+  }
+});