Cleanup some subscriptions

src/components/device/ha-area-devices-picker.ts

@@ -1,26 +1,15 @@
 import "@material/mwc-button/mwc-button";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { stringCompare } from "../../common/string/compare";
-import {
-  AreaRegistryEntry,
-  subscribeAreaRegistry,
-} from "../../data/area_registry";
 import {
   DeviceEntityLookup,
   DeviceRegistryEntry,
-  subscribeDeviceRegistry,
 } from "../../data/device_registry";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../data/entity_registry";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
@@ -45,7 +34,7 @@ const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (
 </mwc-list-item>`;
 
 @customElement("ha-area-devices-picker")
-export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
+export class HaAreaDevicesPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
@@ -82,25 +71,22 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
 
   @state() private _areaPicker = true;
 
-  @state() private _devices?: DeviceRegistryEntry[];
-
-  @state() private _areas?: AreaRegistryEntry[];
-
-  @state() private _entities?: EntityRegistryEntry[];
-
   private _selectedDevices: string[] = [];
 
   private _filteredDevices: DeviceRegistryEntry[] = [];
 
   private _getAreasWithDevices = memoizeOne(
     (
-      devices: DeviceRegistryEntry[],
+      deviceReg: HomeAssistant["devices"],
-      areas: AreaRegistryEntry[],
+      areas: HomeAssistant["areas"],
-      entities: EntityRegistryEntry[],
+      entityReg: HomeAssistant["entities"],
       includeDomains: this["includeDomains"],
       excludeDomains: this["excludeDomains"],
       includeDeviceClasses: this["includeDeviceClasses"]
     ): AreaDevices[] => {
+      const devices = Object.values(deviceReg);
+      const entities = Object.values(entityReg);
+
       if (!devices.length) {
         return [];
       }
@@ -164,11 +150,6 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
 
       this._filteredDevices = inputDevices;
 
-      const areaLookup: { [areaId: string]: AreaRegistryEntry } = {};
-      for (const area of areas) {
-        areaLookup[area.area_id] = area;
-      }
-
       const devicesByArea: DevicesByArea = {};
 
       for (const device of inputDevices) {
@@ -177,7 +158,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
           if (!(areaId in devicesByArea)) {
             devicesByArea[areaId] = {
               id: areaId,
-              name: areaLookup[areaId].name,
+              name: areas[areaId].name,
               devices: [],
             };
           }
@@ -199,20 +180,6 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
     }
   );
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
-        this._devices = devices;
-      }),
-      subscribeAreaRegistry(this.hass.connection!, (areas) => {
-        this._areas = areas;
-      }),
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities;
-      }),
-    ];
-  }
-
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (changedProps.has("area") && this.area) {
@@ -231,13 +198,10 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
-    if (!this._devices || !this._areas || !this._entities) {
-      return html``;
-    }
     const areas = this._getAreasWithDevices(
-      this._devices,
+      this.hass.devices,
-      this._areas,
+      this.hass.areas,
-      this._entities,
+      this.hass.entities,
       this.includeDomains,
       this.excludeDomains,
       this.includeDeviceClasses

src/components/device/ha-device-picker.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -7,21 +6,15 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { stringCompare } from "../../common/string/compare";
-import {
+
-  AreaRegistryEntry,
+
-  subscribeAreaRegistry,
-} from "../../data/area_registry";
 import {
   computeDeviceName,
   DeviceEntityLookup,
   DeviceRegistryEntry,
-  subscribeDeviceRegistry,
 } from "../../data/device_registry";
-import {
+
-  EntityRegistryEntry,
+
-  subscribeEntityRegistry,
-} from "../../data/entity_registry";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "../ha-combo-box";
@@ -45,7 +38,7 @@ const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<mwc-list-item
 </mwc-list-item>`;
 
 @customElement("ha-device-picker")
-export class HaDevicePicker extends SubscribeMixin(LitElement) {
+export class HaDevicePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
@@ -54,12 +47,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @property() public helper?: string;
 
-  @property() public devices?: DeviceRegistryEntry[];
-
-  @property() public areas?: AreaRegistryEntry[];
-
-  @property() public entities?: EntityRegistryEntry[];
-
   /**
    * Show only devices with entities from specific domains.
    * @type {Array}
@@ -106,15 +93,18 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   private _getDevices = memoizeOne(
     (
-      devices: DeviceRegistryEntry[],
+      deviceReg: HomeAssistant["devices"],
-      areas: AreaRegistryEntry[],
+      areas: HomeAssistant["areas"],
-      entities: EntityRegistryEntry[],
+      entityReg: HomeAssistant["entities"],
       includeDomains: this["includeDomains"],
       excludeDomains: this["excludeDomains"],
       includeDeviceClasses: this["includeDeviceClasses"],
       deviceFilter: this["deviceFilter"],
       excludeDevices: this["excludeDevices"]
     ): Device[] => {
+      const devices = Object.values(deviceReg);
+      const entities = Object.values(entityReg);
+
       if (!devices.length) {
         return [
           {
@@ -138,12 +128,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
           deviceEntityLookup[entity.device_id].push(entity);
         }
       }
-
-      const areaLookup: { [areaId: string]: AreaRegistryEntry } = {};
-      for (const area of areas) {
-        areaLookup[area.area_id] = area;
-      }
-
       let inputDevices = devices.filter(
         (device) => device.id === this.value || !device.disabled_by
       );
@@ -214,8 +198,8 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
           deviceEntityLookup[device.id]
         ),
         area:
-          device.area_id && areaLookup[device.area_id]
+          device.area_id && device.area_id in areas
-            ? areaLookup[device.area_id].name
+            ? areas[device.area_id].name
             : this.hass.localize("ui.components.device-picker.no_area"),
       }));
       if (!outputDevices.length) {
@@ -246,30 +230,16 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     await this.comboBox?.focus();
   }
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
-        this.devices = devices;
-      }),
-      subscribeAreaRegistry(this.hass.connection!, (areas) => {
-        this.areas = areas;
-      }),
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this.entities = entities;
-      }),
-    ];
-  }
-
   protected updated(changedProps: PropertyValues) {
     if (
-      (!this._init && this.devices && this.areas && this.entities) ||
+      !this._init ||
       (this._init && changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
       (this.comboBox as any).items = this._getDevices(
-        this.devices!,
+        this.hass.devices,
-        this.areas!,
+        this.hass.areas,
-        this.entities!,
+        this.hass.entities,
         this.includeDomains,
         this.excludeDomains,
         this.includeDeviceClasses,

src/components/ha-areas-picker.ts

@@ -2,13 +2,12 @@ import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { EntityRegistryEntry } from "../data/entity_registry";
-import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-area-picker";
 
 @customElement("ha-areas-picker")
-export class HaAreasPicker extends SubscribeMixin(LitElement) {
+export class HaAreasPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;

src/components/ha-related-items.ts

@@ -1,4 +1,4 @@
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
@@ -9,23 +9,16 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import {
+import { AreaRegistryEntry } from "../data/area_registry";
-  AreaRegistryEntry,
-  subscribeAreaRegistry,
-} from "../data/area_registry";
 import { ConfigEntry, getConfigEntries } from "../data/config_entries";
-import {
+import { DeviceRegistryEntry } from "../data/device_registry";
-  DeviceRegistryEntry,
-  subscribeDeviceRegistry,
-} from "../data/device_registry";
 import { SceneEntity } from "../data/scene";
 import { findRelated, ItemType, RelatedResult } from "../data/search";
-import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { HomeAssistant } from "../types";
 import "./ha-switch";
 
 @customElement("ha-related-items")
-export class HaRelatedItems extends SubscribeMixin(LitElement) {
+export class HaRelatedItems extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public itemType!: ItemType;
@@ -34,23 +27,8 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
 
   @state() private _entries?: ConfigEntry[];
 
-  @state() private _devices?: DeviceRegistryEntry[];
-
-  @state() private _areas?: AreaRegistryEntry[];
-
   @state() private _related?: RelatedResult;
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
-        this._devices = devices;
-      }),
-      subscribeAreaRegistry(this.hass.connection!, (areas) => {
-        this._areas = areas;
-      }),
-    ];
-  }
-
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     getConfigEntries(this.hass).then((configEntries) => {
@@ -104,11 +82,10 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
             `;
           })
         : ""}
-      ${this._related.device && this._devices
+      ${this._related.device
         ? this._related.device.map((relatedDeviceId) => {
-            const device: DeviceRegistryEntry | undefined = this._devices!.find(
+            const device: DeviceRegistryEntry | undefined =
-              (dev) => dev.id === relatedDeviceId
+              this.hass.devices[relatedDeviceId];
-            );
             if (!device) {
               return "";
             }
@@ -125,11 +102,10 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
             `;
           })
         : ""}
-      ${this._related.area && this._areas
+      ${this._related.area
         ? this._related.area.map((relatedAreaId) => {
-            const area: AreaRegistryEntry | undefined = this._areas!.find(
+            const area: AreaRegistryEntry | undefined =
-              (ar) => ar.area_id === relatedAreaId
+              this.hass.areas[relatedAreaId];
-            );
             if (!area) {
               return "";
             }

src/components/ha-selector/ha-selector-area.ts

@@ -1,13 +1,10 @@
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { DeviceRegistryEntry } from "../../data/device_registry";
 import { getDeviceIntegrationLookup } from "../../data/device_registry";
-import {
+import { EntityRegistryEntry } from "../../data/entity_registry";
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../data/entity_registry";
 import {
   EntitySources,
   fetchEntitySourcesWithCache,
@@ -17,13 +14,12 @@ import {
   filterSelectorDevices,
   filterSelectorEntities,
 } from "../../data/selector";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../types";
 import "../ha-area-picker";
 import "../ha-areas-picker";
 
 @customElement("ha-selector-area")
-export class HaAreaSelector extends SubscribeMixin(LitElement) {
+export class HaAreaSelector extends LitElement {
   @property() public hass!: HomeAssistant;
 
   @property() public selector!: AreaSelector;
@@ -44,12 +40,16 @@ export class HaAreaSelector extends SubscribeMixin(LitElement) {
 
   private _deviceIntegrationLookup = memoizeOne(getDeviceIntegrationLookup);
 
-  public hassSubscribe(): UnsubscribeFunc[] {
+  protected willUpdate(changedProperties: PropertyValues): void {
-    return [
+    if (
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+      changedProperties.has("hass") &&
-        this._entities = entities.filter((entity) => entity.device_id !== null);
+      (changedProperties.get("hass") as HomeAssistant | undefined)?.entities !==
-      }),
+        this.hass.entities
-    ];
+    ) {
+      this._entities = Object.values(this.hass.entities).filter(
+        (entity) => entity.device_id !== null
+      );
+    }
   }
 
   protected updated(changedProperties: PropertyValues): void {

src/panels/config/areas/ha-config-area-page.ts

@@ -2,10 +2,7 @@ import "@material/mwc-button";
 import { mdiImagePlus, mdiPencil } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import {
+import { HassEntity } from "home-assistant-js-websocket/dist/types";
-  HassEntity,
-  UnsubscribeFunc,
-} from "home-assistant-js-websocket/dist/types";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
@@ -22,7 +19,6 @@ import "../../../components/ha-icon-next";
 import {
   AreaRegistryEntry,
   deleteAreaRegistryEntry,
-  subscribeAreaRegistry,
   updateAreaRegistryEntry,
 } from "../../../data/area_registry";
 import { AutomationEntity } from "../../../data/automation";
@@ -30,20 +26,19 @@ import {
   computeDeviceName,
   DeviceRegistryEntry,
   sortDeviceRegistryByName,
-  subscribeDeviceRegistry,
 } from "../../../data/device_registry";
 import {
   computeEntityRegistryName,
   EntityRegistryEntry,
   sortEntityRegistryByName,
-  subscribeEntityRegistry,
 } from "../../../data/entity_registry";
 import { SceneEntity } from "../../../data/scene";
 import { ScriptEntity } from "../../../data/script";
 import { findRelated, RelatedResult } from "../../../data/search";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
-import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import "../../../layouts/hass-error-screen";
+import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import "../../logbook/ha-logbook";
@@ -51,8 +46,6 @@ import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
-import "../../../layouts/hass-error-screen";
-import "../../../layouts/hass-subpage";
 
 declare type NameAndEntity<EntityType extends HassEntity> = {
   name: string;
@@ -60,7 +53,7 @@ declare type NameAndEntity<EntityType extends HassEntity> = {
 };
 
 @customElement("ha-config-area-page")
-class HaConfigAreaPage extends SubscribeMixin(LitElement) {
+class HaConfigAreaPage extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public areaId!: string;
@@ -71,33 +64,19 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public showAdvanced!: boolean;
 
-  @state() public _areas!: AreaRegistryEntry[];
-
-  @state() public _devices!: DeviceRegistryEntry[];
-
-  @state() public _entities!: EntityRegistryEntry[];
-
   @state() private _related?: RelatedResult;
 
   private _logbookTime = { recent: 86400 };
 
-  private _area = memoizeOne(
-    (
-      areaId: string,
-      areas: AreaRegistryEntry[]
-    ): AreaRegistryEntry | undefined =>
-      areas.find((area) => area.area_id === areaId)
-  );
-
   private _memberships = memoizeOne(
     (
       areaId: string,
-      registryDevices: DeviceRegistryEntry[],
+      registryDevices: HomeAssistant["devices"],
-      registryEntities: EntityRegistryEntry[]
+      registryEntities: HomeAssistant["entities"]
     ) => {
       const devices = new Map<string, DeviceRegistryEntry>();
 
-      for (const device of registryDevices) {
+      for (const device of Object.values(registryDevices)) {
         if (device.area_id === areaId) {
           devices.set(device.id, device);
         }
@@ -106,7 +85,7 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
       const entities: EntityRegistryEntry[] = [];
       const indirectEntities: EntityRegistryEntry[] = [];
 
-      for (const entity of registryEntities) {
+      for (const entity of Object.values(registryEntities)) {
         if (entity.area_id) {
           if (entity.area_id === areaId) {
             entities.push(entity);
@@ -150,26 +129,8 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
     }
   }
 
-  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
-    return [
-      subscribeAreaRegistry(this.hass.connection, (areas) => {
-        this._areas = areas;
-      }),
-      subscribeDeviceRegistry(this.hass.connection, (entries) => {
-        this._devices = entries;
-      }),
-      subscribeEntityRegistry(this.hass.connection, (entries) => {
-        this._entities = entries;
-      }),
-    ];
-  }
-
   protected render(): TemplateResult {
-    if (!this._areas || !this._devices || !this._entities) {
+    const area = this.hass.areas[this.areaId];
-      return html``;
-    }
-
-    const area = this._area(this.areaId, this._areas);
 
     if (!area) {
       return html`
@@ -182,8 +143,8 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
 
     const memberships = this._memberships(
       this.areaId,
-      this._devices,
+      this.hass.devices,
-      this._entities
+      this.hass.entities
     );
     const { devices, entities } = memberships;