104 error custom element doesnt exist on builtin cards

info.md

@@ -1,6 +1,10 @@
 {% if installed %}
 
 ### Features
+{% if version_installed.replace("v", "").replace(".","") | int < 10800  %}
+- Fixed `Changed loading of cards to await dependencies`
+{% endif %}
+
 {% if version_installed.replace("v", "").replace(".","") | int < 10725  %}
 - Fixed `broken card creation`
 {% endif %}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "room-card",
-  "version": "1.07.25",
+  "version": "1.08.00",
   "description": "Show entities in Home Assistant's Lovelace UI",
   "keywords": [
     "home-assistant",
@@ -19,7 +19,7 @@
     "jest-environment-jsdom": "^29.5.0",
     "jest-ts-auto-mock": "^2.1.0",
     "lit": "^2.7.5",
-    "ts-auto-mock": "^3.6.2",
+    "ts-auto-mock": "3.5.0",
     "ttypescript": "^1.5.13",
     "yarn": "^1.22.18"
   },
@@ -28,8 +28,8 @@
     "@babel/plugin-transform-runtime": "^7.22.4",
     "@babel/preset-env": "^7.22.5",
     "@types/jest": "^29.5.3",
-    "@typescript-eslint/parser": "^5.59.1",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "babel-loader": "^9.1.3",
     "codecov": "^3.8.3",
     "compression-webpack-plugin": "^10.0.0",
@@ -38,7 +38,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^29.6.2",
     "prettier": "^2.8.8",
-    "ts-jest": "^29.1.0",
+    "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
     "typescript": "^4.9.5",
     "webpack": "^5.88.2",

src/index.ts

@@ -1,12 +1,13 @@
 import { CSSResult, html, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { HomeAssistant, LovelaceCard, LovelaceCardConfig, createThing } from 'custom-card-helpers';
+import { HassEntities } from 'home-assistant-js-websocket/dist';
 
 import { checkConfig, entityStyles, renderEntitiesRow, renderInfoEntity, renderRows, renderTitle } from './entity';
-import { getEntityIds, hasConfigOrEntitiesChanged, mapStateObject } from './util';
+import { getEntityIds, parseConfig } from './util';
 import { hideIfCard } from './hide';
 import { style } from './styles';
-import { HomeAssistantEntity, RoomCardConfig, RoomCardEntity, RoomCardLovelaceCardConfig, RoomCardRow } from './types/room-card-types';
+import { RoomCardConfig, RoomCardLovelaceCardConfig } from './types/room-card-types';
 import * as packageJson from '../package.json';
 
 console.info(
@@ -21,81 +22,112 @@ console.info(
     type: 'room-card',
     name: 'Room card',
     preview: false,
-  description: 'Show multiple entity states, attributes and icons in a single card in Home Assistant\'s Lovelace UI',
+    description: 'Show multiple entity states, attributes and icons in a single card in Home Assistant\'s Lovelace UI',
 });
 /* eslint-enable @typescript-eslint/no-explicit-any */
 
 @customElement('room-card')
 export default class RoomCard extends LitElement {
-    @property() _hass?: HomeAssistant;
+    private _hass?: HomeAssistant;
+    @property() monitoredStates?: HassEntities;
     @property() config?: RoomCardConfig;
+    @property() _helpers: { createCardElement(config: LovelaceCardConfig): LovelaceCard }
 
-    private entity: RoomCardEntity | undefined;
-    private info_entities: RoomCardEntity[] = [];
-    private entities: RoomCardEntity[] = [];
-    private rows: RoomCardRow[] = [];
-    private stateObj: HomeAssistantEntity | undefined;
-    private _refCards: LovelaceCard[] = [];
-    private _helpers: { createCardElement(config: LovelaceCardConfig): LovelaceCard };
+    getChildCustomCardTypes(cards: RoomCardLovelaceCardConfig[], target: Set<string>) {
+        if (!cards) return;
+
+        for (const card of cards) {
+            if (card.type.indexOf('custom:') === 0) {
+                target.add(card.type.substring(7, card.type.length));
+            }
+            this.getChildCustomCardTypes(card.cards, target)
+        }
+    }
+
+    async waitForDependentComponents(config: RoomCardConfig) {
+        const distinctTypes = new Set<string>();
+        this.getChildCustomCardTypes(config.cards, distinctTypes);
+        await Promise.all(Array.from(distinctTypes).map(type => customElements.whenDefined(type)));
+    }
 
     async setConfig(config: RoomCardConfig) {
         checkConfig(config);
+        const entityIds = getEntityIds(config);
+        this.config = { ...config, entityIds: entityIds };
 
-        this.config = { ...config, entityIds: getEntityIds(config) };
+        await this.waitForDependentComponents(config);
 
+        /* istanbul ignore next */
         /* eslint-disable @typescript-eslint/no-explicit-any */
         if ((window as any).loadCardHelpers) {
             this._helpers = await (window as any).loadCardHelpers();
         }
-        /* eslint-enable @typescript-eslint/no-explicit-any */
     }
 
     protected shouldUpdate(changedProps: PropertyValues): boolean {
-        return hasConfigOrEntitiesChanged(this.config, changedProps);
-    }
-
-    set hass(hass: HomeAssistant) {
-        this._hass = hass;
+        const result = this.monitoredStates !== undefined
+            && this.config !== undefined
+            && changedProps.size > 0
+            && this._helpers !== undefined
+            && this._helpers.createCardElement !== undefined;
 
-        if (hass && this.config) {
-            this.stateObj = this.config.entity !== undefined ? hass.states[this.config.entity] : undefined;
-            this.entity = this.config.entity !== undefined ? { ...this.config, stateObj: this.stateObj } : undefined;
-
-            this.info_entities = this.config.info_entities?.map(entity => mapStateObject(entity, hass, this.config)) ?? [];
-
-            this.entities = this.config.entities?.map(entity => mapStateObject(entity, hass, this.config)) ?? [];
-            this.rows =
-                this.config.rows?.map((row) => {
-                    const rowEntities = row.entities?.map(entity => mapStateObject(entity, hass, this.config));
-                    return { entities: rowEntities, hide_if: row.hide_if, content_alignment: row.content_alignment };
-                }) ?? [];
+        return result;
+    }
 
-            this._refCards = this.config.cards?.map((card) => this.createCardElement(card, hass));
+    updateMonitoredStates(hass: HomeAssistant): void {
+        const newStates = { ...this.monitoredStates };
+        let anyUpdates = false;
+
+        for (const entityId of this.config.entityIds) {
+            if (entityId in hass.states) {
+                const monitoredEntity = this.monitoredStates && this.monitoredStates[entityId];
+
+                /* istanbul ignore next */
+                if (!this.monitoredStates || monitoredEntity?.last_updated < hass.states[entityId].last_updated ||
+                    monitoredEntity?.last_changed < hass.states[entityId].last_changed) {
+                    anyUpdates = hass.states[entityId] !== newStates[entityId];
+                    newStates[entityId] = hass.states[entityId];
+                }
+            } else if (this.monitoredStates && entityId in this.monitoredStates) {
+                anyUpdates = true;
+                delete newStates[entityId];
+            }
+        }
 
-            this.config.hass = hass;
+        if (anyUpdates) {
+            this.monitoredStates = newStates;
         }
     }
 
+    @property()
+    get hass() { return this._hass; }
+    set hass(hass: HomeAssistant) {
+        this.updateMonitoredStates(hass);        
+        this._hass = hass;
+    }
+
     static get styles(): CSSResult {
         return style;
     }
 
-    render() : TemplateResult<1> {
+    render(): TemplateResult<1> {
         if (!this._hass || !this.config) return html``;
 
+        const { entity, info_entities, entities, rows, stateObj } = parseConfig(this.config, this._hass);
+
         try {
             return html`
-                <ha-card elevation="2" style="${entityStyles(this.config.card_styles, this.stateObj, this._hass)}">
+                <ha-card elevation="2" style="${entityStyles(this.config.card_styles, stateObj, this._hass)}">
                     <div class="card-header">
-                        ${renderTitle(this.config, this._hass, this, this.entity)}
+                        ${renderTitle(this.config, this._hass, this, entity)}
                         <div class="entities-info-row">
-                            ${this.info_entities.map((entity) => renderInfoEntity(entity, this._hass, this))}
+                            ${info_entities.map((entity) => renderInfoEntity(entity, this._hass, this))}
                         </div>
                     </div>
-                    ${this.rows !== undefined && this.rows.length > 0 ? 
-                        renderRows(this.rows, this._hass, this) : 
-                        renderEntitiesRow(this.config, this.entities, this._hass, this)}
-                    ${this._refCards}
+                    ${rows !== undefined && rows.length > 0 ?
+                    renderRows(rows, this._hass, this) :
+                    renderEntitiesRow(this.config, entities, this._hass, this)}
+                    ${this.config.cards?.map((card) => this.createCardElement(card, this._hass))}
                 </ha-card>
             `;
         } catch (error) {

src/util.ts

@@ -118,4 +118,25 @@ export const evalTemplate = (hass: HomeAssistant | undefined, state: HassEntity,
 
 export const renderClasses = (config: RoomCardConfig | RoomCardRow, classes?: string): string => {
     return `entities-row ${config.content_alignment ? `content-${config.content_alignment}` : 'content-left'}${classes !== undefined ? ` ${classes}` : '' }`;
+}
+
+export const parseConfig = (config?: RoomCardConfig, hass?: HomeAssistant): { entity?: RoomCardEntity, info_entities: RoomCardEntity[], entities: RoomCardEntity[], rows?: RoomCardRow[], stateObj?: HomeAssistantEntity } => {
+    const result = { info_entities: [], entities: [] } as { entity?: RoomCardEntity, info_entities: RoomCardEntity[], entities: RoomCardEntity[], rows?: RoomCardRow[], stateObj?: HomeAssistantEntity };
+
+    if (!hass || !config) return result;
+
+    result.stateObj = config.entity !== undefined ? hass.states[config.entity] : undefined;
+    result.entity = config.entity !== undefined ? { ...config, stateObj: result.stateObj } : undefined;
+    result.info_entities = config.info_entities?.map(entity => mapStateObject(entity, hass, config)) ?? [];
+    result.entities = config.entities?.map(entity => mapStateObject(entity, hass, config)) ?? [];
+
+    result.rows =
+        config.rows?.map((row) => {
+            const rowEntities = row.entities?.map(entity => mapStateObject(entity, hass, config));
+            return { entities: rowEntities, hide_if: row.hide_if, content_alignment: row.content_alignment };
+        }) ?? [];
+
+    config.hass = hass;
+
+    return result;
 }