Fix conditional chip components loading (#1281)

src/cards/chips-card/chips-card-chips-editor.ts

@@ -10,6 +10,7 @@ import { getChipElementClass } from "../../utils/lovelace/chip-element-editor";
 import { CHIP_LIST, LovelaceChipConfig } from "../../utils/lovelace/chip/types";
 import { EditorTarget } from "../../utils/lovelace/editor/types";
 import { HassEntity } from "home-assistant-js-websocket";
+import { setupConditionChipComponent } from "./chips/conditional-chip";
 
 let Sortable;
 
@@ -114,12 +115,11 @@ export class ChipsCardEditorChips extends MushroomBaseElement {
                 naturalMenuWidth
             >
                 ${CHIP_LIST.map(
-                    (chip) =>
-                        html`
-                            <mwc-list-item .value=${chip}>
-                                ${customLocalize(`editor.chip.chip-picker.types.${chip}`)}
-                            </mwc-list-item>
-                        `
+                    (chip) => html`
+                        <mwc-list-item .value=${chip}>
+                            ${customLocalize(`editor.chip.chip-picker.types.${chip}`)}
+                        </mwc-list-item>
+                    `
                 )}
             </mushroom-select>
         `;
@@ -189,6 +189,10 @@ export class ChipsCardEditorChips extends MushroomBaseElement {
 
         let newChip: LovelaceChipConfig;
 
+        if (value === "conditional") {
+            await setupConditionChipComponent();
+        }
+
         // Check if a stub config exists
         const elClass = getChipElementClass(value) as any;
 

src/cards/chips-card/chips-card.ts

@@ -13,6 +13,7 @@ import { registerCustomCard } from "../../utils/custom-cards";
 import { createChipElement } from "../../utils/lovelace/chip/chip-element";
 import { LovelaceChip, LovelaceChipConfig } from "../../utils/lovelace/chip/types";
 import "./chips";
+import { setupConditionChipComponent } from "./chips/conditional-chip";
 import { EntityChip } from "./chips/entity-chip";
 import { CHIPS_CARD_EDITOR_NAME, CHIPS_CARD_NAME } from "./const";
 
@@ -90,6 +91,9 @@ export class ChipsCard extends LitElement implements LovelaceCard {
     }
 
     private renderChip(chipConfig: LovelaceChipConfig) {
+        if (chipConfig.type === "conditional") {
+            setupConditionChipComponent();
+        }
         const element = createChipElement(chipConfig);
         if (!element) {
             return nothing;

src/cards/chips-card/chips/conditional-chip-editor.ts

@@ -5,6 +5,7 @@ import { fireEvent, HASSDomEvent, HomeAssistant, LovelaceConfig } from "../../..
 import setupCustomlocalize from "../../../localize";
 import "../../../shared/form/mushroom-select";
 import "../../../shared/form/mushroom-textfield";
+import { loadHaComponents } from "../../../utils/loader";
 import { getChipElementClass } from "../../../utils/lovelace/chip-element-editor";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
 import {
@@ -30,6 +31,11 @@ export class ConditionalChipEditor extends LitElement implements LovelaceChipEdi
 
     @state() private _cardTab = false;
 
+    connectedCallback() {
+        super.connectedCallback();
+        void loadHaComponents();
+    }
+
     @query("mushroom-chip-element-editor")
     private _cardEditorEl?: any;
 

src/cards/chips-card/chips/conditional-chip.ts

@@ -1,5 +1,5 @@
 import { atLeastHaVersion } from "../../../ha";
-import { loadConditionalCardComponents, loadCustomElement } from "../../../utils/loader";
+import { loadCustomElement } from "../../../utils/loader";
 import {
     computeChipComponentName,
     computeChipEditorComponentName,
@@ -10,8 +10,25 @@ import { LovelaceChipEditor } from "../../../utils/lovelace/types";
 import "./conditional-chip-editor";
 import "./conditional-chip-editor-legacy";
 
-async function setupConditionChipComponent() {
+const componentName = computeChipComponentName("conditional");
+
+export const setupConditionChipComponent = async () => {
+    // Don't resetup the component if already set up.
+    if (customElements.get(componentName)) {
+        return;
+    }
+
+    // Load conditional base
+    if (!customElements.get("hui-conditional-base")) {
+        const helpers = await (window as any).loadCardHelpers();
+        helpers.createCardElement({
+            type: "conditional",
+            card: { type: "button" },
+            conditions: [],
+        });
+    }
     const HuiConditionalBase = await loadCustomElement("hui-conditional-base");
+
     // @ts-ignore
     class ConditionalChip extends HuiConditionalBase implements LovelaceChip {
         public static async getConfigElement(): Promise<LovelaceChipEditor> {
@@ -40,9 +57,9 @@ async function setupConditionChipComponent() {
             this._element = createChipElement(config.chip) as LovelaceChip;
         }
     }
-    // @ts-ignore
-    customElements.define(computeChipComponentName("conditional"), ConditionalChip);
-}
 
-loadConditionalCardComponents();
-setupConditionChipComponent();
+    if (!customElements.get(componentName)) {
+        // @ts-ignore
+        customElements.define(componentName, ConditionalChip);
+    }
+};

src/utils/loader.ts

@@ -11,19 +11,6 @@ export const loadHaComponents = () => {
     }
 };
 
-export const loadConditionalCardComponents = async () => {
-    const HuiView = await loadCustomElement("hui-view");
-    const view = new HuiView();
-    view.lovelace = {
-        editMode: false,
-    };
-    view.createCardElement({
-        type: "conditional",
-        card: { type: "button" },
-        conditions: [],
-    });
-};
-
 export const loadCustomElement = async <T = any>(name: string) => {
     let Component = customElements.get(name) as T;
     if (Component) {