refactor: migrate HTML templates to separate JS files for app-header, highlight-memo, and kanban components; update styles for divider-item

Author: caperaven

components/app-header/app-header.js

@@ -1,4 +1,3 @@
-import {ComponentModule} from "../../src/modules/component.js";
 import {EventsManager} from "../../src/system/events-manager.js";
 import {HTML} from "./app-header.html.js"
 
@@ -11,6 +10,7 @@ class AppHeader extends HTMLElement {
         super();
         this.attachShadow({ mode: "open" });
         this.shadowRoot.innerHTML = HTML;
+        this.style.display = "flex";
     }
 
     async connectedCallback() {

components/highlight-memo/highlight-memo.html

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

components/highlight-memo/highlight-memo.html.js

@@ -1,5 +1,6 @@
 import {ComponentModule} from "../../src/modules/component.js";
 import {MarkdownModule} from "../../src/modules/markdown.js";
+import { HTML } from "./highlight-memo.html.js";
 
 export class HighlightMemo extends HTMLElement {
     static name = Object.freeze("highlight-memo");
@@ -9,12 +10,7 @@ export class HighlightMemo extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-    }
-
-    async connectedCallback() {
-        this.shadowRoot.innerHTML = await ComponentModule.load_html({
-            url: import.meta.url,
-        });
+        this.shadowRoot.innerHTML = HTML;
     }
 
     async disconnectedCallback() {

components/highlight-memo/highlight-memo.js

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

components/kanban/kanban.html

@@ -1,6 +1,7 @@
 import {ComponentModule} from "../../src/modules/component.js";
 import {CanvasModule} from "../../src/modules/canvas.js";
 import {groupData} from "./data-processor.js";
+import { HTML } from "./kanban.html.js";
 
 export class Kanban extends HTMLElement {
     static name = Object.freeze("kanban-component");
@@ -12,22 +13,17 @@ export class Kanban 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,
-        });
-
-        requestAnimationFrame(async () => {
-            this.#canvasWorker = await CanvasModule.initialize({
-                canvasElement: this.shadowRoot.querySelector("canvas"),
-                workerSource: new URL("./kanban-worker.js", import.meta.url).href
-            })
-
-            this.#canvasWorker.call("clear");
-            await ComponentModule.ready({element: this});
+        this.#canvasWorker = await CanvasModule.initialize({
+            canvasElement: this.shadowRoot.querySelector("canvas"),
+            workerSource: new URL("./kanban-worker.js", import.meta.url).href
         })
+
+        this.#canvasWorker.call("clear");
+        await ComponentModule.ready({element: this});
     }
 
     async disconnectedCallback() {

components/kanban/kanban.html.js

@@ -1,20 +1,15 @@
-import { ComponentModule } from "../../../src/modules/component.js";
-
 class DividerItem extends HTMLElement {
     static name = Object.freeze("divider-item");
 
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.style.display = "none";
-    }
-
-    async connectedCallback() {
-        this.shadowRoot.innerHTML = await ComponentModule.load_html({
-            url: import.meta.url,
-        });
-
-        this.style.display = "flex";
+        this.style.display = "block";
+        this.style.height = "1px";
+        this.style.backgroundColor = "var(--cl-border)";
+        this.style.padding = 0;
+        this.style.border = "none";
+        this.boxSizing = "border-box";
     }
 }