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>
2025-07-19 15:26:36 +00:00 · 2020-09-11 14:36:39 -05:00 · 2020-09-11 14:36:39 -05:00 · f18913b5a0
commit f18913b5a0
parent a2cd227f1a
4 changed files with 98 additions and 22 deletions
--- a/src/data/ws-templates.ts
+++ b/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(
-    (msg: RenderTemplateResult) => onChange(msg.result),
-    { type: "render_template", ...params }
-  );
+  return conn.subscribeMessage((msg: RenderTemplateResult) => onChange(msg), {
+    type: "render_template",
+    ...params,
+  });
 };
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/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 {
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/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;
    }
  }
--- a/src/translations/en.json
+++ b/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"
          }
        }
      },