Maintenance

.eslintrc.js

@@ -1,16 +1,14 @@
 module.exports = {
-    parser: '@typescript-eslint/parser',  // Specifies the ESLint parser
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
-    extends: [
-        'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-        'prettier/@typescript-eslint',  // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-        'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-    ],
     parserOptions: {
-        ecmaVersion: 2018,  // Allows for the parsing of modern ECMAScript features
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
-        sourceType: 'module',  // Allows for the use of imports
+        sourceType: "module" // Allows for the use of imports
-        experimentalDecorators: true,
     },
+    extends: [
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    ],
     rules: {
-        "@typescript-eslint/camelcase": 0
+        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
     }
 };

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: "Build"
+name: 'Build'
 
 on:
   push:

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Custom cards for Home Assistant
+Copyright (c) 2020 Custom cards for Home Assistant
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -54,7 +54,6 @@ Clone this repository
 Install necessary modules (verified to work in node 8.x)
 `yarn install` or `npm install`
 
-
 ### Step 3
 
 Do a test lint & build on the project. You can see available scripts in the package.json
@@ -68,7 +67,6 @@ Search the repository for all instances of "TODO" and handle the changes/suggest
 
 Customize to suit your needs and contribute it back to the community
 
-
 ## Starting a new card from boilerplate-card with [devcontainer][devcontainer]
 
 Note: this is available only in vscode ensure you have the [Remote Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension installed.
@@ -81,7 +79,7 @@ Note: this is available only in vscode ensure you have the [Remote Containers](h
    `resources:`
 
 ```yaml
-- url: "http://127.0.0.1:5000/boilerplate-card.js"
+- url: 'http://127.0.0.1:5000/boilerplate-card.js'
   type: module
 ```
 
@@ -95,7 +93,9 @@ If you need a fresh test instance you can install a fresh Home Assistant instanc
 2. Home Assistant will install and will eventually be running on port `9123`
 
 ## [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
+
 NB This will not work with node 9.x if you see the following errors try installing node 8.10.0
+
 ```yarn install
 yarn install v1.3.2
 [1/4] 🔍  Resolving packages...

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boilerplate-card",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Lovelace boilerplate-card",
   "keywords": [
     "home-assistant",
@@ -15,33 +15,33 @@
   "author": "Ian Richardson <iantrich@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "custom-card-helpers": "^1.6.3",
+    "custom-card-helpers": "^1.6.6",
-    "home-assistant-js-websocket": "^4.4.0",
+    "home-assistant-js-websocket": "^4.5.0",
-    "lit-element": "^2.2.1",
+    "lit-element": "^2.4.0",
-    "lit-html": "^1.1.2"
+    "lit-html": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
+    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.4.0",
+    "@babel/plugin-proposal-decorators": "^7.12.1",
     "@rollup/plugin-json": "^4.1.0",
-    "@typescript-eslint/eslint-plugin": "^2.6.0",
+    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.6.0",
+    "@typescript-eslint/parser": "^2.34.0",
-    "eslint": "^6.6.0",
+    "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^6.5.0",
+    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-prettier": "^3.1.4",
     "prettier": "^1.19.1",
-    "rollup": "^1.26.0",
+    "rollup": "^1.32.1",
-    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-serve": "^1.0.1",
+    "rollup-plugin-serve": "^1.1.0",
-    "rollup-plugin-terser": "^5.1.2",
+    "rollup-plugin-terser": "^5.3.1",
     "rollup-plugin-typescript2": "^0.24.3",
-    "rollup-plugin-uglify": "^6.0.3",
+    "rollup-plugin-uglify": "^6.0.4",
-    "typescript": "^3.6.4"
+    "typescript": "^3.9.7"
   },
   "scripts": {
     "start": "rollup -c rollup.config.dev.js --watch",

src/action-handler-directive.ts

@@ -22,6 +22,7 @@ declare global {
 class ActionHandler extends HTMLElement implements ActionHandler {
   public holdTime = 500;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public ripple: any;
 
   protected timer?: number;

src/boilerplate-card.ts

@@ -1,4 +1,15 @@
-import { LitElement, html, customElement, property, CSSResult, TemplateResult, css, PropertyValues } from 'lit-element';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  LitElement,
+  html,
+  customElement,
+  property,
+  CSSResult,
+  TemplateResult,
+  css,
+  PropertyValues,
+  internalProperty,
+} from 'lit-element';
 import {
   HomeAssistant,
   hasConfigOrEntityChanged,
@@ -43,8 +54,8 @@ export class BoilerplateCard extends LitElement {
   }
 
   // TODO Add any properities that should cause your element to re-render here
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
-  @property() private config!: BoilerplateCardConfig;
+  @internalProperty() private config!: BoilerplateCardConfig;
 
   public setConfig(config: BoilerplateCardConfig): void {
     // TODO Check for required fields and that they are of the proper format

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.2.0';
+export const CARD_VERSION = '1.3.0';

src/editor.ts

@@ -1,4 +1,15 @@
-import { LitElement, html, customElement, property, TemplateResult, CSSResult, css } from 'lit-element';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/camelcase */
+import {
+  LitElement,
+  html,
+  customElement,
+  property,
+  TemplateResult,
+  CSSResult,
+  css,
+  internalProperty,
+} from 'lit-element';
 import { HomeAssistant, fireEvent, LovelaceCardEditor, ActionConfig } from 'custom-card-helpers';
 
 import { BoilerplateCardConfig } from './types';
@@ -46,10 +57,10 @@ const options = {
 
 @customElement('boilerplate-card-editor')
 export class BoilerplateCardEditor extends LitElement implements LovelaceCardEditor {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
-  @property() private _config?: BoilerplateCardConfig;
+  @internalProperty() private _config?: BoilerplateCardConfig;
-  @property() private _toggle?: boolean;
+  @internalProperty() private _toggle?: boolean;
-  @property() private _helpers?: any;
+  @internalProperty() private _helpers?: any;
   private _initialized = false;
 
   public setConfig(config: BoilerplateCardConfig): void {
@@ -67,59 +78,31 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
   }
 
   get _name(): string {
-    if (this._config) {
+    return this._config?.name || '';
-      return this._config.name || '';
-    }
-
-    return '';
   }
 
   get _entity(): string {
-    if (this._config) {
+    return this._config?.entity || '';
-      return this._config.entity || '';
-    }
-
-    return '';
   }
 
   get _show_warning(): boolean {
-    if (this._config) {
+    return this._config?.show_warning || false;
-      return this._config.show_warning || false;
-    }
-
-    return false;
   }
 
   get _show_error(): boolean {
-    if (this._config) {
+    return this._config?.show_error || false;
-      return this._config.show_error || false;
-    }
-
-    return false;
   }
 
   get _tap_action(): ActionConfig {
-    if (this._config) {
+    return this._config?.tap_action || { action: 'more-info' };
-      return this._config.tap_action || { action: 'more-info' };
-    }
-
-    return { action: 'more-info' };
   }
 
   get _hold_action(): ActionConfig {
-    if (this._config) {
+    return this._config?.hold_action || { action: 'none' };
-      return this._config.hold_action || { action: 'none' };
-    }
-
-    return { action: 'none' };
   }
 
   get _double_tap_action(): ActionConfig {
-    if (this._config) {
+    return this._config?.double_tap_action || { action: 'none' };
-      return this._config.double_tap_action || { action: 'none' };
-    }
-
-    return { action: 'none' };
   }
 
   protected render(): TemplateResult | void {

src/localize/localize.ts

@@ -1,16 +1,16 @@
 import * as en from './languages/en.json';
 import * as nb from './languages/nb.json';
 
-var languages: any = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const languages: any = {
   en: en,
   nb: nb,
 };
 
-export function localize(string: string, search: string = '', replace: string = '') {
+export function localize(string: string, search = '', replace = ''): string {
-
   const lang = (localStorage.getItem('selectedLanguage') || 'en').replace(/['"]+/g, '').replace('-', '_');
 
-  var translated: string;
+  let translated: string;
 
   try {
     translated = string.split('.').reduce((o, i) => o[i], languages[lang]);

tsconfig.json

@@ -3,7 +3,11 @@
     "target": "es2017",
     "module": "esnext",
     "moduleResolution": "node",
-    "lib": ["es2017", "dom", "dom.iterable"],
+    "lib": [
+      "es2017",
+      "dom",
+      "dom.iterable"
+    ],
     "noEmit": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,