Markdown Card: Fix not rendering on initial load (#5864)

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 type { HomeAssistant } from "../../../types";
-import { LovelaceCard, LovelaceCardEditor } from "../types";
+import type { LovelaceCard, LovelaceCardEditor } from "../types";
-import { MarkdownCardConfig } 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");
     }
 
-    this._config = config;
+    if (this._config?.content !== config.content) {
-    this._disconnect().then(() => {
+      this._tryDisconnect();
-      if (this._hass) {
-        this._connect();
     }
-    });
+    this._config = config;
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._tryConnect();
   }
 
   public disconnectedCallback() {
-    this._disconnect();
+    this._tryDisconnect();
-  }
-
-  public set hass(hass) {
-    this._hass = hass;
-    this._connect();
   }
 
   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,14 +108,21 @@ 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() {
+  private async _tryConnect(): Promise<void> {
-    if (!this._unsubRenderTemplate && this._hass && this._config) {
+    if (
+      this._unsubRenderTemplate !== undefined ||
+      !this.hass ||
+      !this._config
+    ) {
+      return;
+    }
+
     this._unsubRenderTemplate = subscribeRenderTemplate(
-        this._hass.connection,
+      this.hass.connection,
       (result) => {
         this._content = result;
       },
@@ -123,7 +131,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
         entity_ids: this._config.entity_id,
         variables: {
           config: this._config,
-            user: this._hass.user!.name,
+          user: this.hass.user!.name,
         },
       }
     );
@@ -132,14 +140,16 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       this._unsubRenderTemplate = undefined;
     });
   }
+
+  private async _tryDisconnect(): Promise<void> {
+    if (!this._unsubRenderTemplate) {
+      return;
     }
 
-  private async _disconnect() {
-    if (this._unsubRenderTemplate) {
     try {
       const unsub = await this._unsubRenderTemplate;
       this._unsubRenderTemplate = undefined;
-        await unsub();
+      unsub();
     } catch (e) {
       if (e.code === "not_found") {
         // If we get here, the connection was probably already closed. Ignore.
@@ -148,7 +158,6 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       }
     }
   }
-  }
 
   static get styles(): CSSResult {
     return css`