Cleanups (#2658)

* Import voice dialog only when needed

* Import ha-sidebar when we have first painted the page.

* Add css on LitElement for custom cards

* Import polyfill on first update

* Cleanup of imports

* TS conversion more info mixin

* Migrate auth mixin to TS

* Lint

src/components/ha-start-voice-button.js

@@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import EventsMixin from "../mixins/events-mixin";
 
 import isComponentLoaded from "../common/config/is_component_loaded";
+import { fireEvent } from "../common/dom/fire_event";
 
 /*
  * @appliesMixin EventsMixin
@@ -43,7 +44,11 @@ class HaStartVoiceButton extends EventsMixin(PolymerElement) {
   }
 
   handleListenClick() {
-    this.fire("hass-start-voice");
+    fireEvent(this, "show-dialog", {
+      dialogImport: () =>
+        import(/* webpackChunkName: "voice-command-dialog" */ "../dialogs/ha-voice-command-dialog"),
+      dialogTag: "ha-voice-command-dialog",
+    });
   }
 }
 

src/data/ws-user.ts

@@ -1,20 +1,14 @@
 import {
-  createCollection,
   getUser,
   Connection,
+  getCollection,
 } from "home-assistant-js-websocket";
 import { User } from "../types";
 
+export const userCollection = (conn: Connection) =>
+  getCollection(conn, "_usr", () => getUser(conn) as Promise<User>, undefined);
+
 export const subscribeUser = (
   conn: Connection,
   onChange: (user: User) => void
-) =>
+) => userCollection(conn).subscribe(onChange);
-  createCollection<User>(
-    "_usr",
-    // the getUser command is mistyped in current verrsion of HAWS.
-    // Fixed in 3.2.5
-    () => (getUser(conn) as unknown) as Promise<User>,
-    undefined,
-    conn,
-    onChange
-  );

src/dialogs/ha-voice-command-dialog.js

@@ -159,6 +159,10 @@ class HaVoiceCommandDialog extends DialogMixin(PolymerElement) {
     return ["dialogOpenChanged(opened)"];
   }
 
+  showDialog() {
+    this.opened = true;
+  }
+
   initRecognition() {
     /* eslint-disable new-cap */
     this.recognition = new webkitSpeechRecognition();

src/entrypoints/app.js

@@ -1,9 +1,6 @@
 // Load polyfill first so HTML imports start resolving
 /* eslint-disable import/first */
 import "../resources/html-import/polyfill";
-import "@polymer/app-route/app-location";
-import "@polymer/app-route/app-route";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-styles/typography";
 import { setPassiveTouchGestures } from "@polymer/polymer/lib/utils/settings";
 
@@ -16,13 +13,6 @@ import "../components/ha-iconset-svg";
 
 import "../layouts/app/home-assistant";
 
-/* polyfill for paper-dropdown */
-setTimeout(
-  () =>
-    import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min"),
-  2000
-);
-
 setPassiveTouchGestures(true);
 /* LastPass createElement workaround. See #428 */
 document.createElement = Document.prototype.createElement;

src/layouts/app/auth-mixin.js

@@ -1,44 +0,0 @@
-import { afterNextRender } from "@polymer/polymer/lib/utils/render-status";
-import { getUser } from "home-assistant-js-websocket";
-import { clearState } from "../../util/ha-pref-storage";
-import { askWrite } from "../../common/auth/token_storage";
-import { subscribeUser } from "../../data/ws-user";
-
-export default (superClass) =>
-  class extends superClass {
-    firstUpdated(changedProps) {
-      super.firstUpdated(changedProps);
-      this.addEventListener("hass-logout", () => this._handleLogout());
-      // HACK :( We don't have a way yet to trigger an update of `subscribeUser`
-      this.addEventListener("hass-refresh-current-user", () =>
-        getUser(this.hass.connection).then((user) => this._updateHass({ user }))
-      );
-    }
-
-    hassConnected() {
-      super.hassConnected();
-      subscribeUser(this.hass.connection, (user) => this._updateHass({ user }));
-
-      afterNextRender(null, () => {
-        if (askWrite()) {
-          const el = document.createElement("ha-store-auth-card");
-          this.shadowRoot.appendChild(el);
-          this.provideHass(el);
-          import(/* webpackChunkName: "ha-store-auth-card" */ "../../dialogs/ha-store-auth-card");
-        }
-      });
-    }
-
-    async _handleLogout() {
-      try {
-        await this.hass.auth.revoke();
-        this.hass.connection.close();
-        clearState();
-        document.location.href = "/";
-      } catch (err) {
-        // eslint-disable-next-line
-        console.error(err);
-        alert("Log out failed");
-      }
-    }
-  };

src/layouts/app/auth-mixin.ts

@@ -0,0 +1,55 @@
+import { clearState } from "../../util/ha-pref-storage";
+import { askWrite } from "../../common/auth/token_storage";
+import { subscribeUser, userCollection } from "../../data/ws-user";
+import { Constructor, LitElement } from "lit-element";
+import { HassBaseEl } from "./hass-base-mixin";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "hass-refresh-current-user": undefined;
+  }
+}
+
+export default (superClass: Constructor<LitElement & HassBaseEl>) =>
+  class extends superClass {
+    protected firstUpdated(changedProps) {
+      super.firstUpdated(changedProps);
+      this.addEventListener("hass-logout", () => this._handleLogout());
+      this.addEventListener("hass-refresh-current-user", () => {
+        userCollection(this.hass!.connection).refresh();
+      });
+    }
+
+    protected hassConnected() {
+      super.hassConnected();
+      subscribeUser(this.hass!.connection, (user) =>
+        this._updateHass({ user })
+      );
+
+      if (askWrite()) {
+        this.updateComplete
+          .then(() =>
+            import(/* webpackChunkName: "ha-store-auth-card" */ "../../dialogs/ha-store-auth-card")
+          )
+          .then(() => {
+            const el = document.createElement("ha-store-auth-card");
+            this.shadowRoot!.appendChild(el);
+            this.provideHass(el);
+          });
+      }
+    }
+
+    private async _handleLogout() {
+      try {
+        await this.hass!.auth.revoke();
+        this.hass!.connection.close();
+        clearState();
+        document.location.href = "/";
+      } catch (err) {
+        // tslint:disable-next-line
+        console.error(err);
+        alert("Log out failed");
+      }
+    }
+  };

src/layouts/app/home-assistant.ts

@@ -1,10 +1,10 @@
 import "@polymer/app-route/app-location";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   PropertyValues,
+  css,
 } from "lit-element";
 
 import "../home-assistant-main";
@@ -27,6 +27,7 @@ import { Route, HomeAssistant } from "../../types";
 import { navigate } from "../../common/navigate";
 
 (LitElement.prototype as any).html = html;
+(LitElement.prototype as any).css = css;
 
 const ext = <T>(baseClass: T, mixins): T =>
   mixins.reduceRight((base, mixin) => mixin(base), baseClass);
@@ -82,6 +83,8 @@ export class HomeAssistantAppEl extends ext(HassBaseMixin(LitElement), [
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     setTimeout(registerServiceWorker, 1000);
+    /* polyfill for paper-dropdown */
+    import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min");
   }
 
   protected updated(changedProps: PropertyValues): void {

src/layouts/app/more-info-mixin.js

@@ -1,23 +0,0 @@
-import { afterNextRender } from "@polymer/polymer/lib/utils/render-status";
-
-export default (superClass) =>
-  class extends superClass {
-    firstUpdated(changedProps) {
-      super.firstUpdated(changedProps);
-      this.addEventListener("hass-more-info", (e) => this._handleMoreInfo(e));
-
-      // Load it once we are having the initial rendering done.
-      afterNextRender(null, () =>
-        import(/* webpackChunkName: "more-info-dialog" */ "../../dialogs/ha-more-info-dialog")
-      );
-    }
-
-    async _handleMoreInfo(ev) {
-      if (!this.__moreInfoEl) {
-        this.__moreInfoEl = document.createElement("ha-more-info-dialog");
-        this.shadowRoot.appendChild(this.__moreInfoEl);
-        this.provideHass(this.__moreInfoEl);
-      }
-      this._updateHass({ moreInfoEntityId: ev.detail.entityId });
-    }
-  };

src/layouts/app/more-info-mixin.ts

@@ -0,0 +1,34 @@
+import { Constructor, LitElement } from "lit-element";
+
+import { HassBaseEl } from "./hass-base-mixin";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "hass-more-info": {
+      entityId: string;
+    };
+  }
+}
+
+export default (superClass: Constructor<LitElement & HassBaseEl>) =>
+  class extends superClass {
+    private _moreInfoEl?: any;
+
+    protected firstUpdated(changedProps) {
+      super.firstUpdated(changedProps);
+      this.addEventListener("hass-more-info", (e) => this._handleMoreInfo(e));
+
+      // Load it once we are having the initial rendering done.
+      import(/* webpackChunkName: "more-info-dialog" */ "../../dialogs/ha-more-info-dialog");
+    }
+
+    private async _handleMoreInfo(ev) {
+      if (!this._moreInfoEl) {
+        this._moreInfoEl = document.createElement("ha-more-info-dialog");
+        this.shadowRoot!.appendChild(this._moreInfoEl);
+        this.provideHass(this._moreInfoEl);
+      }
+      this._updateHass({ moreInfoEntityId: ev.detail.entityId });
+    }
+  };

src/layouts/home-assistant-main.ts

@@ -22,9 +22,6 @@ import { HomeAssistant, Route } from "../types";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";
 
-import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");
-import(/* webpackChunkName: "voice-command-dialog" */ "../dialogs/ha-voice-command-dialog");
-
 const NON_SWIPABLE_PANELS = ["kiosk", "map"];
 
 class HomeAssistantMain extends LitElement {
@@ -51,7 +48,6 @@ class HomeAssistantMain extends LitElement {
 
     return html`
       <ha-url-sync .hass=${hass}></ha-url-sync>
-      <ha-voice-command-dialog .hass=${hass}></ha-voice-command-dialog>
       <iron-media-query
         query="(max-width: 870px)"
         query-matches-changed=${this._narrowChanged}
@@ -84,6 +80,8 @@ class HomeAssistantMain extends LitElement {
   }
 
   protected firstUpdated() {
+    import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");
+
     this.addEventListener("hass-open-menu", () => {
       if (this._narrow) {
         this.drawer.open();
@@ -97,9 +95,6 @@ class HomeAssistantMain extends LitElement {
         fireEvent(this, "hass-dock-sidebar", { dock: false });
       }
     });
-    this.addEventListener("hass-start-voice", () => {
-      (this.voiceDialog as any).opened = true;
-    });
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -125,10 +120,6 @@ class HomeAssistantMain extends LitElement {
     return this.shadowRoot!.querySelector("app-drawer")!;
   }
 
-  private get voiceDialog() {
-    return this.shadowRoot!.querySelector("ha-voice-command-dialog")!;
-  }
-
   static get styles(): CSSResult {
     return css`
       :host {