From 79183bb6ea3f41e62581d4575792a877d04aa266 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sat, 2 Feb 2019 13:23:48 -0800 Subject: [PATCH] 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 | 7 +++- src/data/ws-user.ts | 16 +++---- src/dialogs/ha-voice-command-dialog.js | 4 ++ src/entrypoints/app.js | 10 ----- src/layouts/app/auth-mixin.js | 44 -------------------- src/layouts/app/auth-mixin.ts | 55 +++++++++++++++++++++++++ src/layouts/app/home-assistant.ts | 5 ++- src/layouts/app/more-info-mixin.js | 23 ----------- src/layouts/app/more-info-mixin.ts | 34 +++++++++++++++ src/layouts/home-assistant-main.ts | 13 +----- 10 files changed, 110 insertions(+), 101 deletions(-) delete mode 100644 src/layouts/app/auth-mixin.js create mode 100644 src/layouts/app/auth-mixin.ts delete mode 100644 src/layouts/app/more-info-mixin.js create mode 100644 src/layouts/app/more-info-mixin.ts diff --git a/src/components/ha-start-voice-button.js b/src/components/ha-start-voice-button.js index f7a976e115..0b31b83030 100644 --- a/src/components/ha-start-voice-button.js +++ b/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", + }); } } diff --git a/src/data/ws-user.ts b/src/data/ws-user.ts index e627c20673..66be784eb8 100644 --- a/src/data/ws-user.ts +++ b/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, undefined); + export const subscribeUser = ( conn: Connection, onChange: (user: User) => void -) => - createCollection( - "_usr", - // the getUser command is mistyped in current verrsion of HAWS. - // Fixed in 3.2.5 - () => (getUser(conn) as unknown) as Promise, - undefined, - conn, - onChange - ); +) => userCollection(conn).subscribe(onChange); diff --git a/src/dialogs/ha-voice-command-dialog.js b/src/dialogs/ha-voice-command-dialog.js index c033c0dfd7..911934784e 100644 --- a/src/dialogs/ha-voice-command-dialog.js +++ b/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(); diff --git a/src/entrypoints/app.js b/src/entrypoints/app.js index 12dc9c588a..b53f611074 100644 --- a/src/entrypoints/app.js +++ b/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; diff --git a/src/layouts/app/auth-mixin.js b/src/layouts/app/auth-mixin.js deleted file mode 100644 index 22b5e8273f..0000000000 --- a/src/layouts/app/auth-mixin.js +++ /dev/null @@ -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"); - } - } - }; diff --git a/src/layouts/app/auth-mixin.ts b/src/layouts/app/auth-mixin.ts new file mode 100644 index 0000000000..2fa5d3bf1f --- /dev/null +++ b/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) => + 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"); + } + } + }; diff --git a/src/layouts/app/home-assistant.ts b/src/layouts/app/home-assistant.ts index 46fc89a84f..6f5fc8a8b0 100644 --- a/src/layouts/app/home-assistant.ts +++ b/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 = (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 { diff --git a/src/layouts/app/more-info-mixin.js b/src/layouts/app/more-info-mixin.js deleted file mode 100644 index 276d2f7e64..0000000000 --- a/src/layouts/app/more-info-mixin.js +++ /dev/null @@ -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 }); - } - }; diff --git a/src/layouts/app/more-info-mixin.ts b/src/layouts/app/more-info-mixin.ts new file mode 100644 index 0000000000..c4a3d8fed5 --- /dev/null +++ b/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) => + 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 }); + } + }; diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index 2e6c8a5dc6..bd26de067a 100644 --- a/src/layouts/home-assistant-main.ts +++ b/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` - { 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 {