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

This commit is contained in:
Zack Arnett 2020-05-14 12:13:06 -04:00 committed by GitHub
parent 4c43ae7b2f
commit 2aa1eb97fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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");
}
this._config = config;
this._disconnect().then(() => {
if (this._hass) {
this._connect();
if (this._config?.content !== config.content) {
this._tryDisconnect();
}
});
this._config = config;
}
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,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() {
if (!this._unsubRenderTemplate && this._hass && this._config) {
private async _tryConnect(): Promise<void> {
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`