Convert hui-unused-entities to TypeScript/LitElement (#2173)

src/panels/lovelace/hui-root.js

@@ -318,7 +318,7 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
 
     if (viewIndex === "unused") {
       view = document.createElement("hui-unused-entities");
-      view.config = this.config;
+      view.setConfig(this.config);
     } else {
       const viewConfig = this.config.views[this._curView];
       if (viewConfig.panel) {

src/panels/lovelace/hui-unused-entities.js

@@ -1,61 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import computeUnusedEntities from "./common/compute-unused-entities";
-import createCardElement from "./common/create-card-element";
-
-import "./cards/hui-entities-card";
-
-class HuiUnusedEntities extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        #root {
-          max-width: 600px;
-          margin: 0 auto;
-          padding: 8px 0;
-        }
-      </style>
-      <div id="root"></div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-        observer: "_hassChanged",
-      },
-      config: {
-        type: Object,
-        observer: "_configChanged",
-      },
-    };
-  }
-
-  _configChanged(config) {
-    const root = this.$.root;
-    if (root.lastChild) root.removeChild(root.lastChild);
-
-    const entities = computeUnusedEntities(this.hass, config).map((entity) => ({
-      entity,
-      secondary_info: "entity-id",
-    }));
-    const cardConfig = {
-      type: "entities",
-      title: "Unused entities",
-      entities,
-      show_header_toggle: false,
-    };
-    const element = createCardElement(cardConfig);
-    element.hass = this.hass;
-    root.appendChild(element);
-  }
-
-  _hassChanged(hass) {
-    const root = this.$.root;
-    if (!root.lastChild) return;
-    root.lastChild.hass = hass;
-  }
-}
-customElements.define("hui-unused-entities", HuiUnusedEntities);

src/panels/lovelace/hui-unused-entities.ts

@@ -0,0 +1,87 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+
+import "./cards/hui-entities-card";
+
+import computeUnusedEntities from "./common/compute-unused-entities";
+import createCardElement from "./common/create-card-element";
+import { HomeAssistant } from "../../types";
+import { TemplateResult } from "lit-html";
+import { LovelaceCard } from "./types";
+
+export class HuiUnusedEntities extends LitElement {
+  private _hass?: HomeAssistant;
+  private _config?: object;
+  private _element?: LovelaceCard;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      _hass: {},
+      _config: {},
+    };
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    if (!this._element) {
+      this._createElement();
+      return;
+    }
+    this._element.hass = this._hass;
+  }
+
+  public setConfig(config: object): void {
+    if (!config) {
+      throw new Error("Card config incorrect");
+    }
+    this._config = config;
+    this._createElement();
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this._hass) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <div id="root">${this._element}</div>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        #root {
+          max-width: 600px;
+          margin: 0 auto;
+          padding: 8px 0;
+        }
+      </style>
+    `;
+  }
+
+  private _createElement(): void {
+    if (this._hass) {
+      const entities = computeUnusedEntities(this._hass, this._config).map(
+        (entity) => ({
+          entity,
+          secondary_info: "entity-id",
+        })
+      );
+      this._element = createCardElement({
+        type: "entities",
+        title: "Unused entities",
+        entities,
+        show_header_toggle: false,
+      });
+      this._element!.hass = this._hass;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-unused-entities": HuiUnusedEntities;
+  }
+}
+customElements.define("hui-unused-entities", HuiUnusedEntities);