Update typescript, prettier, tslint -> eslint (#5536)

* Update typescript, prettier, tslint -> eslint

* Organize imports

* Use glob for eslint fix react import

.eslintrc-hound.json

@@ -1,80 +0,0 @@
-{
-  "extends": ["airbnb-base", "prettier"],
-  "parserOptions": {
-    "ecmaVersion": "2020",
-    "ecmaFeatures": {
-      "jsx": true,
-      "modules": true
-    }
-  },
-  "settings": {
-    "react": {
-      "pragma": "h",
-      "version": "15.0"
-    },
-    "import/resolver": {
-      "webpack": {
-        "config": "webpack.config.js"
-      }
-    }
-  },
-  "globals": {
-    "__DEV__": false,
-    "__DEMO__": false,
-    "__BUILD__": false,
-    "__VERSION__": false,
-    "__STATIC_PATH__": false,
-    "Polymer": true,
-    "webkitSpeechRecognition": false,
-    "ResizeObserver": false
-  },
-  "env": {
-    "browser": true,
-    "mocha": true
-  },
-  "rules": {
-    "class-methods-use-this": 0,
-    "new-cap": 0,
-    "prefer-template": 0,
-    "object-shorthand": 0,
-    "func-names": 0,
-    "prefer-arrow-callback": 0,
-    "no-underscore-dangle": 0,
-    "no-var": 0,
-    "strict": 0,
-    "prefer-spread": 0,
-    "no-plusplus": 0,
-    "no-bitwise": 0,
-    "comma-dangle": 0,
-    "vars-on-top": 0,
-    "no-continue": 0,
-    "no-param-reassign": 0,
-    "no-multi-assign": 0,
-    "radix": 0,
-    "no-alert": 0,
-    "no-return-await": 0,
-    "prefer-destructuring": 0,
-    "no-restricted-globals": [2, "event"],
-    "prefer-promise-reject-errors": 0,
-    "import/prefer-default-export": 0,
-    "import/no-unresolved": 0,
-    "import/extensions": [2, "ignorePackages"],
-    "object-curly-newline": 0,
-    "default-case": 0,
-    "react/jsx-no-bind": [2, { "ignoreRefs": true }],
-    "react/jsx-no-duplicate-props": 2,
-    "react/self-closing-comp": 2,
-    "react/prefer-es6-class": 2,
-    "react/no-string-refs": 2,
-    "react/require-render-return": 2,
-    "react/no-find-dom-node": 2,
-    "react/no-is-mounted": 2,
-    "react/jsx-no-comment-textnodes": 2,
-    "react/jsx-no-undef": 2,
-    "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2,
-    "no-restricted-syntax": [0, "ForOfStatement"],
-    "prettier/prettier": "error"
-  },
-  "plugins": ["react", "prettier"]
-}

.eslintrc.json

@@ -1,12 +1,100 @@
 {
-  "extends": "./.eslintrc-hound.json",
+  "extends": [
-  "plugins": ["react"],
+    "plugin:@typescript-eslint/recommended",
+    "airbnb-typescript/base",
+    "plugin:wc/recommended",
+    "plugin:lit/recommended",
+    "prettier",
+    "prettier/@typescript-eslint"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    },
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "settings": {
+    "react": {
+      "pragma": "h",
+      "version": "15.0"
+    },
+    "import/resolver": {
+      "webpack": {
+        "config": "./webpack.config.js"
+      }
+    }
+  },
+  "globals": {
+    "__DEV__": false,
+    "__DEMO__": false,
+    "__BUILD__": false,
+    "__VERSION__": false,
+    "__STATIC_PATH__": false,
+    "Polymer": true,
+    "webkitSpeechRecognition": false,
+    "ResizeObserver": false
+  },
   "env": {
-    "browser": true
+    "browser": true,
+    "es6": true
   },
   "rules": {
-    "import/no-unresolved": 2,
+    "class-methods-use-this": 0,
-    "linebreak-style": 0,
+    "new-cap": 0,
-    "implicit-arrow-linebreak": 0
+    "prefer-template": 0,
-  }
+    "object-shorthand": 0,
+    "func-names": 0,
+    "prefer-arrow-callback": 0,
+    "no-underscore-dangle": 0,
+    "no-var": 0,
+    "strict": 0,
+    "prefer-spread": 0,
+    "no-plusplus": 0,
+    "no-bitwise": 0,
+    "comma-dangle": 0,
+    "vars-on-top": 0,
+    "no-continue": 0,
+    "no-param-reassign": 0,
+    "no-multi-assign": 0,
+    "radix": 0,
+    "no-alert": 0,
+    "no-return-await": 0,
+    "no-nested-ternary": 0,
+    "prefer-destructuring": 0,
+    "no-restricted-globals": [2, "event"],
+    "prefer-promise-reject-errors": 0,
+    "import/order": 0,
+    "import/prefer-default-export": 0,
+    "import/no-unresolved": 0,
+    "import/no-cycle": 0,
+    "import/extensions": [
+      2,
+      "ignorePackages",
+      { "ts": "never", "js": "never" }
+    ],
+    "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
+    "object-curly-newline": 0,
+    "default-case": 0,
+    "wc/no-self-class": 0,
+    "@typescript-eslint/camelcase": 0,
+    "@typescript-eslint/ban-ts-ignore": 0,
+    "@typescript-eslint/no-use-before-define": 0,
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-unused-vars": 0,
+    "@typescript-eslint/explicit-function-return-type": 0
+  },
+  "plugins": [
+    "disable",
+    "import",
+    "react",
+    "lit",
+    "prettier",
+    "@typescript-eslint"
+  ],
+  "processor": "disable/disable"
 }

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -3,23 +3,24 @@ name: Request a feature for the UI, Frontend or Lovelace
 about: Request an new feature for the Home Assistant frontend.
 labels: feature request
 ---
+
 <!--
   DO NOT DELETE ANY TEXT from this template!
   Otherwise, your request may be closed without comment.
 -->
+
 ## The request
-<!-- 
+
+<!--
   Describe to our maintainers, the feature you would like to be added.
   Please be clear and concise and, if possible, provide a screenshot or mockup.
 -->
 
-
 ## The alternatives
+
 <!--
   Are you currently using, or have you considered alternatives?
   If so, could you please describe those?
 -->
 
-
 ## Additional information
-

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,7 +2,9 @@
   You are amazing! Thanks for contributing to our project!
   Please, DO NOT DELETE ANY TEXT from this template! (unless instructed).
 -->
+
 ## Breaking change
+
 <!--
   If your PR contains a breaking change for existing users, it is important
   to tell them what breaks, how to make it work again and why we did this.
@@ -11,20 +13,20 @@
   Note: Remove this section if this PR is NOT a breaking change.
 -->
 
-
 ## Proposed change
-<!-- 
+
+<!--
   Describe the big picture of your changes here to communicate to the
   maintainers why we should accept this pull request. If it fixes a bug
   or resolves a feature request, be sure to link to that issue in the
   additional information section.
 -->
 
-
 ## Type of change
+
 <!--
   What type of change does your PR introduce to the Home Assistant frontend?
-  NOTE: Please, check only 1! box! 
+  NOTE: Please, check only 1! box!
   If your PR requires multiple boxes to be checked, you'll most likely need to
   split it into multiple PRs. This makes things easier and faster to code review.
 -->
@@ -36,6 +38,7 @@
 - [ ] Code quality improvements to existing code or addition of tests
 
 ## Example configuration
+
 <!--
   Supplying a configuration snippet, makes it easier for a maintainer to test
   your PR.
@@ -46,16 +49,18 @@
 ```
 
 ## Additional information
+
 <!--
   Details are important, and help maintainers processing your PR.
   Please be sure to fill out additional details, if applicable.
 -->
 
 - This PR fixes or closes issue: fixes #
-- This PR is related to issue: 
+- This PR is related to issue:
-- Link to documentation pull request: 
+- Link to documentation pull request:
 
 ## Checklist
+
 <!--
   Put an `x` in the boxes that apply. You can also fill these out after
   creating the PR. If you're unsure about any of them, don't hesitate to ask.
@@ -74,4 +79,5 @@ If user exposed functionality or configuration variables are added/changed:
 <!--
   Thank you for contributing <3
 -->
+
 [docs-repository]: https://github.com/home-assistant/home-assistant.io

.github/lock.yml

@@ -24,4 +24,4 @@ only: pulls
 
 # Optionally, specify configuration settings just for `issues` or `pulls`
 issues:
-   daysUntilLock: 30
+  daysUntilLock: 30

.prettierignore

@@ -0,0 +1,37 @@
+build
+build-translations/*
+translations/*
+node_modules/*
+npm-debug.log
+.DS_Store
+hass_frontend/*
+.reify-cache
+demo/hademo-icons.html
+
+# Python stuff
+*.py[cod]
+*.egg
+*.egg-info
+
+# venv stuff
+pyvenv.cfg
+pip-selfcheck.json
+venv
+.venv
+lib
+bin
+dist
+
+# vscode
+.vscode/*
+!.vscode/extensions.json
+
+# Cast dev settings 
+src/cast/dev_const.ts
+
+# Secrets
+.lokalise_token
+yarn-error.log
+
+#asdf
+.tool-versions

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
-    "ms-vscode.vscode-typescript-tslint-plugin",
     "esbenp.prettier-vscode",
     "bierner.lit-html",
     "runem.lit-plugin"

cast/src/launcher/entrypoint.ts

@@ -1,5 +1,5 @@
-import "../../../src/resources/ha-style";
-import "../../../src/resources/roboto";
 import "../../../src/components/ha-iconset-svg";
+import "../../../src/resources/ha-style";
 import "../../../src/resources/hass-icons";
+import "../../../src/resources/roboto";
 import "./layout/hc-connect";

cast/src/launcher/layout/hc-cast.ts

@@ -1,51 +1,53 @@
+import "@polymer/iron-icon";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { Auth, Connection } from "home-assistant-js-websocket";
 import {
+  css,
+  CSSResult,
   customElement,
+  html,
   LitElement,
   property,
   TemplateResult,
-  html,
-  CSSResult,
-  css,
 } from "lit-element";
-import { Connection, Auth } from "home-assistant-js-websocket";
-import "@polymer/iron-icon";
-import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-item/paper-icon-item";
-import "../../../../src/components/ha-icon";
-import {
-  enableWrite,
-  askWrite,
-  saveTokens,
-} from "../../../../src/common/auth/token_storage";
-import {
-  ensureConnectedCastSession,
-  castSendShowLovelaceView,
-} from "../../../../src/cast/receiver_messages";
-import "../../../../src/layouts/loading-screen";
 import { CastManager } from "../../../../src/cast/cast_manager";
 import {
-  LovelaceConfig,
+  castSendShowLovelaceView,
-  getLovelaceCollection,
+  ensureConnectedCastSession,
-  getLegacyLovelaceCollection,
+} from "../../../../src/cast/receiver_messages";
-} from "../../../../src/data/lovelace";
+import {
-import "./hc-layout";
+  askWrite,
-import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
+  enableWrite,
-import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
+  saveTokens,
+} from "../../../../src/common/auth/token_storage";
 import { atLeastVersion } from "../../../../src/common/config/version";
+import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
+import "../../../../src/components/ha-icon";
+import {
+  getLegacyLovelaceCollection,
+  getLovelaceCollection,
+  LovelaceConfig,
+} from "../../../../src/data/lovelace";
+import "../../../../src/layouts/loading-screen";
+import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
+import "./hc-layout";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
   @property() public auth!: Auth;
+
   @property() public connection!: Connection;
+
   @property() public castManager!: CastManager;
+
   @property() private askWrite = false;
+
   @property() private lovelaceConfig?: LovelaceConfig | null;
 
   protected render(): TemplateResult {
     if (this.lovelaceConfig === undefined) {
-      return html`
+      return html` <loading-screen></loading-screen>> `;
-        <loading-screen></loading-screen>>
-      `;
     }
 
     const error =
@@ -75,9 +77,7 @@ class HcCast extends LitElement {
             `
           : ""}
         ${error
-          ? html`
+          ? html` <div class="card-content">${error}</div> `
-              <div class="card-content">${error}</div>
-            `
           : !this.castManager.status
           ? html`
               <p class="center-item">

cast/src/launcher/layout/hc-connect.ts

@@ -1,35 +1,35 @@
+import "@material/mwc-button";
+import "@polymer/iron-icon";
+import "@polymer/paper-input/paper-input";
 import {
-  LitElement,
+  Auth,
+  Connection,
+  createConnection,
+  ERR_CANNOT_CONNECT,
+  ERR_HASS_HOST_REQUIRED,
+  ERR_INVALID_AUTH,
+  ERR_INVALID_HTTPS_TO_HTTP,
+  getAuth,
+  getAuthOptions,
+} from "home-assistant-js-websocket";
+import {
+  css,
+  CSSResult,
   customElement,
+  html,
+  LitElement,
   property,
   TemplateResult,
-  html,
-  CSSResult,
-  css,
 } from "lit-element";
-import {
+import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
-  getAuth,
+import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
-  createConnection,
-  Auth,
-  getAuthOptions,
-  ERR_HASS_HOST_REQUIRED,
-  ERR_INVALID_HTTPS_TO_HTTP,
-  Connection,
-  ERR_CANNOT_CONNECT,
-  ERR_INVALID_AUTH,
-} from "home-assistant-js-websocket";
-import "@polymer/iron-icon";
-import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import {
   loadTokens,
   saveTokens,
 } from "../../../../src/common/auth/token_storage";
 import "../../../../src/layouts/loading-screen";
-import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
-import "./hc-layout";
-import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
+import "./hc-layout";
 
 const seeFAQ = (qid) => html`
   See <a href="./faq.html${qid ? `#${qid}` : ""}">the FAQ</a> for more
@@ -61,13 +61,19 @@ const INTRO = html`
 @customElement("hc-connect")
 export class HcConnect extends LitElement {
   @property() private loading = false;
+
   // If we had stored credentials but we cannot connect,
   // show a screen asking retry or logout.
   @property() private cannotConnect = false;
+
   @property() private error?: string | TemplateResult;
+
   @property() private auth?: Auth;
+
   @property() private connection?: Connection;
+
   @property() private castManager?: CastManager | null;
+
   private openDemo = false;
 
   protected render(): TemplateResult {
@@ -92,9 +98,7 @@ export class HcConnect extends LitElement {
     }
 
     if (this.castManager === undefined || this.loading) {
-      return html`
+      return html` <loading-screen></loading-screen> `;
-        <loading-screen></loading-screen>
-      `;
     }
 
     if (this.castManager === null) {
@@ -127,11 +131,7 @@ export class HcConnect extends LitElement {
                 @keydown=${this._handleInputKeyDown}
               ></paper-input>
             </p>
-            ${this.error
+            ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
-              ? html`
-                  <p class="error">${this.error}</p>
-                `
-              : ""}
           </div>
           <div class="card-actions">
             <mwc-button @click=${this._handleDemo}>
@@ -211,7 +211,8 @@ export class HcConnect extends LitElement {
     if (value === "") {
       this.error = "Please enter a Home Assistant URL.";
       return;
-    } else if (value.indexOf("://") === -1) {
+    }
+    if (value.indexOf("://") === -1) {
       this.error =
         "Please enter your full URL, including the protocol part (https://).";
       return;

cast/src/launcher/layout/hc-layout.ts

@@ -1,25 +1,28 @@
-import {
-  customElement,
-  LitElement,
-  TemplateResult,
-  html,
-  CSSResult,
-  css,
-  property,
-} from "lit-element";
 import {
   Auth,
   Connection,
-  HassUser,
   getUser,
+  HassUser,
 } from "home-assistant-js-websocket";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
 import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")
 class HcLayout extends LitElement {
   @property() public subtitle?: string | undefined;
+
   @property() public auth?: Auth;
+
   @property() public connection?: Connection;
+
   @property() public user?: HassUser;
 
   protected render(): TemplateResult {
@@ -37,11 +40,7 @@ class HcLayout extends LitElement {
                         this.auth.data.hassUrl.indexOf("//") + 2
                       )}</a
                     >
-                    ${this.user
+                    ${this.user ? html` – ${this.user.name} ` : ""}
-                      ? html`
-                          – ${this.user.name}
-                        `
-                      : ""}
                   </div>
                 `
               : ""}

cast/src/receiver/cast_context.ts

@@ -1 +1,2 @@
+/* eslint-disable no-undef */
 export const castContext = cast.framework.CastReceiverContext.getInstance();

cast/src/receiver/demo/cast-demo-entities.ts

@@ -1,4 +1,4 @@
-import { Entity, convertEntities } from "../../../../src/fake_data/entity";
+import { convertEntities, Entity } from "../../../../src/fake_data/entity";
 
 export const castDemoEntities: () => Entity[] = () =>
   convertEntities({

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -1,6 +1,6 @@
 import {
-  LovelaceConfig,
   LovelaceCardConfig,
+  LovelaceConfig,
 } from "../../../../src/data/lovelace";
 import { castContext } from "../cast_context";
 

cast/src/receiver/entrypoint.ts

@@ -1,9 +1,10 @@
+/* eslint-disable no-undef */
+import { CAST_NS } from "../../../src/cast/const";
+import { HassMessage } from "../../../src/cast/receiver_messages";
 import "../../../src/resources/custom-card-support";
 import { castContext } from "./cast_context";
-import { ReceivedMessage } from "./types";
-import { HassMessage } from "../../../src/cast/receiver_messages";
 import { HcMain } from "./layout/hc-main";
-import { CAST_NS } from "../../../src/cast/const";
+import { ReceivedMessage } from "./types";
 
 const controller = new HcMain();
 document.body.append(controller);

cast/src/receiver/layout/hc-demo.ts

@@ -1,19 +1,20 @@
-import { HassElement } from "../../../../src/state/hass-element";
+import { customElement, html, property, TemplateResult } from "lit-element";
-import "./hc-lovelace";
+import { mockHistory } from "../../../../demo/src/stubs/history";
-import { customElement, TemplateResult, html, property } from "lit-element";
+import { LovelaceConfig } from "../../../../src/data/lovelace";
 import {
   MockHomeAssistant,
   provideHass,
 } from "../../../../src/fake_data/provide_hass";
+import { HassElement } from "../../../../src/state/hass-element";
 import { HomeAssistant } from "../../../../src/types";
-import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { castDemoEntities } from "../demo/cast-demo-entities";
 import { castDemoLovelace } from "../demo/cast-demo-lovelace";
-import { mockHistory } from "../../../../demo/src/stubs/history";
+import "./hc-lovelace";
 
 @customElement("hc-demo")
 class HcDemo extends HassElement {
   @property() public lovelacePath!: string;
+
   @property() private _lovelaceConfig?: LovelaceConfig;
 
   protected render(): TemplateResult {
@@ -28,6 +29,7 @@ class HcDemo extends HassElement {
       ></hc-lovelace>
     `;
   }
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._initialize();

cast/src/receiver/layout/hc-launch-screen.ts

@@ -1,17 +1,18 @@
 import {
-  LitElement,
-  TemplateResult,
-  html,
-  customElement,
-  CSSResult,
   css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
   property,
+  TemplateResult,
 } from "lit-element";
 import { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
 class HcLaunchScreen extends LitElement {
   @property() public hass?: HomeAssistant;
+
   @property() public error?: string;
 
   protected render(): TemplateResult {
@@ -22,11 +23,7 @@ class HcLaunchScreen extends LitElement {
         />
         <div class="status">
           ${this.hass ? "Connected" : "Not Connected"}
-          ${this.error
+          ${this.error ? html` <p>Error: ${this.error}</p> ` : ""}
-            ? html`
-                <p>Error: ${this.error}</p>
-              `
-            : ""}
         </div>
       </div>
     `;

cast/src/receiver/layout/hc-lovelace.ts

@@ -1,17 +1,17 @@
 import {
-  LitElement,
-  TemplateResult,
-  html,
-  customElement,
-  CSSResult,
   css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
   property,
+  TemplateResult,
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
-import "../../../../src/panels/lovelace/views/hui-view";
-import "../../../../src/panels/lovelace/views/hui-panel-view";
-import { HomeAssistant } from "../../../../src/types";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
+import "../../../../src/panels/lovelace/views/hui-panel-view";
+import "../../../../src/panels/lovelace/views/hui-view";
+import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
 
 @customElement("hc-lovelace")

cast/src/receiver/layout/hc-main.ts

@@ -1,31 +1,31 @@
 import {
-  getAuth,
   createConnection,
+  getAuth,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import { customElement, TemplateResult, html, property } from "lit-element";
+import { customElement, html, property, TemplateResult } from "lit-element";
-import { HassElement } from "../../../../src/state/hass-element";
-import {
-  HassMessage,
-  ConnectMessage,
-  ShowLovelaceViewMessage,
-  GetStatusMessage,
-  ShowDemoMessage,
-} from "../../../../src/cast/receiver_messages";
-import {
-  LovelaceConfig,
-  getLovelaceCollection,
-  fetchResources,
-  LegacyLovelaceConfig,
-  getLegacyLovelaceCollection,
-} from "../../../../src/data/lovelace";
-import "./hc-launch-screen";
-import { castContext } from "../cast_context";
 import { CAST_NS } from "../../../../src/cast/const";
+import {
+  ConnectMessage,
+  GetStatusMessage,
+  HassMessage,
+  ShowDemoMessage,
+  ShowLovelaceViewMessage,
+} from "../../../../src/cast/receiver_messages";
 import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
-import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
-import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 import { atLeastVersion } from "../../../../src/common/config/version";
+import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
+import {
+  fetchResources,
+  getLegacyLovelaceCollection,
+  getLovelaceCollection,
+  LegacyLovelaceConfig,
+  LovelaceConfig,
+} from "../../../../src/data/lovelace";
+import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
+import { HassElement } from "../../../../src/state/hass-element";
+import { castContext } from "../cast_context";
+import "./hc-launch-screen";
 
 let resourcesLoaded = false;
 
@@ -40,6 +40,7 @@ export class HcMain extends HassElement {
   @property() private _error?: string;
 
   private _unsubLovelace?: UnsubscribeFunc;
+
   private _urlPath?: string | null;
 
   public processIncomingMessage(msg: HassMessage) {
@@ -52,16 +53,14 @@ export class HcMain extends HassElement {
     } else if (msg.type === "show_demo") {
       this._handleShowDemo(msg);
     } else {
-      // tslint:disable-next-line: no-console
+      // eslint-disable-next-line no-console
       console.warn("unknown msg type", msg);
     }
   }
 
   protected render(): TemplateResult {
     if (this._showDemo) {
-      return html`
+      return html` <hc-demo .lovelacePath=${this._lovelacePath}></hc-demo> `;
-        <hc-demo .lovelacePath=${this._lovelacePath}></hc-demo>
-      `;
     }
 
     if (

cast/src/receiver/second-load.ts

@@ -1,5 +1,5 @@
 import "web-animations-js/web-animations-next-lite.min";
+import "../../../src/components/ha-iconset-svg";
 import "../../../src/resources/hass-icons";
 import "../../../src/resources/roboto";
-import "../../../src/components/ha-iconset-svg";
 import "./layout/hc-lovelace";

demo/src/configs/arsaboo/index.ts

@@ -1,6 +1,6 @@
 import { DemoConfig } from "../types";
-import { demoLovelaceArsaboo } from "./lovelace";
 import { demoEntitiesArsaboo } from "./entities";
+import { demoLovelaceArsaboo } from "./lovelace";
 import { demoThemeArsaboo } from "./theme";
 
 export const demoArsaboo: DemoConfig = {

demo/src/configs/demo-configs.ts

@@ -21,7 +21,9 @@ export const demoConfigs: Array<() => Promise<DemoConfig>> = [
     ),
 ];
 
-export let selectedDemoConfigIndex: number = 0;
+// eslint-disable-next-line import/no-mutable-exports
+export let selectedDemoConfigIndex = 0;
+// eslint-disable-next-line import/no-mutable-exports
 export let selectedDemoConfig: Promise<DemoConfig> = demoConfigs[
   selectedDemoConfigIndex
 ]();

demo/src/configs/jimpower/index.ts

@@ -1,6 +1,6 @@
 import { DemoConfig } from "../types";
-import { demoLovelaceJimpower } from "./lovelace";
 import { demoEntitiesJimpower } from "./entities";
+import { demoLovelaceJimpower } from "./lovelace";
 import { demoThemeJimpower } from "./theme";
 
 export const demoJimpower: DemoConfig = {

demo/src/configs/kernehed/index.ts

@@ -1,6 +1,6 @@
 import { DemoConfig } from "../types";
-import { demoLovelaceKernehed } from "./lovelace";
 import { demoEntitiesKernehed } from "./entities";
+import { demoLovelaceKernehed } from "./lovelace";
 import { demoThemeKernehed } from "./theme";
 
 export const demoKernehed: DemoConfig = {

demo/src/configs/teachingbirds/index.ts

@@ -1,6 +1,6 @@
 import { DemoConfig } from "../types";
-import { demoLovelaceTeachingbirds } from "./lovelace";
 import { demoEntitiesTeachingbirds } from "./entities";
+import { demoLovelaceTeachingbirds } from "./lovelace";
 import { demoThemeTeachingbirds } from "./theme";
 
 export const demoTeachingbirds: DemoConfig = {

demo/src/configs/types.ts

@@ -1,6 +1,6 @@
+import { LocalizeFunc } from "../../../src/common/translations/localize";
 import { LovelaceConfig } from "../../../src/data/lovelace";
 import { Entity } from "../../../src/fake_data/entity";
-import { LocalizeFunc } from "../../../src/common/translations/localize";
 
 export interface DemoConfig {
   index?: number;

demo/src/custom-cards/card-modder.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { LitElement } from "lit-element";
 import "./card-tools";
 

demo/src/custom-cards/card-tools.js

@@ -1,4 +1,5 @@
-import { LitElement, html } from "lit-element";
+/* eslint-disable */
+import { html, LitElement } from "lit-element";
 
 if (!window.cardTools) {
   const version = 0.2;

demo/src/custom-cards/cast-demo-row.ts

@@ -1,21 +1,20 @@
 import {
-  html,
-  LitElement,
-  TemplateResult,
-  customElement,
-  property,
   css,
   CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
 } from "lit-element";
-
-import "../../../src/components/ha-icon";
-import {
-  LovelaceRow,
-  CastConfig,
-} from "../../../src/panels/lovelace/entity-rows/types";
-import { HomeAssistant } from "../../../src/types";
 import { CastManager } from "../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../src/cast/receiver_messages";
+import "../../../src/components/ha-icon";
+import {
+  CastConfig,
+  LovelaceRow,
+} from "../../../src/panels/lovelace/entity-rows/types";
+import { HomeAssistant } from "../../../src/types";
 
 @customElement("cast-demo-row")
 class CastDemoRow extends LitElement implements LovelaceRow {
@@ -52,6 +51,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
           this.requestUpdate();
         });
         mgr.castContext.addEventListener(
+          // eslint-disable-next-line no-undef
           cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
           (ev) => {
             // On Android, opening a new session always results in SESSION_RESUMED.

demo/src/custom-cards/ha-demo-card.ts

@@ -1,22 +1,32 @@
-import { LitElement, html, CSSResult, css, property } from "lit-element";
-import { until } from "lit-html/directives/until";
 import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
+import {
+  css,
+  CSSResult,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { until } from "lit-html/directives/until";
 import "../../../src/components/ha-card";
-import { LovelaceCard, Lovelace } from "../../../src/panels/lovelace/types";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { Lovelace, LovelaceCard } from "../../../src/panels/lovelace/types";
 import {
   demoConfigs,
   selectedDemoConfig,
-  setDemoConfig,
   selectedDemoConfigIndex,
+  setDemoConfig,
 } from "../configs/demo-configs";
 
 export class HADemoCard extends LitElement implements LovelaceCard {
   @property() public lovelace?: Lovelace;
+
   @property() public hass!: MockHomeAssistant;
+
   @property() private _switching?: boolean;
+
   private _hidden = localStorage.hide_demo_card;
 
   public getCardSize() {
@@ -25,22 +35,21 @@ export class HADemoCard extends LitElement implements LovelaceCard {
 
   public setConfig(
     // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     config: LovelaceCardConfig
-    // tslint:disable-next-line:no-empty
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
   ) {}
 
-  protected render() {
+  protected render(): TemplateResult {
     if (this._hidden) {
-      return;
+      return html``;
     }
     return html`
       <ha-card>
         <div class="picker">
           <div class="label">
             ${this._switching
-              ? html`
+              ? html` <paper-spinner-lite active></paper-spinner-lite> `
-                  <paper-spinner-lite active></paper-spinner-lite>
-                `
               : until(
                   selectedDemoConfig.then(
                     (conf) => html`

demo/src/entrypoint.ts

@@ -1,12 +1,10 @@
 import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
-
-import "../../src/resources/hass-icons";
-import "../../src/resources/ha-style";
-import "../../src/resources/roboto";
 import "../../src/components/ha-iconset-svg";
-
+import "../../src/resources/ha-style";
+import "../../src/resources/hass-icons";
+import "../../src/resources/roboto";
 import "./ha-demo";
 import "./resources/hademo-icons";
 

demo/src/ha-demo.ts

@@ -1,23 +1,23 @@
-import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
+import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
-import {
-  provideHass,
-  MockHomeAssistant,
-} from "../../src/fake_data/provide_hass";
 import { navigate } from "../../src/common/navigate";
-import { mockLovelace } from "./stubs/lovelace";
+import {
-import { mockAuth } from "./stubs/auth";
+  MockHomeAssistant,
+  provideHass,
+} from "../../src/fake_data/provide_hass";
+import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
+import { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
-import { mockTranslations } from "./stubs/translations";
+import { mockAuth } from "./stubs/auth";
+import { mockEvents } from "./stubs/events";
+import { mockFrontend } from "./stubs/frontend";
 import { mockHistory } from "./stubs/history";
+import { mockLovelace } from "./stubs/lovelace";
+import { mockMediaPlayer } from "./stubs/media_player";
+import { mockPersistentNotification } from "./stubs/persistent_notification";
 import { mockShoppingList } from "./stubs/shopping_list";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
-import { mockEvents } from "./stubs/events";
+import { mockTranslations } from "./stubs/translations";
-import { mockMediaPlayer } from "./stubs/media_player";
-import { HomeAssistant } from "../../src/types";
-import { mockFrontend } from "./stubs/frontend";
-import { mockPersistentNotification } from "./stubs/persistent_notification";
-import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 
 class HaDemo extends HomeAssistantAppEl {
   protected async _initialize() {

demo/src/stubs/history.ts

@@ -1,5 +1,5 @@
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { HassEntity } from "home-assistant-js-websocket";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 interface HistoryQueryParams {
   filter_entity_id: string;
@@ -95,7 +95,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
         const numberState = Number(state.state);
 
         if (isNaN(numberState)) {
-          // tslint:disable-next-line
+          // eslint-disable-next-line
           console.log(
             "Ignoring state with unparsable state but with a unit",
             entityId,

demo/src/stubs/lovelace.ts

@@ -1,11 +1,9 @@
-import "../custom-cards/ha-demo-card";
+import type { LocalizeFunc } from "../../../src/common/translations/localize";
-import "../custom-cards/cast-demo-row";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-// Not duplicate, one is for typing.
-// tslint:disable-next-line
-import { HADemoCard } from "../custom-cards/ha-demo-card";
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { selectedDemoConfig } from "../configs/demo-configs";
-import { LocalizeFunc } from "../../../src/common/translations/localize";
+import "../custom-cards/cast-demo-row";
+import "../custom-cards/ha-demo-card";
+import type { HADemoCard } from "../custom-cards/ha-demo-card";
 
 export const mockLovelace = (
   hass: MockHomeAssistant,
@@ -22,12 +20,12 @@ export const mockLovelace = (
 };
 
 customElements.whenDefined("hui-view").then(() => {
-  // tslint:disable-next-line
+  // eslint-disable-next-line
   const HUIView = customElements.get("hui-view");
   // Patch HUI-VIEW to make the lovelace object available to the demo card
   const oldCreateCard = HUIView.prototype.createCardElement;
 
-  HUIView.prototype.createCardElement = function(config) {
+  HUIView.prototype.createCardElement = function (config) {
     const el = oldCreateCard.call(this, config);
     if (el.tagName === "HA-DEMO-CARD") {
       (el as HADemoCard).lovelace = this.lovelace;

demo/src/stubs/persistent_notification.ts

@@ -1,5 +1,5 @@
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { PersistentNotification } from "../../../src/data/persistent_notification";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockPersistentNotification = (hass: MockHomeAssistant) => {
   hass.mockWS("persistent_notification/get", () =>

demo/src/stubs/shopping_list.ts

@@ -1,5 +1,5 @@
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { ShoppingListItem } from "../../../src/data/shopping-list";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 let items: ShoppingListItem[] = [
   {

gallery/src/components/demo-card.js

@@ -1,7 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { safeLoad } from "js-yaml";
-
 import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
 
 class DemoCard extends PolymerElement {

gallery/src/components/demo-cards.js

@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-
+import { html } from "@polymer/polymer/lib/utils/html-tag";
-import "./demo-card";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-switch";
+import "./demo-card";
 
 class DemoCards extends PolymerElement {
   static get template() {

gallery/src/components/demo-more-info.js

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/state-summary/state-card-content";
-import "../../../src/dialogs/more-info/controls/more-info-content";
 import "../../../src/components/ha-card";
+import "../../../src/dialogs/more-info/controls/more-info-content";
+import "../../../src/state-summary/state-card-content";
 
 class DemoMoreInfo extends PolymerElement {
   static get template() {

gallery/src/components/demo-more-infos.js

@@ -1,9 +1,9 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-
+import { html } from "@polymer/polymer/lib/utils/html-tag";
-import "./demo-more-info";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-switch";
+import "./demo-more-info";
 
 class DemoMoreInfos extends PolymerElement {
   static get template() {

gallery/src/demos/demo-hui-alarm-panel-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-conditional-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-entities-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -219,9 +219,7 @@ const CONFIGS = [
 
 class DemoEntities extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-entity-button-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-entity-filter-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -91,9 +91,7 @@ const CONFIGS = [
 
 class DemoFilter extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-gauge-card.ts

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/demo-cards";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("sensor", "brightness", "12", {}),
@@ -78,9 +78,7 @@ const CONFIGS = [
 
 class DemoGaugeEntity extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-glance-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -220,9 +220,7 @@ const CONFIGS = [
 
 class DemoPicEntity extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-iframe-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import "../components/demo-cards";
 
 const CONFIGS = [
@@ -39,9 +39,7 @@ const CONFIGS = [
 
 class DemoIframe extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards configs="[[_configs]]"></demo-cards> `;
-      <demo-cards configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-light-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -51,9 +51,7 @@ const CONFIGS = [
 
 class DemoLightEntity extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-map-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-markdown-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import "../components/demo-cards";
 
 const CONFIGS = [
@@ -254,9 +254,7 @@ const CONFIGS = [
 
 class DemoMarkdown extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards configs="[[_configs]]"></demo-cards> `;
-      <demo-cards configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-media-control-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";

gallery/src/demos/demo-hui-media-player-rows.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";

gallery/src/demos/demo-hui-picture-elements-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -129,9 +129,7 @@ const CONFIGS = [
 
 class DemoPicElements extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-picture-entity-card.ts

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/demo-cards";
-import { provideHass } from "../../../src/fake_data/provide_hass";
 import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("light", "kitchen_lights", "on", {
@@ -82,9 +82,7 @@ const CONFIGS = [
 
 class DemoPicEntity extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-picture-glance-card.ts

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/demo-cards";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("switch", "decorative_lights", "on", {
@@ -123,9 +123,7 @@ const CONFIGS = [
 
 class DemoPicGlance extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-shopping-list-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 
@@ -22,9 +22,7 @@ const CONFIGS = [
 
 class DemoShoppingListEntity extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-stack-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -93,9 +93,7 @@ const CONFIGS = [
 
 class DemoStack extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-hui-thermostat-card.ts

@@ -1,6 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -76,9 +76,7 @@ const CONFIGS = [
 
 class DemoThermostatEntity extends PolymerElement {
   static get template() {
-    return html`
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
-      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-    `;
   }
 
   static get properties() {

gallery/src/demos/demo-more-info-light.ts

@@ -1,14 +1,12 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/dialogs/more-info/controls/more-info-content";
 import "../../../src/components/ha-card";
-
+import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
+import "../../../src/dialogs/more-info/controls/more-info-content";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
-
 import "../components/demo-more-infos";
-import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {

gallery/src/demos/demo-util-long-press.ts

@@ -1,9 +1,8 @@
-import { html, LitElement, TemplateResult } from "lit-element";
 import "@material/mwc-button";
-
+import { html, LitElement, TemplateResult } from "lit-element";
 import "../../../src/components/ha-card";
-import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
+import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";
 
 export class DemoUtilLongPress extends LitElement {
   protected render(): TemplateResult {

gallery/src/entrypoint.js

@@ -1,12 +1,10 @@
 import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
-
-import "../../src/resources/hass-icons";
-import "../../src/resources/ha-style";
-import "../../src/resources/roboto";
 import "../../src/components/ha-iconset-svg";
-
+import "../../src/resources/ha-style";
+import "../../src/resources/hass-icons";
+import "../../src/resources/roboto";
 import "./ha-gallery";
 
 document.body.appendChild(document.createElement("ha-gallery"));

gallery/src/ha-gallery.js

@@ -2,15 +2,16 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../src/managers/notification-manager";
 import "../../src/components/ha-card";
+import "../../src/managers/notification-manager";
 
+// eslint-disable-next-line no-undef
 const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
 
 const fixPath = (path) => path.substr(2, path.length - 5);

hassio/src/addon-store/hassio-addon-repository.ts

@@ -1,29 +1,31 @@
+import "@polymer/paper-card/paper-card";
 import {
   css,
-  TemplateResult,
+  CSSResultArray,
   html,
   LitElement,
   property,
-  CSSResultArray,
+  TemplateResult,
 } from "lit-element";
-import "@polymer/paper-card/paper-card";
 import memoizeOne from "memoize-one";
-
+import { atLeastVersion } from "../../../src/common/config/version";
-import "../components/hassio-card-content";
+import { navigate } from "../../../src/common/navigate";
-import { hassioStyle } from "../resources/hassio-style";
-import { HomeAssistant } from "../../../src/types";
 import {
   HassioAddonInfo,
   HassioAddonRepository,
 } from "../../../src/data/hassio/addon";
-import { navigate } from "../../../src/common/navigate";
+import { HomeAssistant } from "../../../src/types";
+import "../components/hassio-card-content";
 import { filterAndSort } from "../components/hassio-filter-addons";
-import { atLeastVersion } from "../../../src/common/config/version";
+import { hassioStyle } from "../resources/hassio-style";
 
 class HassioAddonRepositoryEl extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public repo!: HassioAddonRepository;
+
   @property() public addons!: HassioAddonInfo[];
+
   @property() public filter!: string;
 
   private _getAddons = memoizeOne(

hassio/src/addon-store/hassio-addon-store.ts

@@ -1,22 +1,22 @@
-import "./hassio-addon-repository";
-import "./hassio-repositories-editor";
-import { TemplateResult, html } from "lit-html";
 import {
-  LitElement,
-  CSSResult,
   css,
+  CSSResult,
+  LitElement,
   property,
   PropertyValues,
 } from "lit-element";
-import { HomeAssistant } from "../../../src/types";
+import { html, TemplateResult } from "lit-html";
 import {
-  HassioAddonRepository,
-  HassioAddonInfo,
   fetchHassioAddonsInfo,
+  HassioAddonInfo,
+  HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
 import "../../../src/layouts/loading-screen";
+import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-search-input";
+import "./hassio-addon-repository";
+import "./hassio-repositories-editor";
 
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
   if (a.slug === "local") {
@@ -36,8 +36,11 @@ const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
 
 class HassioAddonStore extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() private _addons?: HassioAddonInfo[];
+
   @property() private _repos?: HassioAddonRepository[];
+
   @property() private _filter?: string;
 
   public async refreshData() {
@@ -50,9 +53,7 @@ class HassioAddonStore extends LitElement {
 
   protected render(): TemplateResult {
     if (!this._addons || !this._repos) {
-      return html`
+      return html` <loading-screen></loading-screen> `;
-        <loading-screen></loading-screen>
-      `;
     }
     const repos: TemplateResult[] = [];
 

hassio/src/addon-store/hassio-repositories-editor.ts

@@ -1,30 +1,31 @@
-import {
-  LitElement,
-  html,
-  CSSResultArray,
-  css,
-  property,
-  TemplateResult,
-  customElement,
-  PropertyValues,
-} from "lit-element";
 import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
+import {
+  css,
+  CSSResultArray,
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+} from "lit-element";
+import { repeat } from "lit-html/directives/repeat";
 import memoizeOne from "memoize-one";
-
 import "../../../src/components/buttons/ha-call-api-button";
-import "../components/hassio-card-content";
-import { hassioStyle } from "../resources/hassio-style";
-import { HomeAssistant } from "../../../src/types";
 import { HassioAddonRepository } from "../../../src/data/hassio/addon";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
-import { repeat } from "lit-html/directives/repeat";
+import { HomeAssistant } from "../../../src/types";
+import "../components/hassio-card-content";
+import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-repositories-editor")
 class HassioRepositoriesEditor extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public repos!: HassioAddonRepository[];
+
   @property() private _repoUrl = "";
 
   private _sortedRepos = memoizeOne((repos: HassioAddonRepository[]) =>

hassio/src/addon-view/hassio-addon-audio.ts

@@ -1,5 +1,3 @@
-import "web-animations-js/web-animations-next-lite.min";
-
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
@@ -15,39 +13,41 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-
+import "web-animations-js/web-animations-next-lite.min";
-import { HomeAssistant } from "../../../src/types";
 import {
   HassioAddonDetails,
-  setHassioAddonOption,
   HassioAddonSetOptionParams,
+  setHassioAddonOption,
 } from "../../../src/data/hassio/addon";
 import {
-  HassioHardwareAudioDevice,
   fetchHassioHardwareAudio,
+  HassioHardwareAudioDevice,
 } from "../../../src/data/hassio/hardware";
-import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
+import { HomeAssistant } from "../../../src/types";
+import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-addon-audio")
 class HassioAddonAudio extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public addon!: HassioAddonDetails;
+
   @property() private _error?: string;
+
   @property() private _inputDevices?: HassioHardwareAudioDevice[];
+
   @property() private _outputDevices?: HassioHardwareAudioDevice[];
+
   @property() private _selectedInput!: null | string;
+
   @property() private _selectedOutput!: null | string;
 
   protected render(): TemplateResult {
     return html`
       <paper-card heading="Audio">
         <div class="card-content">
-          ${this._error
+          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
 
           <paper-dropdown-menu
             label="Input"
@@ -59,13 +59,13 @@ class HassioAddonAudio extends LitElement {
               .selected=${this._selectedInput}
             >
               ${this._inputDevices &&
-                this._inputDevices.map((item) => {
+              this._inputDevices.map((item) => {
-                  return html`
+                return html`
-                    <paper-item device=${item.device || ""}
+                  <paper-item device=${item.device || ""}
-                      >${item.name}</paper-item
+                    >${item.name}</paper-item
-                    >
+                  >
-                  `;
+                `;
-                })}
+              })}
             </paper-listbox>
           </paper-dropdown-menu>
           <paper-dropdown-menu
@@ -78,13 +78,13 @@ class HassioAddonAudio extends LitElement {
               .selected=${this._selectedOutput}
             >
               ${this._outputDevices &&
-                this._outputDevices.map((item) => {
+              this._outputDevices.map((item) => {
-                  return html`
+                return html`
-                    <paper-item device=${item.device || ""}
+                  <paper-item device=${item.device || ""}
-                      >${item.name}</paper-item
+                    >${item.name}</paper-item
-                    >
+                  >
-                  `;
+                `;
-                })}
+              })}
             </paper-listbox>
           </paper-dropdown-menu>
         </div>

hassio/src/addon-view/hassio-addon-config.ts

@@ -1,5 +1,5 @@
-import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
 import "@material/mwc-button";
+import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
 import "@polymer/paper-card/paper-card";
 import {
   css,
@@ -9,29 +9,30 @@ import {
   LitElement,
   property,
   PropertyValues,
-  TemplateResult,
   query,
+  TemplateResult,
 } from "lit-element";
-
-import { HomeAssistant } from "../../../src/types";
-import {
-  HassioAddonDetails,
-  setHassioAddonOption,
-  HassioAddonSetOptionParams,
-} from "../../../src/data/hassio/addon";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-yaml-editor";
-// tslint:disable-next-line: no-duplicate-imports
+import type { HaYamlEditor } from "../../../src/components/ha-yaml-editor";
-import { HaYamlEditor } from "../../../src/components/ha-yaml-editor";
+import {
+  HassioAddonDetails,
+  HassioAddonSetOptionParams,
+  setHassioAddonOption,
+} from "../../../src/data/hassio/addon";
 import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../src/resources/styles";
+import type { HomeAssistant } from "../../../src/types";
+import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public addon!: HassioAddonDetails;
+
   @property() private _error?: string;
+
   @property({ type: Boolean }) private _configHasChanged = false;
 
   @query("ha-yaml-editor") private _editor!: HaYamlEditor;
@@ -47,16 +48,8 @@ class HassioAddonConfig extends LitElement {
           <ha-yaml-editor
             @value-changed=${this._configChanged}
           ></ha-yaml-editor>
-          ${this._error
+          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-            ? html`
+          ${valid ? "" : html` <div class="errors">Invalid YAML</div> `}
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
-          ${valid
-            ? ""
-            : html`
-                <div class="errors">Invalid YAML</div>
-              `}
         </div>
         <div class="card-actions">
           <mwc-button class="warning" @click=${this._resetTapped}>
@@ -140,8 +133,9 @@ class HassioAddonConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to reset addon configuration, ${err.body?.message ||
+      this._error = `Failed to reset addon configuration, ${
-        err}`;
+        err.body?.message || err
+      }`;
     }
   }
 
@@ -166,8 +160,9 @@ class HassioAddonConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to save addon configuration, ${err.body?.message ||
+      this._error = `Failed to save addon configuration, ${
-        err}`;
+        err.body?.message || err
+      }`;
     }
   }
 }

hassio/src/addon-view/hassio-addon-info.ts

@@ -12,31 +12,29 @@ import {
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
-
+import { atLeastVersion } from "../../../src/common/config/version";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import { navigate } from "../../../src/common/navigate";
 import "../../../src/components/buttons/ha-call-api-button";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-label-badge";
 import "../../../src/components/ha-markdown";
 import "../../../src/components/ha-switch";
-import "../components/hassio-card-content";
-
-import { fireEvent } from "../../../src/common/dom/fire_event";
 import {
+  fetchHassioAddonChangelog,
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   HassioAddonSetSecurityParams,
+  installHassioAddon,
   setHassioAddonOption,
   setHassioAddonSecurity,
   uninstallHassioAddon,
-  installHassioAddon,
-  fetchHassioAddonChangelog,
 } from "../../../src/data/hassio/addon";
-import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-import { navigate } from "../../../src/common/navigate";
+import "../components/hassio-card-content";
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-import { atLeastVersion } from "../../../src/common/config/version";
+import { hassioStyle } from "../resources/hassio-style";
 
 const PERMIS_DESC = {
   rating: {
@@ -94,8 +92,11 @@ const PERMIS_DESC = {
 @customElement("hassio-addon-info")
 class HassioAddonInfo extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public addon!: HassioAddonDetails;
+
   @property() private _error?: string;
+
   @property({ type: Boolean }) private _installing = false;
 
   protected render(): TemplateResult {
@@ -178,9 +179,7 @@ class HassioAddonInfo extends LitElement {
                           ></iron-icon>
                         `}
                   `
-                : html`
+                : html` ${this.addon.version_latest} `}
-                    ${this.addon.version_latest}
-                  `}
             </div>
           </div>
           <div class="description light-color">
@@ -379,11 +378,7 @@ class HassioAddonInfo extends LitElement {
                   : ""}
               `
             : ""}
-          ${this._error
+          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
         </div>
         <div class="card-actions">
           ${this.addon.version
@@ -721,8 +716,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon security option, ${err.body?.message ||
+      this._error = `Failed to set addon security option, ${
-        err}`;
+        err.body?.message || err
+      }`;
     }
   }
 
@@ -756,8 +752,9 @@ class HassioAddonInfo extends LitElement {
         content,
       });
     } catch (err) {
-      this._error = `Failed to get addon changelog, ${err.body?.message ||
+      this._error = `Failed to get addon changelog, ${
-        err}`;
+        err.body?.message || err
+      }`;
     }
   }
 

hassio/src/addon-view/hassio-addon-logs.ts

@@ -7,23 +7,26 @@ import {
   html,
   LitElement,
   property,
-  TemplateResult,
   query,
+  TemplateResult,
 } from "lit-element";
-import { HomeAssistant } from "../../../src/types";
 import {
-  HassioAddonDetails,
   fetchHassioAddonLogs,
+  HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
+import { haStyle } from "../../../src/resources/styles";
+import { HomeAssistant } from "../../../src/types";
 import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
 import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
 
 @customElement("hassio-addon-logs")
 class HassioAddonLogs extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public addon!: HassioAddonDetails;
+
   @property() private _error?: string;
+
   @query("#content") private _logContent!: any;
 
   public async connectedCallback(): Promise<void> {
@@ -34,11 +37,7 @@ class HassioAddonLogs extends LitElement {
   protected render(): TemplateResult {
     return html`
       <paper-card heading="Log">
-        ${this._error
+        ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ? html`
-              <div class="errors">${this._error}</div>
-            `
-          : ""}
         <div class="card-content" id="content"></div>
         <div class="card-actions">
           <mwc-button @click=${this._refresh}>Refresh</mwc-button>

hassio/src/addon-view/hassio-addon-network.ts

@@ -1,4 +1,5 @@
 import "@polymer/paper-card/paper-card";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResult,
@@ -9,18 +10,15 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-
+import { fireEvent } from "../../../src/common/dom/fire_event";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
-
-import { HomeAssistant } from "../../../src/types";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
 } from "../../../src/data/hassio/addon";
-import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
-import { fireEvent } from "../../../src/common/dom/fire_event";
+import { HomeAssistant } from "../../../src/types";
+import { hassioStyle } from "../resources/hassio-style";
 
 interface NetworkItem {
   description: string;
@@ -35,8 +33,11 @@ interface NetworkItemInput extends PaperInputElement {
 @customElement("hassio-addon-network")
 class HassioAddonNetwork extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public addon!: HassioAddonDetails;
+
   @property() private _error?: string;
+
   @property() private _config?: NetworkItem[];
 
   public connectedCallback(): void {
@@ -52,11 +53,7 @@ class HassioAddonNetwork extends LitElement {
     return html`
       <paper-card heading="Network">
         <div class="card-content">
-          ${this._error
+          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
 
           <table>
             <tbody>
@@ -164,8 +161,9 @@ class HassioAddonNetwork extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${err.body
+      this._error = `Failed to set addon network configuration, ${
-        ?.message || err}`;
+        err.body?.message || err
+      }`;
     }
   }
 
@@ -189,8 +187,9 @@ class HassioAddonNetwork extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${err.body
+      this._error = `Failed to set addon network configuration, ${
-        ?.message || err}`;
+        err.body?.message || err
+      }`;
     }
   }
 }

hassio/src/addon-view/hassio-addon-view.ts

@@ -12,15 +12,13 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-
-import { HomeAssistant, Route } from "../../../src/types";
 import {
-  HassioAddonDetails,
   fetchHassioAddonInfo,
+  HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
-import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
-
+import { HomeAssistant, Route } from "../../../src/types";
+import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-addon-audio";
 import "./hassio-addon-config";
 import "./hassio-addon-info";
@@ -30,14 +28,14 @@ import "./hassio-addon-network";
 @customElement("hassio-addon-view")
 class HassioAddonView extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public route!: Route;
+
   @property() public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
-        <paper-spinner-lite active></paper-spinner-lite>
-      `;
     }
     return html`
       <hass-subpage header="Hass.io: add-on details" hassio>

hassio/src/ansi-to-html.ts

@@ -112,7 +112,7 @@ export function parseTextToColoredPre(text) {
 
   /* eslint-disable no-cond-assign */
   let match;
-  // tslint:disable-next-line
+  // eslint-disable-next-line
   while ((match = re.exec(text)) !== null) {
     const j = match!.index;
     addSpan(text.substring(i, j));

hassio/src/components/hassio-card-content.ts

@@ -1,37 +1,44 @@
-import {
-  LitElement,
-  TemplateResult,
-  html,
-  CSSResult,
-  css,
-  property,
-  customElement,
-} from "lit-element";
 import "@polymer/iron-icon/iron-icon";
-
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
 import "../../../src/components/ha-relative-time";
 import { HomeAssistant } from "../../../src/types";
 
 @customElement("hassio-card-content")
 class HassioCardContent extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public title!: string;
+
   @property() public description?: string;
-  @property({ type: Boolean }) public available: boolean = true;
+
-  @property({ type: Boolean }) public showTopbar: boolean = false;
+  @property({ type: Boolean }) public available = true;
+
+  @property({ type: Boolean }) public showTopbar = false;
+
   @property() public topbarClass?: string;
+
   @property() public datetime?: string;
+
   @property() public iconTitle?: string;
+
   @property() public iconClass?: string;
+
   @property() public icon = "hass:help-circle";
+
   @property() public iconImage?: string;
 
   protected render(): TemplateResult {
     return html`
       ${this.showTopbar
-        ? html`
+        ? html` <div class="topbar ${this.topbarClass}"></div> `
-            <div class="topbar ${this.topbarClass}"></div>
-          `
         : ""}
       ${this.iconImage
         ? html`

hassio/src/components/hassio-filter-addons.ts

@@ -1,5 +1,5 @@
-import { HassioAddonInfo } from "../../../src/data/hassio/addon";
 import * as Fuse from "fuse.js";
+import { HassioAddonInfo } from "../../../src/data/hassio/addon";
 
 export function filterAndSort(addons: HassioAddonInfo[], filter: string) {
   const options: Fuse.FuseOptions<HassioAddonInfo> = {

hassio/src/components/hassio-search-input.ts

@@ -1,4 +1,7 @@
-import { TemplateResult, html } from "lit-html";
+import "@material/mwc-button";
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResult,
@@ -6,11 +9,8 @@ import {
   LitElement,
   property,
 } from "lit-element";
+import { html, TemplateResult } from "lit-html";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@material/mwc-button";
 
 @customElement("hassio-search-input")
 class HassioSearchInput extends LitElement {
@@ -30,16 +30,16 @@ class HassioSearchInput extends LitElement {
             class="prefix"
           ></iron-icon>
           ${this.filter &&
-            html`
+          html`
-              <paper-icon-button
+            <paper-icon-button
-                slot="suffix"
+              slot="suffix"
-                class="suffix"
+              class="suffix"
-                @click=${this._clearSearch}
+              @click=${this._clearSearch}
-                icon="hassio:close"
+              icon="hassio:close"
-                alt="Clear"
+              alt="Clear"
-                title="Clear"
+              title="Clear"
-              ></paper-icon-button>
+            ></paper-icon-button>
-            `}
+          `}
         </paper-input>
       </div>
     `;

hassio/src/dashboard/hassio-addons.ts

@@ -8,18 +8,18 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-
-import { HomeAssistant } from "../../../src/types";
-import { HassioAddonInfo } from "../../../src/data/hassio/addon";
-import { navigate } from "../../../src/common/navigate";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import "../components/hassio-card-content";
 import { atLeastVersion } from "../../../src/common/config/version";
+import { navigate } from "../../../src/common/navigate";
+import { HassioAddonInfo } from "../../../src/data/hassio/addon";
+import { haStyle } from "../../../src/resources/styles";
+import { HomeAssistant } from "../../../src/types";
+import "../components/hassio-card-content";
+import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-addons")
 class HassioAddons extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public addons?: HassioAddonInfo[];
 
   protected render(): TemplateResult {

hassio/src/dashboard/hassio-dashboard.ts

@@ -1,27 +1,30 @@
 import {
-  LitElement,
-  TemplateResult,
-  html,
-  CSSResult,
   css,
-  property,
+  CSSResult,
   customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
 } from "lit-element";
-import "./hassio-addons";
-import "./hassio-update";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
-  HassioSupervisorInfo,
   HassioHomeAssistantInfo,
+  HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
+import { haStyle } from "../../../src/resources/styles";
+import { HomeAssistant } from "../../../src/types";
+import "./hassio-addons";
+import "./hassio-update";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public supervisorInfo!: HassioSupervisorInfo;
+
   @property() public hassInfo!: HassioHomeAssistantInfo;
+
   @property() public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult {

hassio/src/dashboard/hassio-update.ts

@@ -1,35 +1,36 @@
-import {
+import "@material/mwc-button";
-  LitElement,
-  TemplateResult,
-  html,
-  CSSResult,
-  css,
-  property,
-  customElement,
-} from "lit-element";
 import "@polymer/iron-icon/iron-icon";
-
+import "@polymer/paper-card/paper-card";
-import { HomeAssistant } from "../../../src/types";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "../../../src/components/buttons/ha-call-api-button";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
-
-import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
-
+import { HomeAssistant } from "../../../src/types";
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import "../../../src/components/buttons/ha-call-api-button";
 import "../components/hassio-card-content";
+import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-update")
 export class HassioUpdate extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public hassInfo: HassioHomeAssistantInfo;
+
   @property() public hassOsInfo?: HassioHassOSInfo;
+
   @property() public supervisorInfo: HassioSupervisorInfo;
+
   @property() private _error?: string;
 
   protected render(): TemplateResult {
@@ -55,9 +56,7 @@ export class HassioUpdate extends LitElement {
     return html`
       <div class="content">
         ${this._error
-          ? html`
+          ? html` <div class="error">Error: ${this._error}</div> `
-              <div class="error">Error: ${this._error}</div>
-            `
           : ""}
         <h1>
           ${updatesAvailable > 1
@@ -113,7 +112,7 @@ export class HassioUpdate extends LitElement {
           ${icon
             ? html`
                 <div class="icon">
-                  <iron-icon .icon="${icon}" />
+                  <iron-icon .icon=${icon}></iron-icon>
                 </div>
               `
             : ""}
@@ -138,7 +137,7 @@ export class HassioUpdate extends LitElement {
     `;
   }
 
-  private _apiCalled(ev) {
+  private _apiCalled(ev): void {
     if (ev.detail.success) {
       this._error = "";
       return;
@@ -146,9 +145,11 @@ export class HassioUpdate extends LitElement {
 
     const response = ev.detail.response;
 
-    typeof response.body === "object"
+    if (typeof response.body === "object") {
-      ? (this._error = response.body.message || "Unknown error")
+      this._error = response.body.message || "Unknown error";
-      : (this._error = response.body);
+    } else {
+      this._error = response.body;
+    }
   }
 
   static get styles(): CSSResult[] {

hassio/src/dialogs/markdown/dialog-hassio-markdown.ts

@@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
+import { PaperDialogElement } from "@polymer/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-icon-button/paper-icon-button";
-import { PaperDialogElement } from "@polymer/paper-dialog";
 import {
   css,
   CSSResult,
@@ -9,21 +9,21 @@ import {
   html,
   LitElement,
   property,
-  TemplateResult,
   query,
+  TemplateResult,
 } from "lit-element";
-
-import { hassioStyle } from "../../resources/hassio-style";
-import { haStyleDialog } from "../../../../src/resources/styles";
-import { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
-
 import "../../../../src/components/dialog/ha-paper-dialog";
 import "../../../../src/components/ha-markdown";
+import { haStyleDialog } from "../../../../src/resources/styles";
+import { hassioStyle } from "../../resources/hassio-style";
+import { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
 
 @customElement("dialog-hassio-markdown")
 class HassioMarkdownDialog extends LitElement {
   @property() public title!: string;
+
   @property() public content!: string;
+
   @query("#dialog") private _dialog!: PaperDialogElement;
 
   public showDialog(params: HassioMarkdownDialogParams) {

hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts

@@ -1,11 +1,11 @@
 import "@material/mwc-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/iron-icon/iron-icon";
+import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
+import { PaperDialogElement } from "@polymer/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
-import { PaperDialogElement } from "@polymer/paper-dialog";
-import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import {
   css,
   CSSResult,
@@ -13,21 +13,19 @@ import {
   html,
   LitElement,
   property,
-  TemplateResult,
   query,
+  TemplateResult,
 } from "lit-element";
-
+import "../../../../src/components/dialog/ha-paper-dialog";
+import { getSignedPath } from "../../../../src/data/auth";
 import {
   fetchHassioSnapshotInfo,
   HassioSnapshotDetail,
 } from "../../../../src/data/hassio/snapshot";
-import { getSignedPath } from "../../../../src/data/auth";
+import { PolymerChangedEvent } from "../../../../src/polymer-types";
-import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
-import { PolymerChangedEvent } from "../../../../src/polymer-types";
+import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
-
-import "../../../../src/components/dialog/ha-paper-dialog";
 
 const _computeFolders = (folders) => {
   const list: Array<{ slug: string; name: string; checked: boolean }> = [];
@@ -75,13 +73,21 @@ interface FolderItem {
 @customElement("dialog-hassio-snapshot")
 class HassioSnapshotDialog extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() private _error?: string;
+
   @property() private snapshot?: HassioSnapshotDetail;
+
   @property() private _folders!: FolderItem[];
+
   @property() private _addons!: AddonItem[];
+
   @property() private _dialogParams?: HassioSnapshotDialogParams;
+
   @property() private _snapshotPassword!: string;
+
   @property() private _restoreHass: boolean | null | undefined = true;
+
   @query("#dialog") private _dialog!: PaperDialogElement;
 
   public async showDialog(params: HassioSnapshotDialogParams) {
@@ -129,8 +135,9 @@ class HassioSnapshotDialog extends LitElement {
         <div>Home Assistant:</div>
         <paper-checkbox
           .checked=${this._restoreHass}
-          @change="${(ev: Event) =>
+          @change="${(ev: Event) => {
-            (this._restoreHass = (ev.target as PaperCheckboxElement).checked)}"
+            this._restoreHass = (ev.target as PaperCheckboxElement).checked;
+          }}"
         >
           Home Assistant ${this.snapshot.homeassistant}
         </paper-checkbox>
@@ -187,11 +194,7 @@ class HassioSnapshotDialog extends LitElement {
               ></paper-input>
             `
           : ""}
-        ${this._error
+        ${this._error ? html` <p class="error">Error: ${this._error}</p> ` : ""}
-          ? html`
-              <p class="error">Error: ${this._error}</p>
-            `
-          : ""}
 
         <div>Actions:</div>
         <ul class="buttons">

hassio/src/hassio-main.ts

@@ -1,39 +1,38 @@
-import { customElement, PropertyValues, property } from "lit-element";
-import { PolymerElement } from "@polymer/polymer";
 import "@polymer/paper-icon-button";
-
+import { PolymerElement } from "@polymer/polymer";
-import "../../src/resources/ha-style";
+import { customElement, property, PropertyValues } from "lit-element";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
+import { navigate } from "../../src/common/navigate";
+import { fetchHassioAddonInfo } from "../../src/data/hassio/addon";
+import {
+  fetchHassioHassOsInfo,
+  fetchHassioHostInfo,
+  HassioHassOSInfo,
+  HassioHostInfo,
+} from "../../src/data/hassio/host";
+import {
+  createHassioSession,
+  fetchHassioHomeAssistantInfo,
+  fetchHassioSupervisorInfo,
+  HassioHomeAssistantInfo,
+  HassioPanelInfo,
+  HassioSupervisorInfo,
+} from "../../src/data/hassio/supervisor";
+import {
+  AlertDialogParams,
+  showAlertDialog,
+} from "../../src/dialogs/generic/show-dialog-box";
+import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
 import {
   HassRouterPage,
   RouterOptions,
 } from "../../src/layouts/hass-router-page";
-import { HomeAssistant } from "../../src/types";
-import {
-  fetchHassioSupervisorInfo,
-  fetchHassioHomeAssistantInfo,
-  HassioSupervisorInfo,
-  HassioHomeAssistantInfo,
-  createHassioSession,
-  HassioPanelInfo,
-} from "../../src/data/hassio/supervisor";
-import {
-  fetchHassioHostInfo,
-  fetchHassioHassOsInfo,
-  HassioHostInfo,
-  HassioHassOSInfo,
-} from "../../src/data/hassio/host";
-import { fetchHassioAddonInfo } from "../../src/data/hassio/addon";
-import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
+import "../../src/resources/ha-style";
+import { HomeAssistant } from "../../src/types";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./hassio-pages-with-tabs";
-import { navigate } from "../../src/common/navigate";
-import {
-  showAlertDialog,
-  AlertDialogParams,
-} from "../../src/dialogs/generic/show-dialog-box";
 
 // The register callback of the IronA11yKeysBehavior inside paper-icon-button
 // is not called, causing _keyBindings to be uninitiliazed for paper-icon-button,
@@ -44,7 +43,9 @@ customElements.get("paper-icon-button").prototype._keyBindings = {};
 @customElement("hassio-main")
 class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
   @property() public hass!: HomeAssistant;
+
   @property() public panel!: HassioPanelInfo;
+
   @property() public narrow!: boolean;
 
   protected routerOptions: RouterOptions = {
@@ -76,9 +77,13 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       },
     },
   };
+
   @property() private _supervisorInfo: HassioSupervisorInfo;
+
   @property() private _hostInfo: HassioHostInfo;
+
   @property() private _hassOsInfo?: HassioHassOSInfo;
+
   @property() private _hassInfo: HassioHomeAssistantInfo;
 
   protected firstUpdated(changedProps: PropertyValues) {

hassio/src/hassio-pages-with-tabs.ts

@@ -1,44 +1,47 @@
-import {
-  LitElement,
-  TemplateResult,
-  html,
-  CSSResultArray,
-  css,
-  customElement,
-  property,
-} from "lit-element";
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
-
+import {
-import "../../src/components/ha-menu-button";
+  css,
-import "../../src/resources/ha-style";
+  CSSResultArray,
-import "./hassio-tabs-router";
+  customElement,
-
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
 import scrollToTarget from "../../src/common/dom/scroll-to-target";
-
+import { navigate } from "../../src/common/navigate";
+import "../../src/components/ha-menu-button";
+import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
+import {
+  HassioHomeAssistantInfo,
+  HassioSupervisorInfo,
+} from "../../src/data/hassio/supervisor";
+import "../../src/resources/ha-style";
 import { haStyle } from "../../src/resources/styles";
 import { HomeAssistant, Route } from "../../src/types";
-import { navigate } from "../../src/common/navigate";
+import "./hassio-tabs-router";
-import { HassioHostInfo, HassioHassOSInfo } from "../../src/data/hassio/host";
-import {
-  HassioSupervisorInfo,
-  HassioHomeAssistantInfo,
-} from "../../src/data/hassio/supervisor";
 
 const HAS_REFRESH_BUTTON = ["store", "snapshots"];
 
 @customElement("hassio-pages-with-tabs")
 class HassioPagesWithTabs extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public narrow!: boolean;
+
   @property() public route!: Route;
+
   @property() public supervisorInfo!: HassioSupervisorInfo;
+
   @property() public hostInfo!: HassioHostInfo;
+
   @property() public hassInfo!: HassioHomeAssistantInfo;
+
   @property() public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult {

hassio/src/hassio-tabs-router.ts

@@ -1,28 +1,32 @@
+import { PolymerElement } from "@polymer/polymer";
+import { customElement, property } from "lit-element";
+import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
+import {
+  HassioHomeAssistantInfo,
+  HassioSupervisorInfo,
+} from "../../src/data/hassio/supervisor";
 import {
   HassRouterPage,
   RouterOptions,
 } from "../../src/layouts/hass-router-page";
-import { customElement, property } from "lit-element";
-import { PolymerElement } from "@polymer/polymer";
 import { HomeAssistant } from "../../src/types";
+import "./addon-store/hassio-addon-store";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./dashboard/hassio-dashboard";
 // Don't codesplit the others, because it breaks the UI when pushed to a Pi
 import "./snapshots/hassio-snapshots";
-import "./addon-store/hassio-addon-store";
 import "./system/hassio-system";
-import { HassioHostInfo, HassioHassOSInfo } from "../../src/data/hassio/host";
-import {
-  HassioSupervisorInfo,
-  HassioHomeAssistantInfo,
-} from "../../src/data/hassio/supervisor";
 
 @customElement("hassio-tabs-router")
 class HassioTabsRouter extends HassRouterPage {
   @property() public hass!: HomeAssistant;
+
   @property() public supervisorInfo: HassioSupervisorInfo;
+
   @property() public hostInfo: HassioHostInfo;
+
   @property() public hassInfo: HassioHomeAssistantInfo;
+
   @property() public hassOsInfo!: HassioHassOSInfo;
 
   protected routerOptions: RouterOptions = {

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -1,33 +1,33 @@
 import {
-  LitElement,
-  customElement,
-  property,
-  TemplateResult,
-  html,
-  PropertyValues,
-  CSSResult,
   css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
 } from "lit-element";
-import { HomeAssistant, Route } from "../../../src/types";
-import { createHassioSession } from "../../../src/data/hassio/supervisor";
 import {
-  HassioAddonDetails,
   fetchHassioAddonInfo,
+  HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
+import { createHassioSession } from "../../../src/data/hassio/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
+import { HomeAssistant, Route } from "../../../src/types";
 
 @customElement("hassio-ingress-view")
 class HassioIngressView extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public route!: Route;
+
   @property() private _addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
     if (!this._addon) {
-      return html`
+      return html` <hass-loading-screen></hass-loading-screen> `;
-        <hass-loading-screen></hass-loading-screen>
-      `;
     }
 
     return html`
@@ -71,7 +71,7 @@ class HassioIngressView extends LitElement {
 
       this._addon = addon;
     } catch (err) {
-      // tslint:disable-next-line
+      // eslint-disable-next-line
       console.error(err);
       alert(err.message || "Unknown error starting ingress.");
       history.back();

hassio/src/snapshots/hassio-snapshots.ts

@@ -1,46 +1,39 @@
-import {
-  LitElement,
-  TemplateResult,
-  html,
-  CSSResultArray,
-  css,
-  property,
-  PropertyValues,
-  customElement,
-} from "lit-element";
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
+import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
-
+import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import "../components/hassio-card-content";
+import {
-import { hassioStyle } from "../resources/hassio-style";
+  css,
-import { haStyle } from "../../../src/resources/styles";
+  CSSResultArray,
-
+  customElement,
-import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
+  html,
-import { HomeAssistant } from "../../../src/types";
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 import {
-  HassioSnapshot,
-  fetchHassioSnapshots,
-  reloadHassioSnapshots,
-  HassioFullSnapshotCreateParams,
-  HassioPartialSnapshotCreateParams,
   createHassioFullSnapshot,
   createHassioPartialSnapshot,
+  fetchHassioSnapshots,
+  HassioFullSnapshotCreateParams,
+  HassioPartialSnapshotCreateParams,
+  HassioSnapshot,
+  reloadHassioSnapshots,
 } from "../../../src/data/hassio/snapshot";
 import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
-import { fireEvent } from "../../../src/common/dom/fire_event";
+import { haStyle } from "../../../src/resources/styles";
-
+import { HomeAssistant } from "../../../src/types";
-// Not duplicate, used for typing
+import "../components/hassio-card-content";
-// tslint:disable-next-line
+import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import { hassioStyle } from "../resources/hassio-style";
-// tslint:disable-next-line
-import { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-// tslint:disable-next-line
-import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 
 interface CheckboxItem {
   slug: string;
@@ -51,13 +44,21 @@ interface CheckboxItem {
 @customElement("hassio-snapshots")
 class HassioSnapshots extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public supervisorInfo!: HassioSupervisorInfo;
+
   @property() private _snapshotName = "";
+
   @property() private _snapshotPassword = "";
+
   @property() private _snapshotHasPassword = false;
+
   @property() private _snapshotType: HassioSnapshot["type"] = "full";
+
   @property() private _snapshots?: HassioSnapshot[] = [];
+
   @property() private _addonList: CheckboxItem[] = [];
+
   @property() private _folderList: CheckboxItem[] = [
     {
       slug: "homeassistant",
@@ -68,7 +69,9 @@ class HassioSnapshots extends LitElement {
     { slug: "share", name: "Share", checked: true },
     { slug: "addons/local", name: "Local add-ons", checked: true },
   ];
+
   @property() private _creatingSnapshot = false;
+
   @property() private _error = "";
 
   public async refreshData() {
@@ -157,9 +160,7 @@ class HassioSnapshots extends LitElement {
                   `
                 : undefined}
               ${this._error !== ""
-                ? html`
+                ? html` <p class="error">${this._error}</p> `
-                    <p class="error">${this._error}</p>
-                  `
                 : undefined}
             </div>
             <div class="card-actions">

hassio/src/system/hassio-host-info.ts

@@ -9,24 +9,25 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-
+import "../../../src/components/buttons/ha-call-api-button";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import {
-  HassioHostInfo as HassioHostInfoType,
-  HassioHassOSInfo,
-} from "../../../src/data/hassio/host";
 import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
+import {
+  HassioHassOSInfo,
+  HassioHostInfo as HassioHostInfoType,
+} from "../../../src/data/hassio/host";
+import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-
+import { hassioStyle } from "../resources/hassio-style";
-import "../../../src/components/buttons/ha-call-api-button";
 
 @customElement("hassio-host-info")
 class HassioHostInfo extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public hostInfo!: HassioHostInfoType;
+
   @property() public hassOsInfo!: HassioHassOSInfo;
+
   @property() private _errors?: string;
 
   public render(): TemplateResult | void {
@@ -69,9 +70,7 @@ class HassioHostInfo extends LitElement {
               `
             : ""}
           ${this._errors
-            ? html`
+            ? html` <div class="errors">Error: ${this._errors}</div> `
-                <div class="errors">Error: ${this._errors}</div>
-              `
             : ""}
         </div>
         <div class="card-actions">

hassio/src/system/hassio-supervisor-info.ts

@@ -9,23 +9,23 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-
 import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/buttons/ha-call-api-button";
 import {
   HassioSupervisorInfo as HassioSupervisorInfoType,
   setSupervisorOption,
   SupervisorOptions,
 } from "../../../src/data/hassio/supervisor";
+import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-
-import "../../../src/components/buttons/ha-call-api-button";
 
 @customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public supervisorInfo!: HassioSupervisorInfoType;
+
   @property() private _errors?: string;
 
   public render(): TemplateResult | void {
@@ -54,9 +54,7 @@ class HassioSupervisorInfo extends LitElement {
             </tbody>
           </table>
           ${this._errors
-            ? html`
+            ? html` <div class="errors">Error: ${this._errors}</div> `
-                <div class="errors">Error: ${this._errors}</div>
-              `
             : ""}
         </div>
         <div class="card-actions">

hassio/src/system/hassio-supervisor-log.ts

@@ -7,20 +7,21 @@ import {
   html,
   LitElement,
   property,
-  TemplateResult,
   query,
+  TemplateResult,
 } from "lit-element";
-
+import { fetchSupervisorLogs } from "../../../src/data/hassio/supervisor";
-import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
-import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-import { fetchSupervisorLogs } from "../../../src/data/hassio/supervisor";
+import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
+import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-supervisor-log")
 class HassioSupervisorLog extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() private _error?: string;
+
   @query("#content") private _logContent!: HTMLDivElement;
 
   public async connectedCallback(): Promise<void> {
@@ -31,11 +32,7 @@ class HassioSupervisorLog extends LitElement {
   public render(): TemplateResult | void {
     return html`
       <paper-card>
-        ${this._error
+        ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ? html`
-              <div class="errors">${this._error}</div>
-            `
-          : ""}
         <div class="card-content" id="content"></div>
         <div class="card-actions">
           <mwc-button @click=${this._refresh}>Refresh</mwc-button>
@@ -73,8 +70,9 @@ class HassioSupervisorLog extends LitElement {
       }
       this._logContent.appendChild(parseTextToColoredPre(content));
     } catch (err) {
-      this._error = `Failed to get supervisor logs, ${err.body?.message ||
+      this._error = `Failed to get supervisor logs, ${
-        err}`;
+        err.body?.message || err
+      }`;
     }
   }
 

hassio/src/system/hassio-system.ts

@@ -8,16 +8,14 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
 import {
-  HassioHostInfo,
   HassioHassOSInfo,
+  HassioHostInfo,
 } from "../../../src/data/hassio/host";
 import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
+import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-
+import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-host-info";
 import "./hassio-supervisor-info";
 import "./hassio-supervisor-log";
@@ -25,8 +23,11 @@ import "./hassio-supervisor-log";
 @customElement("hassio-system")
 class HassioSystem extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public supervisorInfo!: HassioSupervisorInfo;
+
   @property() public hostInfo!: HassioHostInfo;
+
   @property() public hassOsInfo!: HassioHassOSInfo;
 
   public render(): TemplateResult | void {

package.json

@@ -8,8 +8,13 @@
   "version": "1.0.0",
   "scripts": {
     "build": "script/build_frontend",
-    "lint": "eslint src hassio/src gallery/src && tslint 'src/**/*.ts' 'hassio/src/**/*.ts' 'gallery/src/**/*.ts' 'cast/src/**/*.ts' 'test-mocha/**/*.ts' && tsc",
+    "lint:eslint": "eslint '{**/src,src}/**/*.{js,ts,html}' --ignore-path .gitignore",
-    "lint-hassio": "eslint hassio/src && tslint 'hassio/src/**/*.ts'",
+    "format:eslint": "eslint '{**/src,src}/**/*.{js,ts,html}' --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier '{**/src,src}/**/*.{js,ts,json,css,md}' --check",
+    "format:prettier": "prettier '{**/src,src}/**/*.{js,ts,json,css,md}' --write",
+    "lint:types": "tsc",
+    "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:types",
+    "format": "npm run format:eslint && npm run format:prettier",
     "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
     "test": "npm run lint && npm run mocha",
     "docker_build": "sh ./script/docker_run.sh build $npm_package_version",
@@ -110,17 +115,17 @@
     "xss": "^1.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.4",
+    "@babel/core": "^7.9.0",
     "@babel/plugin-external-helpers": "^7.8.3",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-decorators": "^7.8.3",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
-    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-react-jsx": "^7.8.3",
+    "@babel/plugin-transform-react-jsx": "^7.9.4",
-    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-typescript": "^7.8.3",
+    "@babel/preset-typescript": "^7.9.0",
     "@types/chai": "^4.1.7",
     "@types/chromecast-caf-receiver": "^3.0.12",
     "@types/chromecast-caf-sender": "^1.0.1",
@@ -132,17 +137,22 @@
     "@types/memoize-one": "4.1.0",
     "@types/mocha": "^5.2.6",
     "@types/webspeechapi": "^0.0.29",
-    "babel-loader": "^8.0.5",
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
+    "@typescript-eslint/parser": "^2.28.0",
+    "babel-loader": "^8.1.0",
     "chai": "^4.2.0",
     "copy-webpack-plugin": "^5.0.2",
     "del": "^4.0.0",
-    "eslint": "^6.3.0",
+    "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-config-airbnb-typescript": "^7.2.1",
-    "eslint-config-prettier": "^6.2.0",
+    "eslint-config-prettier": "^6.10.1",
-    "eslint-import-resolver-webpack": "^0.11.1",
+    "eslint-import-resolver-webpack": "^0.12.1",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-disable": "^2.0.1",
-    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-lit": "^1.2.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-wc": "^1.2.0",
     "fs-extra": "^7.0.1",
     "gulp": "^4.0.0",
     "gulp-foreach": "^0.1.0",
@@ -160,19 +170,16 @@
     "map-stream": "^0.0.7",
     "merge-stream": "^1.0.1",
     "mocha": "^6.0.2",
+    "npm": "^6.14.4",
     "parse5": "^5.1.0",
-    "prettier": "^1.19.1",
+    "prettier": "^2.0.4",
     "raw-loader": "^2.0.0",
     "reify": "^0.18.1",
     "require-dir": "^1.2.0",
     "sinon": "^7.3.1",
     "terser-webpack-plugin": "^1.2.3",
     "ts-mocha": "^6.0.0",
-    "tslint": "^5.20.1",
+    "typescript": "^3.8.3",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-eslint-rules": "^5.4.0",
-    "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "^3.7.2",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "web-component-tester": "^6.9.2",

src/auth/ha-auth-flow.ts

@@ -1,31 +1,39 @@
+import "@material/mwc-button";
 import {
-  LitElement,
+  css,
+  CSSResult,
   html,
+  LitElement,
   property,
   PropertyValues,
-  CSSResult,
+  TemplateResult,
-  css,
 } from "lit-element";
-import "@material/mwc-button";
 import "../components/ha-form/ha-form";
 import "../components/ha-markdown";
-import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { AuthProvider } from "../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
+import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 
 type State = "loading" | "error" | "step";
 
 class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
   @property() public authProvider?: AuthProvider;
+
   @property() public clientId?: string;
+
   @property() public redirectUri?: string;
+
   @property() public oauth2State?: string;
+
   @property() private _state: State = "loading";
+
   @property() private _stepData: any = {};
+
   @property() private _step?: DataEntryFlowStep;
+
   @property() private _errorMessage?: string;
 
   protected render() {
@@ -40,7 +48,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     super.firstUpdated(changedProps);
 
     if (this.clientId == null || this.redirectUri == null) {
-      // tslint:disable-next-line: no-console
+      // eslint-disable-next-line no-console
       console.error(
         "clientId and redirectUri must not be null",
         this.clientId,
@@ -58,14 +66,14 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     });
   }
 
-  protected updated(changedProps: PropertyValues) {
+  protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
     if (changedProps.has("authProvider")) {
       this._providerChanged(this.authProvider);
     }
   }
 
-  private _renderForm() {
+  private _renderForm(): TemplateResult {
     switch (this._state) {
       case "step":
         if (this._step == null) {
@@ -80,17 +88,15 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
           </div>
         `;
       case "error":
-        return html`
+        return html` <div class="error">Error: ${this._errorMessage}</div> `;
-          <div class="error">Error: ${this._errorMessage}</div>
-        `;
       case "loading":
-        return html`
+        return html` ${this.localize("ui.panel.page-authorize.form.working")} `;
-          ${this.localize("ui.panel.page-authorize.form.working")}
+      default:
-        `;
+        return html``;
     }
   }
 
-  private _renderStep(step: DataEntryFlowStep) {
+  private _renderStep(step: DataEntryFlowStep): TemplateResult {
     switch (step.type) {
       case "abort":
         return html`
@@ -131,13 +137,13 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         method: "DELETE",
         credentials: "same-origin",
       }).catch((err) => {
-        // tslint:disable-next-line: no-console
+        // eslint-disable-next-line no-console
         console.error("Error delete obsoleted auth flow", err);
       });
     }
 
     if (newProvider == null) {
-      // tslint:disable-next-line: no-console
+      // eslint-disable-next-line no-console
       console.error("No auth provider");
       this._state = "error";
       this._errorMessage = this._unknownError();
@@ -170,7 +176,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         this._errorMessage = data.message;
       }
     } catch (err) {
-      // tslint:disable-next-line: no-console
+      // eslint-disable-next-line no-console
       console.error("Error starting auth flow", err);
       this._state = "error";
       this._errorMessage = this._unknownError();
@@ -287,7 +293,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
       }
       await this._updateStep(newStep);
     } catch (err) {
-      // tslint:disable-next-line: no-console
+      // eslint-disable-next-line no-console
       console.error("Error submitting step", err);
       this._state = "error";
       this._errorMessage = this._unknownError();

src/auth/ha-authorize.ts

@@ -1,19 +1,17 @@
-import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import {
-  LitElement,
-  html,
-  PropertyValues,
-  CSSResult,
   css,
+  CSSResult,
+  html,
+  LitElement,
   property,
+  PropertyValues,
 } from "lit-element";
-import "./ha-auth-flow";
 import { AuthProvider, fetchAuthProviders } from "../data/auth";
+import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { registerServiceWorker } from "../util/register-service-worker";
+import "./ha-auth-flow";
 
-import(
+import(/* webpackChunkName: "pick-auth-provider" */ "./ha-pick-auth-provider");
-  /* webpackChunkName: "pick-auth-provider" */ "../auth/ha-pick-auth-provider"
-);
 
 interface QueryParams {
   client_id?: string;
@@ -23,9 +21,13 @@ interface QueryParams {
 
 class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
   @property() public clientId?: string;
+
   @property() public redirectUri?: string;
+
   @property() public oauth2State?: string;
+
   @property() private _authProvider?: AuthProvider;
+
   @property() private _authProviders?: AuthProvider[];
 
   constructor() {
@@ -155,7 +157,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       this._authProviders = authProviders;
       this._authProvider = authProviders[0];
     } catch (err) {
-      // tslint:disable-next-line
+      // eslint-disable-next-line
       console.error("Error loading auth providers", err);
     }
   }

src/auth/ha-pick-auth-provider.ts

@@ -1,10 +1,10 @@
-import { LitElement, html, property } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
+import { html, LitElement, property } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import "../components/ha-icon-next";
 import { AuthProvider } from "../data/auth";
+import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 
 declare global {
   interface HASSDomEvents {

src/cards/ha-history_graph-card.js

@@ -1,11 +1,10 @@
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-
+import { computeStateName } from "../common/entity/compute_state_name";
 import "../components/state-history-charts";
 import "../data/ha-state-history-data";
-
-import { computeStateName } from "../common/entity/compute_state_name";
 import { EventsMixin } from "../mixins/events-mixin";
 
 /*

src/cast/cast_manager.ts

@@ -1,17 +1,17 @@
+/* eslint-disable no-undef, no-console */
+import {
+  CastStateEventData,
+  SessionStateEventData,
+} from "chromecast-caf-receiver/cast.framework";
+import { Auth } from "home-assistant-js-websocket";
 import { castApiAvailable } from "./cast_framework";
-import { CAST_APP_ID, CAST_NS, CAST_DEV } from "./const";
+import { CAST_APP_ID, CAST_DEV, CAST_NS } from "./const";
 import { CAST_DEV_HASS_URL } from "./dev_const";
 import {
   castSendAuth,
   HassMessage as ReceiverMessage,
 } from "./receiver_messages";
-import {
+import { ReceiverStatusMessage, SenderMessage } from "./sender_messages";
-  SessionStateEventData,
-  CastStateEventData,
-  // tslint:disable-next-line: no-implicit-dependencies
-} from "chromecast-caf-receiver/cast.framework";
-import { SenderMessage, ReceiverStatusMessage } from "./sender_messages";
-import { Auth } from "home-assistant-js-websocket";
 
 let managerProm: Promise<CastManager> | undefined;
 
@@ -29,14 +29,14 @@ a user presses the cast button we send auth if not connected yet, then send
 command as usual.
 */
 
-/* tslint:disable:no-console */
-
 type CastEvent = "connection-changed" | "state-changed";
 
 export class CastManager {
   public auth?: Auth;
+
   // If the cast connection is connected to our Hass.
   public status?: ReceiverStatusMessage;
+
   private _eventListeners: { [event: string]: CastEventListener[] } = {};
 
   constructor(auth?: Auth) {

src/cast/receiver_messages.ts

@@ -2,10 +2,9 @@
 
 import { Auth } from "home-assistant-js-websocket";
 import { CastManager } from "./cast_manager";
-
-import { BaseCastMessage } from "./types";
 import { CAST_DEV } from "./const";
 import { CAST_DEV_HASS_URL } from "./dev_const";
+import { BaseCastMessage } from "./types";
 
 export interface GetStatusMessage extends BaseCastMessage {
   type: "get_status";
@@ -60,7 +59,7 @@ export const castSendShowDemo = (cast: CastManager) =>
 
 export const ensureConnectedCastSession = (cast: CastManager, auth: Auth) => {
   if (cast.castConnectedToOurHass) {
-    return;
+    return undefined;
   }
 
   return new Promise((resolve) => {

src/common/dom/apply_themes_on_element.ts

@@ -62,7 +62,7 @@ const processTheme = (
   themes: HomeAssistant["themes"]
 ): ProcessedTheme | undefined => {
   if (!themes.themes[themeName]) {
-    return;
+    return undefined;
   }
   const theme: Theme = {
     ...derivedStyles,

src/common/dom/dynamic-element-directive.ts

@@ -1,4 +1,4 @@
-import { directive, Part, NodePart } from "lit-html";
+import { directive, NodePart, Part } from "lit-html";
 
 export const dynamicElement = directive(
   (tag: string, properties?: { [key: string]: any }) => (part: Part): void => {

src/common/dom/fire_event.ts

@@ -29,7 +29,7 @@
 // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 declare global {
-  // tslint:disable-next-line
+  // eslint-disable-next-line
   interface HASSDomEvents {}
 }