refactor: migrate HTML templates to separate JS files for dynamic-columns and dynamic-rows components

Author: caperaven

components/dynamic-columns/dynamic-columns.html

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

components/dynamic-columns/dynamic-columns.html.js

@@ -1,4 +1,5 @@
 import {ComponentModule} from "../../src/modules/component.js";
+import { HTML } from "./dynamic-columns.html.js";
 
 class DynamicColumns extends HTMLElement {
     static name = Object.freeze("dynamic-columns");
@@ -25,13 +26,10 @@ class DynamicColumns 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,
-        });
-
         const { columns, minWidths } = getGridTemplateColumns(this);
         this.#translateX.minWidths = minWidths;
 

components/dynamic-columns/dynamic-columns.js

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

components/dynamic-rows/dynamic-rows.html

@@ -1,4 +1,5 @@
 import {ComponentModule} from "../../src/modules/component.js";
+import { HTML } from "./dynamic-rows.html.js";
 
 class DynamicRows extends HTMLElement {
     static name = Object.freeze("dynamic-rows");
@@ -24,14 +25,11 @@ class DynamicRows extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+        this.shadowRoot.innerHTML = HTML;
+        this.style.setProperty("--heights", getGridTemplateRows(this).join(" "));
     }
 
     async connectedCallback() {
-        this.shadowRoot.innerHTML = await ComponentModule.load_html({
-            url: import.meta.url,
-        });
-
-        this.style.setProperty("--heights", getGridTemplateRows(this).join(" "));
         this.addEventListener("mousedown", this.#mouseDownHandler);
     }