refactor: remove HTML templates from components and load them via separate JS files

Author: caperaven

components/activity-state/activity-state.html

@@ -0,0 +1,5 @@
+
+export const HTML = `
+<link rel="stylesheet" href="__css__" />
+<material-icon></material-icon>
+`.replace("__css__", import.meta.url.replace(".html.js", ".css"));

components/activity-state/activity-state.html.js

@@ -1,4 +1,5 @@
 import { ComponentModule } from "../../src/modules/component.js";
+import { HTML } from "./activity-state.html.js";
 
 class ActivityState extends HTMLElement {
     static name = Object.freeze("activity-state");
@@ -8,20 +9,13 @@ class ActivityState extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.style.display = "none";
+        this.shadowRoot.innerHTML = HTML;
     }
 
     async connectedCallback() {
-        this.shadowRoot.innerHTML = await ComponentModule.load_html({
-            url: import.meta.url,
-        });
-
-        requestAnimationFrame(() => {
-            if (this.#state) {
-                this.setState(this.#state);
-            }
-            this.style.display = "block";
-        });
+        if (this.#state) {
+            this.setState(this.#state);
+        }
     }
 
     setState(state) {

components/activity-state/activity-state.js

@@ -0,0 +1,12 @@
+
+export const HTML = `
+<link rel="stylesheet" href="__css__">
+<slot name="prefix"></slot>
+
+<button class="icon-button" data-action="home">
+    <material-icon icon="home"></material-icon>
+</button>
+
+<slot></slot>
+<slot name="suffix"></slot>
+`.replace("__css__", import.meta.url.replace(".html.js", ".css"));

components/app-header/app-header.html

@@ -1,5 +1,6 @@
 import {ComponentModule} from "../../src/modules/component.js";
 import {EventsManager} from "../../src/system/events-manager.js";
+import {HTML} from "./app-header.html.js"
 
 class AppHeader extends HTMLElement {
     static name = Object.freeze("app-header");
@@ -9,13 +10,10 @@ class AppHeader extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = HTML;
     }
 
     async connectedCallback() {
-        this.shadowRoot.innerHTML = await ComponentModule.load_html({
-            url: import.meta.url,
-        });
-
         this.#eventsManager.addPointerEvent(this, "click", this.#click.bind(this));
     }