Use module base

src/ha-card.js

@@ -1,15 +1,14 @@
-import { fireEvent } from "card-tools/src/event.js";
-import { extensionEnabled, findConfig } from "./utils";
+import { extensionEnabled, findConfig, moduleEnabled } from "./utils";
 import { applyTheme } from "./styles";
 import { NO_CARD_STYLE } from "./const";
 import { hass } from "card-tools/src/hass";
+import { createModule } from "./module";
 
-customElements.whenDefined("ha-card").then(() => {
-  const HaCard = customElements.get("ha-card");
-  const firstUpdated = HaCard.prototype.firstUpdated;
+const MODULE = "ha-card";
+const ELEMENT = "ha-card";
 
-  HaCard.prototype.firstUpdated = function () {
-    firstUpdated.call(this);
+if (moduleEnabled(MODULE)) {
+  createModule(ELEMENT, function () {
     const config = findConfig(this);
     if (!config) return;
 
@@ -32,7 +31,5 @@ customElements.whenDefined("ha-card").then(() => {
     this.offsetHeight;
     // restore transition.
     this.style.transition = "";
-  };
-
-  fireEvent("ll-rebuild", {});
-});
+  });
+}

src/hui-generic-entity-row.js

@@ -1,17 +1,15 @@
-import { fireEvent } from "card-tools/src/event";
 import { hasOldTemplate } from "card-tools/src/old-templates";
 import { DEFAULT_SECONDARY_INFO } from "./const";
 import { hasTemplate } from "card-tools/src/templates";
 import { provideHass } from "card-tools/src/hass";
-import { extensionEnabled } from "./utils";
+import { extensionEnabled, moduleEnabled } from "./utils";
+import { createModule } from "./module";
 
-customElements.whenDefined("hui-generic-entity-row").then(() => {
-  const EntityRow = customElements.get("hui-generic-entity-row");
+const MODULE = "generic-entity-row";
+const ELEMENT = "hui-generic-entity-row";
 
-  const firstUpdated = EntityRow.prototype.firstUpdated;
-
-  EntityRow.prototype.firstUpdated = function() {
-    firstUpdated.call(this);
+if (moduleEnabled(MODULE)) {
+  createModule(ELEMENT, function () {
     if (
       this.config.secondary_info &&
       extensionEnabled(this.config, "secondary_info")
@@ -29,7 +27,7 @@ customElements.whenDefined("hui-generic-entity-row").then(() => {
           secondaryInfoElement.template = {
             template: this.config.secondary_info,
             variables: { config: this.config, entity: this.config.entity },
-            entity_ids: this.config.entity_ids
+            entity_ids: this.config.entity_ids,
           };
 
           this.shadowRoot.appendChild(secondaryInfoElement);
@@ -44,7 +42,5 @@ customElements.whenDefined("hui-generic-entity-row").then(() => {
         }
       }
     }
-  };
-
-  fireEvent("ll-rebuild", {});
-});
+  });
+}

src/hui-glance-card.js

@@ -1,11 +1,11 @@
-import { fireEvent } from "card-tools/src/event.js";
-import { extensionEnabled } from "./utils";
+import { extensionEnabled, moduleEnabled } from "./utils";
+import { createModule } from "./module";
 
-customElements.whenDefined("hui-glance-card").then(() => {
-  const GlanceCard = customElements.get("hui-glance-card");
-  const firstUpdated = GlanceCard.prototype.firstUpdated;
+const MODULE = "glance-card";
+const ELEMENT = "hui-glance-card";
 
-  const getAlignment = function(alignment) {
+if (moduleEnabled(MODULE)) {
+  const getAlignment = function (alignment) {
     switch (alignment) {
       case "center":
         return "space-evenly";
@@ -16,14 +16,11 @@ customElements.whenDefined("hui-glance-card").then(() => {
     }
   };
 
-  GlanceCard.prototype.firstUpdated = function() {
-    firstUpdated.call(this);
+  createModule(ELEMENT, function () {
     if (this._config.align && extensionEnabled(this._config, "align")) {
       this.shadowRoot.querySelector(
         ".entities"
       ).style.justifyContent = getAlignment(this._config.align);
     }
-  };
-
-  fireEvent("ll-rebuild", {});
-});
+  });
+}

src/hui-warning.js

@@ -1,12 +1,11 @@
-import { fireEvent } from "card-tools/src/event.js";
-import { extensionEnabled, findConfig } from "./utils";
+import { extensionEnabled, findConfig, moduleEnabled } from "./utils";
+import { createModule } from "./module";
 
-customElements.whenDefined("hui-warning").then(() => {
-  const WarningCard = customElements.get("hui-warning");
-  const firstUpdated = WarningCard.prototype.firstUpdated;
+const MODULE = "warning";
+const ELEMENT = "hui-warning";
 
-  WarningCard.prototype.firstUpdated = function() {
-    firstUpdated.call(this);
+if (moduleEnabled(MODULE)) {
+  createModule(ELEMENT, function () {
     const config = findConfig(this);
     if (
       config &&
@@ -15,7 +14,5 @@ customElements.whenDefined("hui-warning").then(() => {
     ) {
       this.style.display = "none";
     }
-  };
-
-  fireEvent("ll-rebuild", {});
-});
+  });
+}

src/module.js

@@ -0,0 +1,15 @@
+import { fireEvent } from "card-tools/src/event";
+
+export function createModule(element, firstUpdated) {
+  customElements.whenDefined(element).then(() => {
+    const Element = customElements.get(element);
+    const oFirstUpdated = Element.prototype.firstUpdated;
+
+    Element.prototype.firstUpdated = function (changedProperties) {
+      oFirstUpdated.call(this, changedProperties);
+      firstUpdated.call(this, changedProperties);
+    };
+
+    fireEvent("ll-rebuild", {});
+  });
+}

src/vertical-stack.js

@@ -1,12 +1,12 @@
-import { fireEvent } from "card-tools/src/event";
 import { VERTICAL_STACK_IN_CARD_STYLE } from "./const";
-import { extensionEnabled } from "./utils";
+import { extensionEnabled, moduleEnabled } from "./utils";
+import { createModule } from "./module";
 
-customElements.whenDefined("hui-vertical-stack-card").then(() => {
-  const VerticalStack = customElements.get("hui-vertical-stack-card");
-  const firstUpdated = VerticalStack.prototype.firstUpdated;
+const MODULE = "vertical-stack";
+const ELEMENT = "hui-vertical-stack-card";
 
-  const applyStyles = async function(element) {
+if (moduleEnabled(MODULE)) {
+  const applyStyles = async function (element) {
     // exit clause.
     if (!element) return;
 
@@ -30,8 +30,7 @@ customElements.whenDefined("hui-vertical-stack-card").then(() => {
     }
   };
 
-  VerticalStack.prototype.firstUpdated = function() {
-    firstUpdated.call(this);
+  createModule(ELEMENT, function () {
     if (
       this._config.in_card === true &&
       extensionEnabled(this._config, "in_card")
@@ -52,7 +51,5 @@ customElements.whenDefined("hui-vertical-stack-card").then(() => {
       // remove style from all ha-card child elements.
       applyStyles(divElement);
     }
-  };
-
-  fireEvent("ll-rebuild", {});
-});
+  });
+}