Custom element doesn't exist should be fix (#274)

info.md

@@ -1,6 +1,10 @@
 {% if installed %}
 
 ### Features
+{% if version_installed.replace("v", "").replace(".","") | int < 10730 %}
+- Fixed `Custom element doesn't exist`
+{% 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.07.30",
  "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

@@ -29,25 +29,43 @@ console.info(
 export default class RoomCard extends LitElement {
  @property() _hass?: HomeAssistant;
  @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 {
@@ -70,8 +88,6 @@ export default class RoomCard extends LitElement {
  return { entities: rowEntities, hide_if: row.hide_if, content_alignment: row.content_alignment };
  }) ?? [];
 
- this._refCards = this.config.cards?.map((card) => this.createCardElement(card, hass));
-
  this.config.hass = hass;
  }
  }
@@ -95,7 +111,7 @@ export default class RoomCard extends LitElement {
  ${this.rows !== undefined && this.rows.length > 0 ? 
  renderRows(this.rows, this._hass, this) : 
  renderEntitiesRow(this.config, this.entities, this._hass, this)}
- ${this._refCards}
+ ${this.config.cards?.map((card) => this.createCardElement(card, this._hass))}
  </ha-card>
  `;
  } catch (error) {

tests/index.test.ts

@@ -4,11 +4,12 @@ import { PropertyValues } from 'lit';
 import { createMock } from 'ts-auto-mock';
 import { HassEntity } from 'home-assistant-js-websocket';
 import RoomCard from '../src/index';
-import { RoomCardAlignment, RoomCardConfig, RoomCardRow } from '../src/types/room-card-types';
+import { RoomCardAlignment, RoomCardConfig, RoomCardLovelaceCardConfig, RoomCardRow } from '../src/types/room-card-types';
 import { createEntity, getRenderString } from './utils';
 
 describe('Testing index file class RoomCard', () => {
  const roomcard = new RoomCard();
+
  const hass = createMock<HomeAssistant>();
  // Create Main Entity
  createEntity('light.test_entity', hass, 'on', { icon: 'mdi:table' });
@@ -432,6 +433,36 @@ describe('Testing index file class RoomCard', () => {
  roomcard.setConfig(config);
 
  expect(roomcard.getCardSize()).toBe(3);
- })
-})
+ }),
+ test('Calling createCardElement with config.show_states true', () => {
+ const config: RoomCardLovelaceCardConfig = {
+ entity: 'light.test_entity',
+ show_states: 'test',
+ type: 'custom'
+ }
+
+ const result = roomcard.createCardElement(config, hass);
 
+ expect(result).toBeUndefined();
+ }),
+ test('Calling createCardElement with config.show_states true', () => {
+ hass.states['light.test_entity'].state = 'test';
+ const config: RoomCardLovelaceCardConfig = {
+ entity: 'light.test_entity',
+ show_states: ['test'],
+ type: 'custom'
+ }
+ // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+ roomcard._helpers = { createCardElement(_config: LovelaceCardConfig): LovelaceCard {
+ const element = {
+ style: {}
+ } as LovelaceCard;
+
+ return element;
+ }}
+
+ const result = roomcard.createCardElement(config, hass);
+
+ expect(result).toHaveProperty('hass');
+ })
+})

tests/utils.ts

@@ -4,8 +4,8 @@ import { createMock } from "ts-auto-mock";
 import { HassEntity, HassEntityAttributeBase } from 'home-assistant-js-websocket';
 import { HomeAssistantEntity, RoomCardEntity } from "../src/types/room-card-types";
 
-export const createEntity = (entity_id: string, hass: HomeAssistant, state: string, attributes: HassEntityAttributeBase = {}) : RoomCardEntity => {
- const stateObj = createMock<HomeAssistantEntity>(); 
+export const createEntity = (entity_id: string, hass: HomeAssistant, state: string, attributes: HassEntityAttributeBase = {}): RoomCardEntity => {
+ const stateObj = createMock<HomeAssistantEntity>();
  stateObj.entity_id = entity_id;
  stateObj.attributes = attributes;
  stateObj.state = state;
@@ -22,43 +22,43 @@ export const createEntity = (entity_id: string, hass: HomeAssistant, state: stri
  };
 }
 
-export const getRenderString = (data: HTMLTemplateResult) : string => {
- 
+export const getRenderString = (data: HTMLTemplateResult): string => {
+
  let returnHtml = '';
- if(!data) {
+ if (!data) {
  return returnHtml;
  }
 
- const {strings, values} = data;
+ const { strings, values } = data;
 
- if(strings === undefined) {
+ if (strings === undefined) {
  return returnHtml;
  }
- 
- for(let i = 0; i < strings.length; i++) {
- 
+
+ for (let i = 0; i < strings.length; i++) {
+
  returnHtml += strings[i];
 
- if(typeof values[i] === 'string') {
+ if (typeof values[i] === 'string') {
  returnHtml += values[i];
  }
- if(typeof values[i] === 'function') {
+ if (typeof values[i] === 'function') {
  // eslint-disable-next-line @typescript-eslint/ban-types
  returnHtml += (values[i] as Function).name;
  }
- else if(typeof values[i] === 'object') {
+ else if (typeof values[i] === 'object') {
  const templates = values[i] as HTMLTemplateResult[];
- if(templates !== undefined && templates !== null) {
- for(let i = 0; i < templates.length; i++) {
+ if (templates !== undefined && templates !== null) {
+ for (let i = 0; i < templates.length; i++) {
  returnHtml += getRenderString(templates[i] as HTMLTemplateResult);
  }
  }
 
  const template = values[i] as HTMLTemplateResult;
- if(template !== undefined && templates !== null) {
+ if (template !== undefined && templates !== null) {
  returnHtml += getRenderString(template);
  }
- } 
+ }
  }
 
  return returnHtml.replace(/\s\s+/g, ' ');