refactor: update form and virtual list components for improved template measurement and styling

Author: caperaven

app/form/form.css

@@ -8,4 +8,10 @@
     padding: var(--padding);
     width: 100%;
     height: 100%;
+}
+
+.list-item {
+    display: block;
+    height: 2rem;
+    background: red;
 }

app/form/form.html

@@ -1,9 +1,9 @@
 <template id="list-item">
-      <div class="list-item">
+      <li class="list-item">
             <span>__name__</span>
             <span>__age__</span>
             <span>__email__</span>
-      </div>
+      </li>
 </template>
 
 <app-header><h2>Form</h2></app-header>

app/form/form.js

@@ -2,6 +2,7 @@ import "./../../components/toast-notification/toast-notification.js";
 import { FormModule } from "./../../src/modules/form.js";
 import "./../../components/dynamic-columns/dynamic-columns.js";
 import "./../../components/virtual-list/virtual-list.js";
+import { ComponentModule } from "../../src/modules/component.js";
 
 export default class FormView extends HTMLElement {
 	static tag = "form-view";
@@ -24,7 +25,14 @@ export default class FormView extends HTMLElement {
 		const data = loadData();
 
 		const virtualList = this.shadowRoot.querySelector("virtual-list");
-		virtualList.load(data, template, this.#inflate.bind(this));
+		
+		ComponentModule.on_ready({
+			element: virtualList,
+			callback: () => {
+				virtualList.load(data, template, 32, this.#inflate.bind(this));	
+			}
+		})
+
 	}
 
 	async disconnectedCallback() {
@@ -36,9 +44,6 @@ export default class FormView extends HTMLElement {
 
 	}
 
-    load(data) {
-    }
-
 	async #click(event) {
 		const target = event.target;
 
@@ -96,4 +101,18 @@ function loadData() {
 	return data;
 }
 
+// Ensure the template is properly styled before measuring
+function measureListItem(template) {
+	const div = document.createElement("div");
+	div.style.position = "absolute";
+	div.style.visibility = "hidden";
+	div.style.height = "auto";
+	div.style.width = "auto";
+	div.appendChild(template.cloneNode(true));
+	document.body.appendChild(div);
+	const height = div.clientHeight;
+	document.body.removeChild(div);
+	return height;
+}
+
 customElements.define(FormView.tag, FormView);

components/virtual-list/virtual-list.js

@@ -1,5 +1,7 @@
 import { HTML } from "./virtual-list.html.js";
 import { SizesManager } from "../../src/modules/virtualization/sizes-manager.js";
+import { ComponentModule } from "../../src/modules/component.js";
+import { IdleModule } from "../../src/modules/idle.js";
 
 /**
  * The VirtualList web component handles creating and displaying a virtual list.
@@ -27,6 +29,7 @@ export class VirtualList extends HTMLElement {
      */
     async connectedCallback() {
         // Initialize the virtual list here
+        await ComponentModule.ready({element: this});
     }
 
     /**
@@ -39,18 +42,23 @@ export class VirtualList extends HTMLElement {
         this.#template = null;
         this.#inflateFn = null;
     }
+    
+    #loadElements() {
+        const height = this.offsetHeight;
+    }
 
     /**
      * Method to update the list items.
      * @param {Array} items - The list items to display.
      */
-    load(items, template, inflateFn) {
+    async load(items, template, height, inflateFn) {
         this.#template = template;
         this.#inflateFn = inflateFn;
 
         // Update the virtual list with new items
         this.#data.push(...items);
-        this.#sizeManager = new SizesManager(this.#data.length, 32);
+        this.#sizeManager = new SizesManager(this.#data.length, height);
+        IdleModule.perform({ tasks: [this.#loadElements.bind(this)] });
     }
 }
 

src/modules/component.js

@@ -66,11 +66,16 @@ class ComponentModule {
 	 * await ComponentModule.ready({ element: document.querySelector("my-component") });
 	 * @returns {Promise<void>}
 	 */
-	static async ready(args){
+	static ready(args){
 		const { element } = args;
 
-		element.dataset.ready = "true";
-		element.dispatchEvent(new CustomEvent("ready"));
+		return new Promise(resolve => {
+			requestAnimationFrame(() => {
+				element.dataset.ready = "true";
+				element.dispatchEvent(new CustomEvent("ready"));
+				resolve();	
+			})	
+		});
 	}
 
 	/**

src/modules/dom.js

@@ -1,15 +1,26 @@
 class DomModule {
     static name = Object.freeze("dom");
 
-    static async measure_template(template) {
-        const div = document.createElement("div");
-        div.style.display = "none";
-        div.appendChild(template.cloneNode(true));
-    
-        document.body.appendChild(div);
-        const height = div.clientHeight;
-        document.body.removeChild(div);
-        return height;
+    static measure_template(template, parentElement) {
+        return new Promise(resolve => {
+            const div = document.createElement("div");
+            div.id = "measure";
+            div.style.position = "fixed";
+            div.style.top = 0;
+            div.style.left = 0;
+            div.style.height = "auto";
+            div.style.width = "auto";
+            div.appendChild(template.content.cloneNode(true));
+        
+            parentElement.appendChild(div);
+
+            requestAnimationFrame(() => {
+                const width = div.clientWidth;
+                const height = div.clientHeight;
+                parentElement.removeChild(div);    
+                resolve({width, height});
+            });
+        })
     }
 }
 

tests/src/modules/dom.test.js

@@ -15,7 +15,8 @@ globalThis.document = {
                 getBoundingClientRect: () => ({ height: 100 })
             }),
             getBoundingClientRect: () => ({ height: 100 }),
-            clientHeight: 100
+            clientHeight: 100,
+            clientWidth: 50
         };
     },
     body: {
@@ -28,6 +29,7 @@ Deno.test("DomModule.measure_template should return the height of a template", a
     const template = document.createElement("template");
     template.innerHTML = "<div style='height: 100px'></div>";
 
-    const height = await DomModule.measure_template(template);
-    assertEquals(height, 100);
+    const size = await DomModule.measure_template(template);
+    assertEquals(size.width, 50);
+    assertEquals(size.height, 100);
 });