From 2aa1eb97fd209ec532b81772ba4807905abfb9e4 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Thu, 14 May 2020 12:13:06 -0400
Subject: [PATCH] Markdown Card: Fix not rendering on initial load (#5864)

---
 .../lovelace/cards/hui-markdown-card.ts       | 111 ++++++++++--------
 1 file changed, 60 insertions(+), 51 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index 85b6f63841..75ac449ad0 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -14,9 +14,9 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen
 import "../../../components/ha-card";
 import "../../../components/ha-markdown";
 import { subscribeRenderTemplate } from "../../../data/ws-templates";
-import { HomeAssistant } from "../../../types";
-import { LovelaceCard, LovelaceCardEditor } from "../types";
-import { MarkdownCardConfig } from "./types";
+import type { HomeAssistant } from "../../../types";
+import type { LovelaceCard, LovelaceCardEditor } from "../types";
+import type { MarkdownCardConfig } from "./types";
 
 @customElement("hui-markdown-card")
 export class HuiMarkdownCard extends LitElement implements LovelaceCard {
@@ -35,14 +35,14 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     };
   }
 
+  @property() public hass?: HomeAssistant;
+
   @property() private _config?: MarkdownCardConfig;
 
-  @property() private _content?: string = "";
+  @property() private _content = "";
 
   @property() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
 
-  @property() private _hass?: HomeAssistant;
-
   public getCardSize(): number {
     return this._config === undefined
       ? 3
@@ -56,21 +56,19 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       throw new Error("Invalid Configuration: Content Required");
     }
 
+    if (this._config?.content !== config.content) {
+      this._tryDisconnect();
+    }
     this._config = config;
-    this._disconnect().then(() => {
-      if (this._hass) {
-        this._connect();
-      }
-    });
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._tryConnect();
   }
 
   public disconnectedCallback() {
-    this._disconnect();
-  }
-
-  public set hass(hass) {
-    this._hass = hass;
-    this._connect();
+    this._tryDisconnect();
   }
 
   protected render(): TemplateResult {
@@ -93,9 +91,12 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
 
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
-    if (!this._config || !this._hass) {
+    if (!this._config || !this.hass) {
       return;
     }
+
+    this._tryConnect();
+
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     const oldConfig = changedProps.get("_config") as
       | MarkdownCardConfig
@@ -107,45 +108,53 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       oldHass.themes !== this.hass.themes ||
       oldConfig.theme !== this._config.theme
     ) {
-      applyThemesOnElement(this, this._hass.themes, this._config.theme);
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
     }
   }
 
-  private async _connect() {
-    if (!this._unsubRenderTemplate && this._hass && this._config) {
-      this._unsubRenderTemplate = subscribeRenderTemplate(
-        this._hass.connection,
-        (result) => {
-          this._content = result;
+  private async _tryConnect(): Promise<void> {
+    if (
+      this._unsubRenderTemplate !== undefined ||
+      !this.hass ||
+      !this._config
+    ) {
+      return;
+    }
+
+    this._unsubRenderTemplate = subscribeRenderTemplate(
+      this.hass.connection,
+      (result) => {
+        this._content = result;
+      },
+      {
+        template: this._config.content,
+        entity_ids: this._config.entity_id,
+        variables: {
+          config: this._config,
+          user: this.hass.user!.name,
         },
-        {
-          template: this._config.content,
-          entity_ids: this._config.entity_id,
-          variables: {
-            config: this._config,
-            user: this._hass.user!.name,
-          },
-        }
-      );
-      this._unsubRenderTemplate.catch(() => {
-        this._content = this._config!.content;
-        this._unsubRenderTemplate = undefined;
-      });
-    }
+      }
+    );
+    this._unsubRenderTemplate.catch(() => {
+      this._content = this._config!.content;
+      this._unsubRenderTemplate = undefined;
+    });
   }
 
-  private async _disconnect() {
-    if (this._unsubRenderTemplate) {
-      try {
-        const unsub = await this._unsubRenderTemplate;
-        this._unsubRenderTemplate = undefined;
-        await unsub();
-      } catch (e) {
-        if (e.code === "not_found") {
-          // If we get here, the connection was probably already closed. Ignore.
-        } else {
-          throw e;
-        }
+  private async _tryDisconnect(): Promise<void> {
+    if (!this._unsubRenderTemplate) {
+      return;
+    }
+
+    try {
+      const unsub = await this._unsubRenderTemplate;
+      this._unsubRenderTemplate = undefined;
+      unsub();
+    } catch (e) {
+      if (e.code === "not_found") {
+        // If we get here, the connection was probably already closed. Ignore.
+      } else {
+        throw e;
       }
     }
   }