Custom Card rendering when no longer presented? - lit-element

Question

I'm new to building custom cards for HASS so this might be obvious.
I have a basic clock card and I have put a console message on the render method - it seems to be writing to the log even when the card is no longer being presented? (i.e. you've moved to another lovelace view).
I'm using a setTimeout to trigger a property change - am I meant to stop the timeout at some point of the lifecycle, or is there some teardown in the lifecycle, etc?
Here's my code:
/* eslint-disable #typescript-eslint/no-explicit-any */
import {
LitElement,
html,
customElement,
property,
CSSResult,
TemplateResult,
css,
PropertyValues,
internalProperty,
} from 'lit-element';
import {
HomeAssistant,
hasConfigOrEntityChanged,
hasAction,
ActionHandlerEvent,
handleAction,
LovelaceCardEditor,
getLovelace,
LovelaceCard,
} from 'custom-card-helpers'; // This is a community maintained npm module with common helper functions/types
import { hass, provideHass } from "card-tools/src/hass";
import './editor';
import type { BoilerplateCardConfig } from './types';
import { actionHandler } from './action-handler-directive';
import { CARD_VERSION } from './const';
import { localize } from './localize/localize';
/* eslint no-console: 0 */
console.info(
`%c BOILERPLATE-CARD \n%c ${localize('common.version')} ${CARD_VERSION} `,
'color: orange; font-weight: bold; background: black',
'color: white; font-weight: bold; background: dimgray',
);
// This puts your card into the UI card picker dialog
(window as any).customCards = (window as any).customCards || [];
(window as any).customCards.push({
type: 'boilerplate-card',
name: 'Boilerplate Card',
description: 'A template custom card for you to create something awesome',
});
// TODO Name your custom element
#customElement('boilerplate-card')
export class BoilerplateCard extends LitElement {
CUSTOM_TYPE_PREFIX = "custom:";
constructor() {
super();
this.date = new Date();
setInterval(() => {
this.date = new Date();
}, 1000);
}
public static async getConfigElement(): Promise<LovelaceCardEditor> {
return document.createElement('boilerplate-card-editor');
}
public static getStubConfig(): object {
return {};
}
// TODO Add any properities that should cause your element to re-render here
// https://lit-element.polymer-project.org/guide/properties
#property({ attribute: false }) public hass!: HomeAssistant;
#internalProperty() private date: Date;
#internalProperty() private config!: BoilerplateCardConfig;
// https://lit-element.polymer-project.org/guide/properties#accessors-custom
public setConfig(config: BoilerplateCardConfig): void {
// TODO Check for required fields and that they are of the proper format
if (!config) {
throw new Error(localize('common.invalid_configuration'));
}
if (config.test_gui) {
getLovelace().setEditMode(true);
}
this.config = {
name: 'Boilerplate',
...config,
};
}
// https://lit-element.polymer-project.org/guide/lifecycle#shouldupdate
protected shouldUpdate(changedProps: PropertyValues): boolean {
return hasConfigOrEntityChanged(this, changedProps, true);
}
// https://lit-element.polymer-project.org/guide/templates
protected render(): TemplateResult | void {
const timeFormatter: Intl.DateTimeFormatOptions = {
year: undefined,
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false,
}
console.info("Draw")
return html`
<ha-card
.header=${this.config.name}
.actionHandler=${actionHandler({
hasHold: hasAction(this.config.hold_action),
hasDoubleClick: hasAction(this.config.double_tap_action),
})}
tabindex="0"
.label=${`Boilerplate: ${this.config.entity || 'No Entity Defined'}`}
>
<h1>${new Intl.DateTimeFormat(undefined, timeFormatter).format(this.date)}</h1>
${this.config.cards.map((card) => {
let tag = card.type;
if (tag.startsWith(this.CUSTOM_TYPE_PREFIX)) {
tag = tag.substr(this.CUSTOM_TYPE_PREFIX.length);
} else {
tag = `hui-${tag}-card`;
}
const cardElement = document.createElement(tag) as LovelaceCard;
cardElement.setConfig(card);
cardElement.hass = hass();
return cardElement
})}
</ha-card>
`;
}
// https://lit-element.polymer-project.org/guide/styles
static get styles(): CSSResult {
return css``;
}
}

Answer 1

Use connectedCallback and disconnectedCallback to start and stop your timer:
#customElement('boilerplate-card')
export class BoilerplateCard extends LitElement {
connectedCallback() {
super.connectedCallback();
this.date = new Date();
this.interval = setInterval(() => {
this.date = new Date();
}, 1000);
}
disconnectedCallback() {
super.disconnectedCallback();
clearInterval(this.interval);
}
...
}