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 = (
-  superClass: Constructor<LitElement>
-): Constructor<LitElement & LocalizeMixin> =>
+export const HassLocalizeLitMixin = <T extends LitElement>(
+  superClass: Constructor<T>
+): 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) 
-implements LovelaceCard {
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {}
-    };
-  }
-
+@customElement("hui-entity-button-card" as any)
+export class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  @property()
   protected hass?: HomeAssistant;
+
+  @property()
   protected config?: Config;
 
   public getCardSize() {
@@ -38,13 +42,13 @@ implements LovelaceCard {
   }
 
   public setConfig(config: Config) {
-    if(!isValidEntityId(config.entity)) {
+    if (!isValidEntityId(config.entity)) {
       throw new Error("Invalid Entity");
     }
 
     this.config = config;
 
-    if(this.hass) {
+    if (this.hass) {
       this.requestUpdate();
     }
   }
@@ -54,26 +58,34 @@ implements LovelaceCard {
       return html``;
     }
     const stateObj = this.hass!.states[this.config.entity];
-    
+
     return html`
       ${this.renderStyle()}
       <ha-card @click="${this.handleClick}">
         ${
-          !stateObj 
-          ? html`<div class="not-found">Entity not available: ${this.config.entity}</div>` 
-          : html`
+          !stateObj
+            ? 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)}"
-                    style="${styleMap({filter: this._computeBrightness(stateObj), color: this._computeColor(stateObj)})}"
+                    .icon="${
+                      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 
-                      : computeStateName(stateObj)
+                    ${
+                      this.config.name
+                        ? this.config.name
+                        : computeStateName(stateObj)
                     }
                   </span>
                 </div>
@@ -131,26 +143,27 @@ implements LovelaceCard {
     const brightness = stateObj.attributes.brightness;
     return `brightness(${(brightness + 245) / 5}%)`;
   }
-  
+
   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 '';
+    if (sat <= 10) {
+      return "";
     }
     return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
   }
 
+  @eventOptions({ passive: true })
   private handleClick() {
     const config = this.config;
     if (!config) {
       return;
     }
     const stateObj = this.hass!.states[config.entity];
-    if(!stateObj) {
+    if (!stateObj) {
       return;
     }
     const entityId = stateObj.entity_id;
@@ -159,7 +172,7 @@ implements LovelaceCard {
         toggleEntity(this.hass, entityId);
         break;
       case "call-service": {
-        if(!config.service){
+        if (!config.service) {
           return;
         }
         const [domain, service] = config.service.split(".", 2);
@@ -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 {
-    return {
-      hass: {},
-    };
-  }
+  @property()
   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
   }
 }