Clean up mixins

src/components/ha-checkbox.ts

@@ -1,8 +1,9 @@
-import { Constructor, customElement, CSSResult, css } from "lit-element";
+import { customElement, CSSResult, css } from "lit-element";
 import "@material/mwc-checkbox";
 // tslint:disable-next-line
 import { Checkbox } from "@material/mwc-checkbox";
 import { style } from "@material/mwc-checkbox/mwc-checkbox-css";
+import { Constructor } from "../types";
 // tslint:disable-next-line
 const MwcCheckbox = customElements.get("mwc-checkbox") as Constructor<Checkbox>;
 

src/components/ha-fab.ts

@@ -1,12 +1,8 @@
-import {
-  classMap,
-  html,
-  customElement,
-  Constructor,
-} from "@material/mwc-base/base-element";
+import { classMap, html, customElement } from "@material/mwc-base/base-element";
 import { ripple } from "@material/mwc-ripple/ripple-directive.js";
 
 import "@material/mwc-fab";
+import { Constructor } from "../types";
 // tslint:disable-next-line
 import { Fab } from "@material/mwc-fab";
 // tslint:disable-next-line

src/components/ha-icon.ts

@@ -1,4 +1,5 @@
-import { Constructor } from "lit-element";
+import { Constructor } from "../types";
+
 import "@polymer/iron-icon/iron-icon";
 // Not duplicate, this is for typing.
 // tslint:disable-next-line

src/components/ha-paper-dropdown-menu.ts

@@ -1,6 +1,6 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import { Constructor } from "lit-element";
 import { PolymerElement } from "@polymer/polymer";
+import { Constructor } from "../types";
 
 const paperDropdownClass = customElements.get(
   "paper-dropdown-menu"

src/components/ha-paper-icon-button-arrow-next.ts

@@ -1,5 +1,5 @@
-import { Constructor } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
+import { Constructor } from "../types";
 // Not duplicate, this is for typing.
 // tslint:disable-next-line
 import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";

src/components/ha-paper-icon-button-arrow-prev.ts

@@ -1,5 +1,5 @@
-import { Constructor } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
+import { Constructor } from "../types";
 // Not duplicate, this is for typing.
 // tslint:disable-next-line
 import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";

src/components/ha-paper-icon-button-next.ts

@@ -1,5 +1,5 @@
-import { Constructor } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
+import { Constructor } from "../types";
 // Not duplicate, this is for typing.
 // tslint:disable-next-line
 import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";

src/components/ha-paper-icon-button-prev.ts

@@ -1,5 +1,5 @@
-import { Constructor } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
+import { Constructor } from "../types";
 // Not duplicate, this is for typing.
 // tslint:disable-next-line
 import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";

src/components/ha-switch.ts

@@ -1,8 +1,9 @@
-import { Constructor, customElement, CSSResult, css, query } from "lit-element";
+import { customElement, CSSResult, css, query } from "lit-element";
 import "@material/mwc-switch";
 import { style } from "@material/mwc-switch/mwc-switch-css";
 // tslint:disable-next-line
 import { Switch } from "@material/mwc-switch";
+import { Constructor } from "../types";
 // tslint:disable-next-line
 const MwcSwitch = customElements.get("mwc-switch") as Constructor<Switch>;
 

src/mixins/lit-localize-lite-mixin.ts

@@ -1,45 +1,20 @@
-import {
-  Constructor,
-  LitElement,
-  PropertyDeclarations,
-  PropertyValues,
-} from "lit-element";
-import { getLocalLanguage } from "../util/hass-translation";
-import { localizeLiteBaseMixin } from "./localize-lite-base-mixin";
+import { LitElement, PropertyValues, property } from "lit-element";
+import { getLocalLanguage, getTranslation } from "../util/hass-translation";
 import { computeLocalize, LocalizeFunc } from "../common/translations/localize";
+import { Constructor, Resources } from "../types";
 
 const empty = () => "";
 
-interface LitLocalizeLiteMixin {
-  language: string;
-  resources: {};
-  translationFragment: string;
-  localize: LocalizeFunc;
-}
-
-export const litLocalizeLiteMixin = <T extends LitElement>(
-  superClass: Constructor<T>
-): Constructor<T & LitLocalizeLiteMixin> =>
-  // @ts-ignore
-  class extends localizeLiteBaseMixin(superClass) {
-    // Decorators not possible in anonymous classes
-    // And also, we cannot declare the variable without overriding the Lit setter.
-    static get properties(): PropertyDeclarations {
-      return {
-        localize: {},
-        language: {},
-        resources: {},
-        translationFragment: {},
-      };
-    }
-
-    constructor() {
-      super();
-      // This will prevent undefined errors if called before connected to DOM.
-      this.localize = empty;
-      // Use browser language setup before login.
-      this.language = getLocalLanguage();
-    }
+export const litLocalizeLiteMixin = <T extends Constructor<LitElement>>(
+  superClass: T
+) => {
+  class LitLocalizeLiteClass extends superClass {
+    // Initialized to empty will prevent undefined errors if called before connected to DOM.
+    @property() public localize: LocalizeFunc = empty;
+    @property() public resources?: Resources;
+    // Use browser language setup before login.
+    @property() public language?: string = getLocalLanguage();
+    @property() public translationFragment?: string;
 
     public connectedCallback(): void {
       super.connectedCallback();
@@ -51,7 +26,7 @@ export const litLocalizeLiteMixin = <T extends LitElement>(
       );
     }
 
-    public updated(changedProperties: PropertyValues) {
+    protected updated(changedProperties: PropertyValues) {
       super.updated(changedProperties);
       if (
         changedProperties.has("language") ||
@@ -64,4 +39,38 @@ export const litLocalizeLiteMixin = <T extends LitElement>(
         );
       }
     }
-  };
+
+    protected async _initializeLocalizeLite() {
+      if (this.resources) {
+        return;
+      }
+
+      if (!this.translationFragment) {
+        // In dev mode, we will issue a warning if after a second we are still
+        // not configured correctly.
+        if (__DEV__) {
+          setTimeout(
+            () =>
+              !this.resources &&
+              // tslint:disable-next-line
+              console.error(
+                "Forgot to pass in resources or set translationFragment for",
+                this.nodeName
+              ),
+            1000
+          );
+        }
+        return;
+      }
+
+      const { language, data } = await getTranslation(
+        this.translationFragment!,
+        this.language!
+      );
+      this.resources = {
+        [language]: data,
+      };
+    }
+  }
+  return LitLocalizeLiteClass;
+};

src/mixins/provide-hass-lit-mixin.ts

@@ -1,15 +1,15 @@
-import { UpdatingElement, Constructor, PropertyValues } from "lit-element";
-import { HomeAssistant } from "../types";
+import { UpdatingElement, PropertyValues } from "lit-element";
+import { HomeAssistant, Constructor } from "../types";
 
 export interface ProvideHassElement {
   provideHass(element: HTMLElement);
 }
 
 /* tslint:disable */
 
-export const ProvideHassLitMixin = <T extends UpdatingElement>(
-  superClass: Constructor<T>
-): Constructor<T & ProvideHassElement> =>
+export const ProvideHassLitMixin = <T extends Constructor<UpdatingElement>>(
+  superClass: T
+) =>
   // @ts-ignore
   class extends superClass {
     protected hass!: HomeAssistant;

src/mixins/subscribe-mixin.ts

@@ -1,32 +1,21 @@
-import {
-  LitElement,
-  Constructor,
-  PropertyValues,
-  PropertyDeclarations,
-} from "lit-element";
+import { LitElement, PropertyValues, property } from "lit-element";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { HomeAssistant, Constructor } from "../types";
 
 export interface HassSubscribeElement {
   hassSubscribe(): UnsubscribeFunc[];
 }
 
 /* tslint:disable-next-line */
-export const SubscribeMixin = <T extends LitElement>(
-  superClass: Constructor<T>
-): Constructor<T & HassSubscribeElement> =>
-  // @ts-ignore
-  class extends superClass {
+export const SubscribeMixin = <T extends Constructor<LitElement>>(
+  superClass: T
+) => {
+  class SubscribeClass extends superClass {
+    @property() public hass?: HomeAssistant;
+
     /* tslint:disable-next-line */
     private __unsubs?: UnsubscribeFunc[];
 
-    // Decorators not possible in anonymous classes
-    // And also, we cannot declare the variable without overriding the Lit setter.
-    static get properties(): PropertyDeclarations {
-      return {
-        hass: {},
-      };
-    }
-
     public connectedCallback() {
       super.connectedCallback();
       this.__checkSubscribed();
@@ -57,11 +46,12 @@ export const SubscribeMixin = <T extends LitElement>(
       if (
         this.__unsubs !== undefined ||
         !((this as unknown) as Element).isConnected ||
-        // @ts-ignore
         this.hass === undefined
       ) {
         return;
       }
       this.__unsubs = this.hassSubscribe();
     }
-  };
+  }
+  return SubscribeClass;
+};

src/state/auth-mixin.ts

@@ -1,8 +1,8 @@
 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";
+import { Constructor } from "../types";
 
 declare global {
   // for fire event
@@ -11,7 +11,7 @@ declare global {
   }
 }
 
-export default (superClass: Constructor<LitElement & HassBaseEl>) =>
+export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
   class extends superClass {
     protected firstUpdated(changedProps) {
       super.firstUpdated(changedProps);