From 4552f10d96b61f2cc2b56c6444e6cf9b12a50798 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 22 Oct 2020 12:32:51 +0200
Subject: [PATCH 1/2] Print the type of the response and stringify objects

---
 .../template/developer-tools-template.ts      | 36 ++++++++++++++-----
 src/translations/en.json                      |  1 +
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index a44755deb548..231e26fdd62b 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -82,6 +82,13 @@ class HaPanelDevTemplate extends LitElement {
   }
 
   protected render() {
+    const type = typeof this._templateResult?.result;
+    const resultType =
+      type === "object"
+        ? Array.isArray(this._templateResult?.result)
+          ? "list"
+          : "dict"
+        : type;
     return html`
       <div
         class="content ${classMap({
@@ -141,16 +148,27 @@ class HaPanelDevTemplate extends LitElement {
         </div>
 
         <div class="render-pane">
-          <ha-circular-progress
-            class="render-spinner"
-            .active=${this._rendering}
-            size="small"
-          ></ha-circular-progress>
-
+          ${this._rendering
+            ? html`<ha-circular-progress
+                class="render-spinner"
+                active
+                size="small"
+              ></ha-circular-progress>`
+            : ""}
+          ${this._templateResult
+            ? html`${this.hass.localize(
+                "ui.panel.developer-tools.tabs.templates.result_type"
+              )}:
+              ${resultType}`
+            : ""}
           <pre
-            class="rendered ${classMap({ error: Boolean(this._error) })}"
-          ><!-- display: block -->${this._error}${this._templateResult
-            ?.result}</pre>
+            class="rendered ${classMap({
+              error: Boolean(this._error),
+              [resultType]: resultType,
+            })}"
+          ><!-- display: block -->${this._error}${type === "object"
+            ? JSON.stringify(this._templateResult!.result, null, 2)
+            : this._templateResult?.result}</pre>
           ${this._templateResult?.listeners.time
             ? html`
                 <p>
diff --git a/src/translations/en.json b/src/translations/en.json
index 284f5745136b..f0e50d3d9266 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2956,6 +2956,7 @@
             "description": "Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.",
             "editor": "Template editor",
             "reset": "Reset to demo template",
+            "result_type": "Result type",
             "jinja_documentation": "Jinja2 template documentation",
             "template_extensions": "Home Assistant template extensions",
             "unknown_error_template": "Unknown error rendering template",

From 905cdcb668576b43f06c2ec1fd94ef055f0fc6f4 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 22 Oct 2020 23:34:15 +0200
Subject: [PATCH 2/2] Change comment prettier ignore

---
 .../developer-tools/template/developer-tools-template.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index 231e26fdd62b..564f08f9844b 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -161,12 +161,13 @@ class HaPanelDevTemplate extends LitElement {
               )}:
               ${resultType}`
             : ""}
+          <!-- prettier-ignore -->
           <pre
             class="rendered ${classMap({
-              error: Boolean(this._error),
-              [resultType]: resultType,
-            })}"
-          ><!-- display: block -->${this._error}${type === "object"
+            error: Boolean(this._error),
+            [resultType]: resultType,
+          })}"
+          >${this._error}${type === "object"
             ? JSON.stringify(this._templateResult!.result, null, 2)
             : this._templateResult?.result}</pre>
           ${this._templateResult?.listeners.time