Update dependencies and clean up

Use lit 2.8.0 to match HA frontend version.

Fixes iantrich#91, Closes iantrich#123, Closes iantrich#128, Closes iantrich#129, Closes iantrich#135

Author: PaulSD

.eslintrc.js

@@ -2,19 +2,19 @@ name: "Build"
 
 on:
   push:
-    branches: 
+    branches:
       - master
   pull_request:
-    branches: 
+    branches:
       - master
 
 jobs:
   build:
-    name: Test build
+    name: Build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
       - name: Build
         run: |
-          npm install
+          yarn install
           npm run build

.github/workflows/build.yml

@@ -9,19 +9,16 @@ jobs:
     name: Prepare release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
 
-      # Build
-      - name: Build the file
+      - name: Build
         run: |
           cd /home/runner/work/config-template-card/config-template-card
-          npm install
+          yarn install
           npm run build
 
-      # Upload build file to the releas as an asset.
-      - name: Upload zip to release
-        uses: svenstaro/upload-release-action@v1-release
-
+      - name: Upload as release
+        uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           file: /home/runner/work/config-template-card/config-template-card/dist/config-template-card.js

.github/workflows/release.yml

@@ -0,0 +1,22 @@
+// @ts-check
+
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import globals from 'globals';
+
+export default ts.config(
+  js.configs.recommended,
+  ts.configs.recommended,
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+    languageOptions: {
+      sourceType: 'module',  // Allows for the use of imports
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+        projectService: true,  // TypeScript type checking service
+      },
+    },
+  }
+);

eslint.config.mjs

@@ -15,30 +15,18 @@
   "author": "Ian Richardson <iantrich@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "custom-card-helpers": "^1.7.2",
+    "custom-card-helpers": "^1.9.0",
     "deep-clone-simple": "^1.1.1",
-    "lit": "^3.2.1"
+    "lit": "^2.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.0",
-    "@rollup/plugin-json": "^6.1.0",
+    "rollup": "^4.24.3",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/parser": "^8.8.1",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "prettier": "^3.3.3",
-    "rollup": "^4.24.0",
-    "rollup-plugin-serve": "^1.1.1",
     "rollup-plugin-typescript2": "^0.36.0",
-    "typescript": "~5.5.0"
+    "typescript": "~5.7.3",
+    "rollup-plugin-serve": "^3.0.0",
+    "eslint": "^9.20.1",
+    "typescript-eslint": "^8.24.0"
   },
   "scripts": {
     "start": "rollup -c rollup.config.dev.mjs --watch",

package.json

@@ -21,4 +21,11 @@ export default {
       },
     }),
   ], treeshake: false,
+  moduleContext: {
+    // intl-utils is deprecated but still used by custom-card-helpers.
+    // Until it is removed from custom-card-helpers, silence a Rollup warning related to it:
+    // https://rollupjs.org/troubleshooting/#error-this-is-undefined
+    'node_modules/@formatjs/intl-utils/lib/src/diff.js': 'window',
+    'node_modules/@formatjs/intl-utils/lib/src/resolve-locale.js': 'window',
+  },
 };

rollup.config.dev.mjs

@@ -1,14 +1,21 @@
-import resolve from "@rollup/plugin-node-resolve";
-import typescript from "rollup-plugin-typescript2";
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
 
 export default {
-  input: ["src/config-template-card.ts"],
+  input: ['src/config-template-card.ts'],
   output: {
-    dir: "./dist",
-    format: "es"
+    dir: './dist',
+    format: 'es',
   },
   plugins: [
     resolve(),
     typescript(),
   ], treeshake: false,
+  moduleContext: {
+    // intl-utils is deprecated but still used by custom-card-helpers.
+    // Until it is removed from custom-card-helpers, silence a Rollup warning related to it:
+    // https://rollupjs.org/troubleshooting/#error-this-is-undefined
+    'node_modules/@formatjs/intl-utils/lib/src/diff.js': 'window',
+    'node_modules/@formatjs/intl-utils/lib/src/resolve-locale.js': 'window',
+  },
 };

rollup.config.mjs

@@ -1,5 +1,5 @@
-import { LitElement, html, TemplateResult, PropertyValues } from 'lit-element';
-import { customElement, property, state } from 'lit-element/decorators.js';
+import { LitElement, html, TemplateResult, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import deepClone from 'deep-clone-simple';
 import { computeCardSize, HomeAssistant, LovelaceCard } from 'custom-card-helpers';
 
@@ -17,7 +17,6 @@ console.info(
 export class ConfigTemplateCard extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
   @state() private _config?: ConfigTemplateConfig;
-  /* eslint-disable @typescript-eslint/no-explicit-any */
   @state() private _helpers?: any;
   private _initialized = false;
 
@@ -68,7 +67,6 @@ export class ConfigTemplateCard extends LitElement {
   }
 
   private getLovelaceConfig() {
-    /* eslint-disable @typescript-eslint/no-explicit-any */
     const panel = this.getLovelacePanel() as any;
 
     if (panel && panel.lovelace && panel.lovelace.config && panel.lovelace.config.config_template_card_vars) {
@@ -93,7 +91,7 @@ export class ConfigTemplateCard extends LitElement {
       if (oldHass) {
         for (const entity of this._config.entities) {
           const evaluatedTemplate = this._evaluateTemplate(entity);
-          if (Boolean(this.hass && oldHass.states[evaluatedTemplate] !== this.hass.states[evaluatedTemplate])) {
+          if (this.hass && oldHass.states[evaluatedTemplate] !== this.hass.states[evaluatedTemplate]) {
             return true;
           }
         }
@@ -152,9 +150,11 @@ export class ConfigTemplateCard extends LitElement {
           this.style.setProperty(prop, style[prop]);
         });
       }
-      if (config.style) {
+      if (config?.style) {
         Object.keys(config.style).forEach((prop) => {
-          element.style.setProperty(prop, config.style[prop]);
+          if (config.style) {  // TypeScript requires a redundant check here, not sure why
+            element.style.setProperty(prop, config.style[prop]);
+          }
         });
       }
     }
@@ -170,11 +170,9 @@ export class ConfigTemplateCard extends LitElement {
   }
 
   private async loadCardHelpers(): Promise<void> {
-    /* eslint-disable @typescript-eslint/no-explicit-any */
     this._helpers = await (window as any).loadCardHelpers();
   }
 
-  /* eslint-disable @typescript-eslint/no-explicit-any */
   private _evaluateConfig(config: any): any {
     Object.entries(config).forEach((entry) => {
       const key = entry[0];
@@ -194,7 +192,6 @@ export class ConfigTemplateCard extends LitElement {
     return config;
   }
 
-  /* eslint-disable @typescript-eslint/no-explicit-any */
   private _evaluateArray(array: any): any {
     for (let i = 0; i < array.length; ++i) {
       const value = array[i];

src/config-template-card.ts

@@ -1,11 +1,15 @@
 import { LovelaceCardConfig, EntitiesCardEntityConfig, LovelaceElementConfigBase } from 'custom-card-helpers';
 
+interface StyleMixin {
+  style?: Record<string, string>;
+}
+
 export interface ConfigTemplateConfig {
   type: string;
   entities: string[];
-  variables?: string[] | { [key: string]: string };
-  card?: LovelaceCardConfig;
-  row?: EntitiesCardEntityConfig;
-  element?: LovelaceElementConfigBase;
+  variables?: Record<string, any> | any[];
+  card?: LovelaceCardConfig & StyleMixin;
+  row?: EntitiesCardEntityConfig & StyleMixin;
+  element?: LovelaceElementConfigBase & StyleMixin;
   style?: Record<string, string>;
 }

src/types.ts

@@ -9,6 +9,7 @@
       "dom.iterable"
     ],
     "noEmit": true,
+    "sourceMap": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
@@ -18,4 +19,4 @@
     "resolveJsonModule": true,
     "experimentalDecorators": true
   }
-}
+}