bug: race condition caused icons not to render #89 (#92)

README.md

@@ -29,7 +29,7 @@ v3 is only compatible from version 2022.3 onwards
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=3.0.3
+    - url: /local/mini-humidifier-bundle.js?v=3.0.4
       type: module
   ```
 
@@ -40,14 +40,14 @@ v3 is only compatible from version 2022.3 onwards
 2. Grab `mini-humidifier-bundle.js`
 
   ```console
-  $ wget https://github.com/artem-sedykh/mini-humidifier/releases/download/v3.0.3/mini-humidifier-bundle.js
+  $ wget https://github.com/artem-sedykh/mini-humidifier/releases/download/v3.0.4/mini-humidifier-bundle.js
   ```
 
 3. Add a reference to `mini-humidifier-bundle.js` inside your `configuration.yaml`.
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=3.0.3
+    - url: /local/mini-humidifier-bundle.js?v=3.0.4
       type: module
   ```
 
@@ -60,7 +60,7 @@ v3 is only compatible from version 2022.3 onwards
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=3.0.3
+    - url: /local/mini-humidifier-bundle.js?v=3.0.4
       type: module
   ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini-humidifier",
-  "version": "v3.0.3",
+  "version": "v3.0.4",
   "description": "humidifier card for Home Assistant Lovelace UI",
   "keywords": [
     "home-assistant",

release_notes/v3.0.4.md

@@ -0,0 +1,5 @@
+## v3.0.4
+[![Downloads](https://img.shields.io/github/downloads/artem-sedykh/mini-humidifier/v3.0.4/total.svg)](https://github.com/artem-sedykh/mini-humidifier/releases/tag/v3.0.4)
+
+### Fixed
+- bug: race condition caused icons not to render by @regevbr

src/components/button.js

@@ -3,15 +3,14 @@ import { styleMap } from 'lit/directives/style-map';
 import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
 import sharedStyle from '../sharedStyle';
 import buildElementDefinitions from '../utils/buildElementDefinitions';
-import globalElementLoader from '../utils/globalElementLoader';
 
 export default class HumidifierButton extends ScopedRegistryHost(LitElement) {
   static get defineId() { return 'mh-button'; }
 
   static get elementDefinitions() {
     return buildElementDefinitions([
-      globalElementLoader('ha-icon'),
-      globalElementLoader('ha-icon-button'),
+      'ha-icon',
+      'ha-icon-button',
     ], HumidifierButton);
   }
 
@@ -53,6 +52,10 @@ export default class HumidifierButton extends ScopedRegistryHost(LitElement) {
   }
 
   render() {
+    if (!HumidifierButton.elementDefinitionsLoaded) {
+      return html``;
+    }
+
     clearTimeout(this.timer);
 
     return html`

src/components/buttons.js

@@ -45,6 +45,10 @@ export default class HumidifierButtons extends ScopedRegistryHost(LitElement) {
   }
 
   render() {
+    if (!HumidifierButtons.elementDefinitionsLoaded) {
+      return html``;
+    }
+
     const context = this;
     return html`${Object.entries(this.buttons)
       .map(b => b[1])

src/components/dropdown-base.js

@@ -4,15 +4,14 @@ import sharedStyle from '../sharedStyle';
 import HumidifierMenu from './mwc/menu';
 import HumidifierListItem from './mwc/list-item';
 import buildElementDefinitions from '../utils/buildElementDefinitions';
-import globalElementLoader from '../utils/globalElementLoader';
 
 export default class HumidifierDropdownBase extends ScopedRegistryHost(LitElement) {
   static get defineId() { return 'mh-dropdown-base'; }
 
   static get elementDefinitions() {
     return buildElementDefinitions([
-      globalElementLoader('ha-icon'),
-      globalElementLoader('ha-icon-button'),
+      'ha-icon',
+      'ha-icon-button',
       HumidifierMenu,
       HumidifierListItem,
     ], HumidifierDropdownBase);
@@ -51,6 +50,10 @@ export default class HumidifierDropdownBase extends ScopedRegistryHost(LitElemen
   }
 
   render() {
+    if (!HumidifierDropdownBase.elementDefinitionsLoaded) {
+      return html``;
+    }
+
     return html`
       <div class='mh-dropdown'>
         <ha-icon-button class='mh-dropdown__button icon'

src/components/dropdown.js

@@ -49,6 +49,10 @@ export default class HumidifierDropDown extends ScopedRegistryHost(LitElement) {
   }
 
   render() {
+    if (!HumidifierDropDown.elementDefinitionsLoaded) {
+      return html``;
+    }
+
     clearTimeout(this.timer);
 
     return html`

src/components/indicators.js

@@ -4,14 +4,12 @@ import { styleMap } from 'lit/directives/style-map';
 import handleClick from '../utils/handleClick';
 import { TAP_ACTIONS } from '../const';
 import buildElementDefinitions from '../utils/buildElementDefinitions';
-import globalElementLoader from '../utils/globalElementLoader';
-
 
 export default class HumidifierIndicators extends ScopedRegistryHost(LitElement) {
   static get defineId() { return 'mh-indicators'; }
 
   static get elementDefinitions() {
-    return buildElementDefinitions([globalElementLoader('ha-icon')], HumidifierIndicators);
+    return buildElementDefinitions(['ha-icon'], HumidifierIndicators);
   }
 
   static get properties() {
@@ -59,6 +57,10 @@ export default class HumidifierIndicators extends ScopedRegistryHost(LitElement)
   }
 
   render() {
+    if (!HumidifierIndicators.elementDefinitionsLoaded) {
+      return html``;
+    }
+
     const context = this;
     // console.log('render Indicators');
 

src/components/power.js

@@ -3,15 +3,14 @@ import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
 import sharedStyle from '../sharedStyle';
 import buildElementDefinitions from '../utils/buildElementDefinitions';
 import HumidifierButton from './button';
-import globalElementLoader from '../utils/globalElementLoader';
 
 export default class HumidifierPower extends ScopedRegistryHost(LitElement) {
   static get defineId() { return 'mh-power'; }
 
   static get elementDefinitions() {
     return buildElementDefinitions([
       HumidifierButton,
-      globalElementLoader('ha-entity-toggle'),
+      'ha-entity-toggle',
     ], HumidifierPower);
   }
 
@@ -27,8 +26,12 @@ export default class HumidifierPower extends ScopedRegistryHost(LitElement) {
   }
 
   render() {
+    if (!HumidifierPower.elementDefinitionsLoaded) {
+      return html``;
+    }
+
     if (this.power.hide)
-      return '';
+      return html``;
 
     if (this.power.type === 'toggle') {
       return html`

src/components/targetHumidity.js

@@ -2,15 +2,14 @@ import { css, html, LitElement } from 'lit';
 import { styleMap } from 'lit/directives/style-map';
 import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
 import buildElementDefinitions from '../utils/buildElementDefinitions';
-import globalElementLoader from '../utils/globalElementLoader';
 
 export default class HumidifierTargetHumidity extends ScopedRegistryHost(LitElement) {
   static get defineId() { return 'mh-target-humidity'; }
 
   static get elementDefinitions() {
     return buildElementDefinitions([
-      globalElementLoader('ha-slider'),
-      globalElementLoader('ha-icon'),
+      'ha-slider',
+      'ha-icon',
     ], HumidifierTargetHumidity);
   }
 
@@ -64,6 +63,10 @@ export default class HumidifierTargetHumidity extends ScopedRegistryHost(LitElem
   }
 
   render() {
+    if (!HumidifierTargetHumidity.elementDefinitionsLoaded) {
+      return html``;
+    }
+
     return html`
       <div class='mh-target_humidifier --slider flex'>
         <ha-slider

src/main.js

@@ -22,18 +22,17 @@ import HumidifierPower from './components/power';
 import HumidifierIndicators from './components/indicators';
 import HumidifierButtons from './components/buttons';
 import buildElementDefinitions from './utils/buildElementDefinitions';
-import globalElementLoader from './utils/globalElementLoader';
 
 class MiniHumidifier extends ScopedRegistryHost(LitElement) {
   static get elementDefinitions() {
     return buildElementDefinitions([
-      globalElementLoader('ha-card'),
-      globalElementLoader('ha-icon'),
-      globalElementLoader('ha-relative-time'),
+      'ha-card',
+      'ha-icon',
+      'ha-relative-time',
       HumidifierTargetHumidity,
       HumidifierPower,
       HumidifierIndicators,
-      globalElementLoader('ha-icon-button'),
+      'ha-icon-button',
       HumidifierButtons,
     ], MiniHumidifier);
   }
@@ -439,6 +438,10 @@ class MiniHumidifier extends ScopedRegistryHost(LitElement) {
   }
 
   render() {
+    if (!MiniHumidifier.elementDefinitionsLoaded) {
+      return html``;
+    }
+
     const cls = this.config.target_humidity.hide ? 'full' : '';
     return html`
       <ha-card

src/utils/buildElementDefinitions.js

@@ -1,17 +1,36 @@
-const buildElementDefinitions = (elements, constructor) => elements.reduce(
-  (aggregate, element) => {
-    if (element.defineId) {
-      // eslint-disable-next-line no-param-reassign
-      aggregate[element.defineId] = element;
-    } else {
-      element.promise.then((clazz) => {
-        if (constructor.registry.get(element.name) === undefined) {
-          constructor.registry.define(element.name, clazz);
+const buildElementDefinitions = (elements, constructor) => {
+  const promises = [];
+  const definitions = elements.reduce(
+    (aggregate, element) => {
+      if (typeof element === 'string') {
+        const clazz = customElements.get(element);
+        if (clazz) {
+          // eslint-disable-next-line no-param-reassign
+          aggregate[element] = clazz;
+        } else {
+          promises.push(customElements.whenDefined(element).then(() => {
+            if (constructor.registry.get(element) === undefined) {
+              constructor.registry.define(element, customElements.get(element));
+            }
+          }));
         }
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        aggregate[element.defineId] = element;
+      }
+      return aggregate;
+    }, {},
+  );
+  // eslint-disable-next-line no-param-reassign
+  constructor.elementDefinitionsLoaded = promises.length === 0;
+  if (!constructor.elementDefinitionsLoaded) {
+    Promise.all(promises)
+      .then(() => {
+        // eslint-disable-next-line no-param-reassign
+        constructor.elementDefinitionsLoaded = true;
       });
-    }
-    return aggregate;
-  }, {},
-);
+  }
+  return definitions;
+};
 
 export default buildElementDefinitions;