♻️ refactoring to TypeScript (wip)

Author: JonasDoebertin

hacs.json

@@ -1,7 +1,7 @@
 {
     "name": "Today Card",
     "content_in_root": false,
-    "filename": "dist/ha-today-card.js",
+    "filename": "ha-today-card.js",
     "homeassistant": "2025.2.0",
     "hacs": "2.0.0"
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "version": "0.0.1",
-  "source": "src/index.js",
+  "source": "src/index.ts",
   "module": "dist/ha-today-card.js",
   "targets": {
     "module": {
@@ -17,7 +17,9 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
+    "custom-card-helpers": "^1.9.0",
     "dayjs": "^1.11.13",
+    "home-assistant-js-websocket": "^9.4.0",
     "lit": "^3.2.1",
     "superstruct": "^2.0.2"
   }

package.json

@@ -0,0 +1,3 @@
+export const TIME_FORMAT: string = 'HH:mm';
+
+export const HA_API_DATE_FORMAT: string = 'YYYY-MM-DDTHH:mm:ss';

src/const.js

@@ -1,68 +1,63 @@
-import {getEvents} from "../functions/calendar.js";
-import {processEditorEntities} from "../functions/config.js";
 import styles from "bundle-text:./card.css";
-import {html, LitElement, unsafeCSS} from 'lit';
+import {CSSResult, html, LitElement, nothing, TemplateResult, unsafeCSS} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
 import {assert} from "superstruct";
+import {getEvents} from "../functions/calendar.js";
 import {computeCssColor} from "../functions/colors";
+import {processEditorEntities} from "../functions/config.js";
 import localize from "../localization/localize";
-import {cardConfigStruct} from "../structs/config";
-
-export class TodayCard extends LitElement
-{
-
-    static styles = unsafeCSS(styles);
-    _initialized = false;
-
-    static get properties()
-    {
-        return {
-            _config: {state: true},
-            _content: {state: true},
-        };
-    }
+import {CardConfig} from "../structs/config";
+import {HomeAssistant} from "custom-card-helpers";
+import CalendarEvent from "../structs/event";
 
-    _hass;
+@customElement('today-card')
+export class TodayCard extends LitElement {
+    // @property({ attribute: false }) public hass!: HomeAssistant;
+    @state() private config: CardConfig;
+    @state() private content: TemplateResult;
+    private initialized: boolean = false;
+    private _hass?: HomeAssistant;
 
-    set hass(hass)
-    {
+    set hass(hass: HomeAssistant) {
         this._hass = hass;
     }
 
-    static getConfigElement()
-    {
+    static getConfigElement(): HTMLElement {
         return document.createElement("today-card-editor");
     }
 
-    static getStubConfig(hass, entities, entitiesFallback)
-    {
+    static getStubConfig(
+        hass: HomeAssistant,
+        entities: string[],
+        entitiesFallback: string[]
+    ): Partial<CardConfig> {
         let calendarEntities = entities.filter((entityId) => entityId.startsWith('calendar.'));
 
         if (calendarEntities.length < 1) {
             calendarEntities = entitiesFallback.filter((entityId) => entityId.startsWith('calendar.'));
         }
 
         return {
-            entities: calendarEntities,
-            title: localize(this._hass, 'config.stub.title'),
+            type: "custom:today-card",
+            title: localize(hass, 'config.stub.title'),
             advance: 0,
             show_all_day_events: true,
             show_past_events: false,
+            entities: calendarEntities,
         };
     }
 
-    setConfig(config)
-    {
-        assert(config, cardConfigStruct);
-        this._config = {...config, entities: processEditorEntities(config.entities, true)};
-        this._content = "";
+    setConfig(config: CardConfig) {
+        assert(config, CardConfig);
+        this.config = {...config, entities: processEditorEntities(config.entities, true)};
+        this.content = html``;
     }
 
-    async updateEvents()
-    {
+    async updateEvents() {
         console.log('Updating events');
-        const events = await getEvents(this._config, this._hass);
+        const events = await getEvents(this.config, this._hass);
 
-        let eventsHtml = events.map((event) => {
+        let eventsHtml = events.map((event: CalendarEvent) => {
             return html`
                 <div class="event">
                     <div class="indicator" style="background-color: ${computeCssColor(event.color)}"></div>
@@ -74,27 +69,30 @@ export class TodayCard extends LitElement
             `;
         });
 
-        this._content = html`
+        this.content = html`
             <div class="events">
                 ${eventsHtml}
             </div>
         `;
     }
 
-    render()
-    {
+    render() {
         console.log('Rendering');
-        if (!this._initialized) {
+        if (!this.initialized) {
             this.updateEvents();
-            this._initialized = true;
+            this.initialized = true;
         }
 
         return html`
-            <ha-card header="${this._config.title}">
+            <ha-card header="${this.config.title}">
                 <div class="card-content">
-                    ${this._content}
+                    ${this.content}
                 </div>
             </ha-card>
         `;
     }
+
+    static get styles(): CSSResult {
+        return unsafeCSS(styles);
+    }
 }

src/const.ts

@@ -1,9 +1,10 @@
 import styles from "bundle-text:./editor.css";
 import {html, LitElement, nothing, unsafeCSS} from "lit";
+import {customElement} from "lit/decorators.js";
 import {assert} from "superstruct";
 import {fireEvent, processEditorEntities} from "../functions/config.js";
 import {loadHaComponents} from "../functions/hacks";
-import {cardConfigStruct} from "../structs/config";
+import {CardConfig} from "../structs/config";
 
 const FORM_SCHEMA = [
     {
@@ -35,6 +36,7 @@ const FORM_SCHEMA = [
     },
 ];
 
+@customElement('today-card-editor')
 export class TodayCardEditor extends LitElement
 {
 
@@ -57,7 +59,7 @@ export class TodayCardEditor extends LitElement
 
     setConfig(config)
     {
-        assert(config, cardConfigStruct);
+        assert(config, CardConfig);
 
         let entities = processEditorEntities(config.entities, false);
         this._config = {...config, entities: entities};

src/elements/card.js renamed to src/elements/card.ts

@@ -1,9 +1,11 @@
 import {mdiClose} from "@mdi/js";
 import styles from "bundle-text:./entity-editor.css";
 import {html, LitElement, nothing, unsafeCSS} from "lit";
+import {customElement} from "lit/decorators.js";
 import {repeat} from "lit/directives/repeat";
 import {fireEvent} from "../functions/config.js";
 
+@customElement('today-card-entities-editor')
 export class TodayCardEntitiesEditor extends LitElement
 {
     static styles = unsafeCSS(styles);

src/elements/editor.js renamed to src/elements/editor.ts

@@ -0,0 +1,16 @@
+import {version} from "../package.json";
+import "./elements/card";
+import "./elements/editor";
+import "./elements/entity-editor";
+
+(window as any).customCards = (window as any).customCards || [];
+(window as any).customCards.push({
+    type: "today-card",
+    name: "Today",
+    description: "Show today's schedule",
+});
+
+console.info(
+    `%c🗓️ Today Card v${version}`,
+    "font-weight: 700;",
+);