🚀Only update on relevant state changes

README.md

@@ -20,6 +20,7 @@ This card is for [Lovelace](https://www.home-assistant.io/lovelace) on [Home Ass
 | ---- | ---- | ------- | -----------
 | type | string | **Required** | `custom:config-template-card`
 | config | object | **Required** | Card object
+| entities | list | **Optional** | List of entity strings that should be watched for updates
 
 ## Installation
 
@@ -57,6 +58,11 @@ Add a custom element in your `ui-lovelace.yaml` or in the UI Editor as a Manual
 
 ```yaml
 type: 'custom:config-template-card'
+entities:
+  - light.bed_light
+  - cover.garage_door
+  - alarm_control_panel.ha_alarm
+  - climate.ecobee
 config:
   type: "${states['light.bed_light'].state === 'on' ? 'custom:hui-glance-card' : 'custom:hui-entities-card'}"
   entities:

dist/config-template-card.js

@@ -2291,6 +2291,20 @@ let ConfigTemplateCard = class ConfigTemplateCard extends LitElement {
         }
         this._config = config;
     }
+    shouldUpdate(changedProps) {
+        if (changedProps.has("_config") || !this._config.entities) {
+            return true;
+        }
+        const oldHass = changedProps.get("hass");
+        if (oldHass) {
+            let changed = false;
+            this._config.entities.forEach(entity => {
+                changed = changed || oldHass.states[entity] !== this.hass.states[entity];
+            });
+            return changed;
+        }
+        return true;
+    }
     render() {
         if (!this._config || !this.hass) {
             return html ``;

src/config-template-card.ts

@@ -3,7 +3,8 @@ import {
   html,
   customElement,
   property,
-  TemplateResult
+  TemplateResult,
+  PropertyValues
 } from "lit-element";
 import deepClone from "deep-clone-simple";
 
@@ -24,6 +25,25 @@ class ConfigTemplateCard extends LitElement {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.has("_config") || !this._config!.entities) {
+      return true;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    if (oldHass) {
+      let changed = false;
+      this._config!.entities.forEach(entity => {
+        changed = changed || oldHass.states[entity] !== this.hass!.states[entity]
+      });
+
+      return changed;
+    }
+
+    return true;
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/types.ts

@@ -9,6 +9,7 @@ import {
 
 export interface ConfigTemplateConfig {
   type: string;
+  entities?: string[];
   config?: any;
 }