Add some decorators (#1784)

* Add some decorators

* Disable sort keys

* Add babel plugins

* Update typescript to 7.1

config/babel.js

@@ -20,6 +20,9 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
             "@babel/plugin-proposal-object-rest-spread",
             { loose: true, useBuiltIns: true },
           ],
+          // Used for decorators in typescript
+          ["@babel/plugin-proposal-decorators", { legacy: true }],
+          "@babel/plugin-proposal-class-properties",
           // Only support the syntax, Webpack will handle it.
           "@babel/syntax-dynamic-import",
           [

package.json

@@ -91,7 +91,8 @@
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@babel/plugin-external-helpers": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-decorators": "^7.1.2",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-react-jsx": "^7.0.0",

src/mixins/lit-localize-mixin.ts

@@ -11,13 +11,13 @@ import {
   LocalizeMixin,
 } from "./localize-base-mixin";
 
-export const HassLocalizeLitMixin = (
+export const HassLocalizeLitMixin = <T extends LitElement>(
-  superClass: Constructor<LitElement>
+  superClass: Constructor<T>
-): Constructor<LitElement & LocalizeMixin> =>
+): Constructor<T & LocalizeMixin> =>
   // @ts-ignore
   class extends LocalizeBaseMixin(superClass) {
     protected hass?: HomeAssistant;
-    protected localize?: LocalizeFunc;
+    protected localize!: LocalizeFunc;
 
     static get properties(): PropertyDeclarations {
       return {

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -1,4 +1,10 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import {
+  html,
+  LitElement,
+  property,
+  customElement,
+  eventOptions,
+} from "@polymer/lit-element";
 import { fireEvent } from "../../../common/dom/fire_event.js";
 
 import "../../../components/ha-card.js";
@@ -22,15 +28,13 @@ interface Config extends LovelaceConfig {
   service_data?: object;
 }
 
-class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement) 
+@customElement("hui-entity-button-card" as any)
+export class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
-  static get properties(): PropertyDeclarations {
+  @property()
-    return {
-      hass: {}
-    };
-  }
-
   protected hass?: HomeAssistant;
+
+  @property()
   protected config?: Config;
 
   public getCardSize() {
@@ -60,18 +64,26 @@ implements LovelaceCard {
       <ha-card @click="${this.handleClick}">
         ${
           !stateObj
-          ? html`<div class="not-found">Entity not available: ${this.config.entity}</div>` 
+            ? html`<div class="not-found">Entity not available: ${
+                this.config.entity
+              }</div>`
             : html`
               <paper-button>
                 <div>
                   <ha-icon
                     data-domain="${computeStateDomain(stateObj)}"
                     data-state="${stateObj.state}"
-                    .icon="${this.config.icon ? this.config.icon : stateIcon(stateObj)}"
+                    .icon="${
-                    style="${styleMap({filter: this._computeBrightness(stateObj), color: this._computeColor(stateObj)})}"
+                      this.config.icon ? this.config.icon : stateIcon(stateObj)
+                    }"
+                    style="${styleMap({
+                      filter: this._computeBrightness(stateObj),
+                      color: this._computeColor(stateObj),
+                    })}"
                   ></ha-icon>
                   <span>
-                    ${this.config.name 
+                    ${
+                      this.config.name
                         ? this.config.name
                         : computeStateName(stateObj)
                     }
@@ -134,16 +146,17 @@ implements LovelaceCard {
 
   private _computeColor(stateObj) {
     if (!stateObj.attributes.hs_color) {
-      return '';
+      return "";
     }
     const hue = stateObj.attributes.hs_color[0];
     const sat = stateObj.attributes.hs_color[1];
     if (sat <= 10) {
-      return '';
+      return "";
     }
     return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
   }
 
+  @eventOptions({ passive: true })
   private handleClick() {
     const config = this.config;
     if (!config) {
@@ -178,5 +191,3 @@ declare global {
     "hui-entity-button-card": HuiEntityButtonCard;
   }
 }
-
-customElements.define("hui-entity-button-card", HuiEntityButtonCard);

src/panels/lovelace/cards/hui-glance-card.ts

@@ -1,4 +1,10 @@
-import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  property,
+  eventOptions,
+} from "@polymer/lit-element";
 import { classMap } from "lit-html/directives/classMap.js";
 import { repeat } from "lit-html/directives/repeat";
 
@@ -35,15 +41,15 @@ interface Config extends LovelaceConfig {
   entities: EntityConfig[];
 }
 
-class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
+@customElement("hui-glance-card" as any)
+export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
-  static get properties(): PropertyDeclarations {
+  @property()
-    return {
-      hass: {},
-    };
-  }
   protected hass?: HomeAssistant;
+
+  @property()
   protected config?: Config;
+
   protected configEntities?: EntityConfig[];
 
   public getCardSize() {
@@ -179,6 +185,7 @@ class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
     `;
   }
 
+  @eventOptions({ passive: true })
   private handleClick(ev: MouseEvent) {
     const config = (ev.currentTarget as any).entityConf as EntityConfig;
     const entityId = config.entity;
@@ -203,5 +210,3 @@ declare global {
     "hui-glance-card": HuiGlanceCard;
   }
 }
-
-customElements.define("hui-glance-card", HuiGlanceCard);

tslint.json

@@ -3,6 +3,7 @@
   "rules": {
     "interface-name": false,
     "no-submodule-imports": false,
-    "ordered-imports": false
+    "ordered-imports": false,
+    "object-literal-sort-keys": false
   }
 }