Show which state changed events a template listeners for in dev tools (#6939)

* Show which state changed events a template listeners for in dev tools

* Update src/data/ws-templates.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/data/ws-templates.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* merge

* Update src/panels/lovelace/cards/hui-markdown-card.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* fix string reversal

* Update src/panels/lovelace/cards/hui-markdown-card.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* error to string

* cleanup

* cleanup

* no listeners is probably worth warning about as well

* handle unknown error

* fix error alignment in pre

* fix error alignment in pre

* fix error alignment in pre

* fix error alignment in pre

* reformat

* reformat

* reformat

* fix accidential revert

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* clear error on success

* tweak to not error if listeners are not returned

* Update src/panels/developer-tools/template/developer-tools-template.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/data/ws-templates.ts

@@ -1,20 +1,27 @@
 import { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
 
-interface RenderTemplateResult {
+export interface RenderTemplateResult {
   result: string;
+  listeners: TemplateListeners;
+}
+
+interface TemplateListeners {
+  all: boolean;
+  domains: string[];
+  entities: string[];
 }
 
 export const subscribeRenderTemplate = (
   conn: Connection,
-  onChange: (result: string) => void,
+  onChange: (result: RenderTemplateResult) => void,
   params: {
     template: string;
     entity_ids?: string | string[];
     variables?: object;
   }
 ): Promise<UnsubscribeFunc> => {
-  return conn.subscribeMessage(
+  return conn.subscribeMessage((msg: RenderTemplateResult) => onChange(msg), {
-    (msg: RenderTemplateResult) => onChange(msg.result),
+    type: "render_template",
-    { type: "render_template", ...params }
+    ...params,
-  );
+  });
 };

src/panels/developer-tools/template/developer-tools-template.ts

@@ -13,7 +13,10 @@ import { classMap } from "lit-html/directives/class-map";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-code-editor";
-import { subscribeRenderTemplate } from "../../../data/ws-templates";
+import {
+  subscribeRenderTemplate,
+  RenderTemplateResult,
+} from "../../../data/ws-templates";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 
@@ -44,11 +47,11 @@ class HaPanelDevTemplate extends LitElement {
 
   @property() public narrow!: boolean;
 
-  @internalProperty() private _error = false;
+  @internalProperty() private _error?: string;
 
   @internalProperty() private _rendering = false;
 
-  @internalProperty() private _processed = "";
+  @internalProperty() private _templateResult?: RenderTemplateResult;
 
   @internalProperty() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
 
@@ -139,9 +142,57 @@ class HaPanelDevTemplate extends LitElement {
             .active=${this._rendering}
             size="small"
           ></ha-circular-progress>
-          <pre class="rendered ${classMap({ error: this._error })}">
+
-${this._processed}</pre
+          <pre
-          >
+            class="rendered ${classMap({ error: Boolean(this._error) })}"
+          ><!-- display: block -->${this._error}${this._templateResult
+            ?.result}</pre>
+          ${!this._templateResult?.listeners
+            ? ""
+            : this._templateResult.listeners.all
+            ? html`
+                <span class="all_listeners">
+                  ${this.hass.localize(
+                    "ui.panel.developer-tools.tabs.templates.all_listeners"
+                  )}
+                </span>
+              `
+            : this._templateResult.listeners.domains.length ||
+              this._templateResult.listeners.entities.length
+            ? html`
+                ${this.hass.localize(
+                  "ui.panel.developer-tools.tabs.templates.listeners"
+                )}
+                <ul>
+                  ${this._templateResult.listeners.domains.map(
+                    (domain) =>
+                      html`
+                        <li>
+                          ${this.hass.localize(
+                            "ui.panel.developer-tools.tabs.templates.domain"
+                          )}:
+                          ${domain}
+                        </li>
+                      `
+                  )}
+                  ${this._templateResult.listeners.entities.map(
+                    (entity_id) =>
+                      html`
+                        <li>
+                          ${this.hass.localize(
+                            "ui.panel.developer-tools.tabs.templates.entity"
+                          )}:
+                          ${entity_id}
+                        </li>
+                      `
+                  )}
+                </ul>
+              `
+            : html` <span class="all_listeners">
+                ${this.hass.localize(
+                  "ui.panel.developer-tools.tabs.templates.no_listeners"
+                )}
+              </span>`}
         </div>
       </div>
     `;
@@ -189,6 +240,11 @@ ${this._processed}</pre
           @apply --paper-font-code1;
           clear: both;
           white-space: pre-wrap;
+          background-color: var(--secondary-background-color);
+        }
+
+        .all_listeners {
+          color: var(--warning-color);
         }
 
         .rendered.error {
@@ -210,7 +266,7 @@ ${this._processed}</pre
   private _templateChanged(ev) {
     this._template = ev.detail.value;
     if (this._error) {
-      this._error = false;
+      this._error = undefined;
     }
     this._debounceRender();
   }
@@ -222,7 +278,8 @@ ${this._processed}</pre
       this._unsubRenderTemplate = subscribeRenderTemplate(
         this.hass.connection,
         (result) => {
-          this._processed = result;
+          this._templateResult = result;
+          this._error = undefined;
         },
         {
           template: this._template,
@@ -230,9 +287,10 @@ ${this._processed}</pre
       );
       await this._unsubRenderTemplate;
     } catch (err) {
-      this._error = true;
+      this._error = "Unknown error";
       if (err.message) {
-        this._processed = err.message;
+        this._error = err.message;
+        this._templateResult = undefined;
       }
       this._unsubRenderTemplate = undefined;
     } finally {

src/panels/lovelace/cards/hui-markdown-card.ts

@@ -14,7 +14,10 @@ import { classMap } from "lit-html/directives/class-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import "../../../components/ha-card";
 import "../../../components/ha-markdown";
-import { subscribeRenderTemplate } from "../../../data/ws-templates";
+import {
+  subscribeRenderTemplate,
+  RenderTemplateResult,
+} from "../../../data/ws-templates";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import type { MarkdownCardConfig } from "./types";
@@ -40,7 +43,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
 
   @internalProperty() private _config?: MarkdownCardConfig;
 
-  @internalProperty() private _content = "";
+  @internalProperty() private _templateResult?: RenderTemplateResult;
 
   @internalProperty() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
 
@@ -85,7 +88,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
           class=${classMap({
             "no-header": !this._config.title,
           })}
-          .content="${this._content}"
+          .content="${this._templateResult?.result}"
         ></ha-markdown>
       </ha-card>
     `;
@@ -127,7 +130,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       this._unsubRenderTemplate = subscribeRenderTemplate(
         this.hass.connection,
         (result) => {
-          this._content = result;
+          this._templateResult = result;
         },
         {
           template: this._config.content,
@@ -139,7 +142,10 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
         }
       );
     } catch (_err) {
-      this._content = this._config!.content;
+      this._templateResult = {
+        result: this._config!.content,
+        listeners: { all: false, domains: [], entities: [] },
+      };
       this._unsubRenderTemplate = undefined;
     }
   }

src/translations/en.json

@@ -2729,7 +2729,12 @@
             "reset": "Reset to demo template",
             "jinja_documentation": "Jinja2 template documentation",
             "template_extensions": "Home Assistant template extensions",
-            "unknown_error_template": "Unknown error rendering template"
+            "unknown_error_template": "Unknown error rendering template",
+            "all_listeners": "This template listens for all state changed events.",
+            "no_listeners": "This template does not listen for any state changed events and will not update automatically.",
+            "listeners": "This template listens for the following state changed events:",
+            "entity": "Entity",
+            "domain": "Domain"
           }
         }
       },