refactor: enhance buildComponent function to support copying multiple folders and add FormModule for form data handling

Author: caperaven

_build_scripts/build-component.ts

@@ -6,7 +6,7 @@ await init();
 const encoder = new TextEncoder();
 const decoder = new TextDecoder();
 
-export async function buildComponent(componentName: string, folder: string = "") {
+export async function buildComponent(componentName: string, folder: string = "", copyFolders: string[] = []) {
     console.log(`Building ${componentName}`);
 
     if (folder.length > 0) {
@@ -15,6 +15,12 @@ export async function buildComponent(componentName: string, folder: string = "")
 
     await build_src(componentName, folder);
     await copy_files(componentName, folder);
+
+    if (copyFolders.length > 0) {
+        for (const subFolder of copyFolders) {
+            await copyFilesToFolder(`components/${componentName}/${folder}${subFolder}`, `dist/components/${componentName}/${folder}`);
+        }
+    }
 }
 
 async function build_src(componentName: string, folder: string = "") {
@@ -87,14 +93,7 @@ async function copyHTMLFiles(srcFolder: string, distFile: string) {
     await Deno.writeTextFile(distFile, result);
 }
 
-export async function copyFilesToFolder(sourceDir: string, targetDir: string) {
-    // if the targetDir does not exist, create it
-    try {
-        await Deno.stat(targetDir);
-    } catch (error) {
-        await Deno.mkdir(targetDir, { recursive: true });
-    }
-
+async function copyFilesToFolder(sourceDir: string, targetDir: string) {
     for await (const entry of Deno.readDir(sourceDir)) {
         const srcPath = `${sourceDir}/${entry.name}`;
         const distPath = `${targetDir}/${entry.name}`;

app/form/form.html

@@ -29,6 +29,8 @@
             required>
 	</div>
       <div role="toolbar">
+            <button type="button" data-action="populate">Populate</button>
+            <button type="button" data-action="print">Print</button>
             <button type="submit">Submit</button>
             <button type="reset">Reset</button>
             <button type="button" data-action="error">Error</button>

app/form/form.js

@@ -1,4 +1,6 @@
 import "./../../components/toast-notification/toast-notification.js";
+import { FormModule } from "./../../src/modules/form.js";
+
 export default class FormView extends HTMLElement {
 	static tag = "form-view";
 
@@ -48,6 +50,23 @@ export default class FormView extends HTMLElement {
 	warning() {
 		toastNotification.warning("Something not so good happened");
 	}
+
+	populate() {
+		const form = this.shadowRoot.querySelector("form");
+		const data = {
+			personName: "John",
+			personAge: 20,
+			personEmail: "[email protected]"
+		};
+
+		FormModule.to({ form, data });
+	}
+
+	print() {
+		const form = this.shadowRoot.querySelector("form");
+		const data = FormModule.from({ form });
+		toastNotification.info(JSON.stringify(data, null, 2));
+	}
 }
 
 customElements.define(FormView.tag, FormView);

src/modules/form.js

@@ -0,0 +1,72 @@
+/**
+ * FormModule provides utility methods to handle form data.
+ */
+class FormModule {
+    static name = Object.freeze("form");
+
+    /**
+     * Create a dictionary from the form elements.
+     * @param {FormElement} args.form
+     * @returns {Object} Dictionary of form data.
+     */
+    static from(args) {
+        const { form } = args;
+        const data = new FormData(form);
+        const dict = {};
+        
+        for (const [key, value] of data.entries()) {
+            dict[key] = value;
+        }
+
+        return dict;
+    }
+
+    /**
+     * Populate form elements with data from a dictionary.
+     * @param {FormElement} args.form
+     * @param {Object} args.data
+     */
+    static to(args) {
+        const { form, data } = args;
+
+        for (const [key, value] of Object.entries(data)) {
+            const element = form.querySelector(`[name="${key}"]`);
+
+            if (element) {
+                element.value = value;
+            }
+        }
+    }
+
+    /**
+     * Set a specific form element's value.
+     * @param {FormElement} args.form
+     * @param {string} args.property
+     * @param {string} args.value
+     */
+    static set(args) {
+        const { form, property, value } = args;
+        const element = form.querySelector(`[name="${property}"]`);
+        element.value = value;
+    }
+
+    /**
+     * Clear the form elements.
+     * @param {FormElement} args.form
+     */
+    static clear(args) {
+        const { form } = args;
+        form.reset();
+    }
+
+    /**
+     * Submit the form.
+     * @param {FormElement} args.form
+     */
+    static submit(args) {
+        const { form } = args;
+        form.submit();
+    }
+}
+
+export { FormModule };

tests/src/modules/form.test.js

@@ -0,0 +1,95 @@
+import { assertEquals, assert } from "jsr:@std/assert";
+import { FormModule } from "../../../src/modules/form.js";
+
+// Mocking DOM features
+globalThis.document = {
+    elements: {},
+    createElement: (tagName) => {
+        const element = {
+            tagName,
+            name: "",
+            value: "",
+            appendChild: (child) => {
+                globalThis.document.elements[child.name] = child;
+            },
+            querySelector: (selector) => {
+                const name = selector.match(/\[name="(.+)"\]/)[1];
+                return globalThis.document.elements[name] || { name, value: "" };
+            },
+            reset: () => {
+                Object.values(globalThis.document.elements).forEach(element => {
+                    element.value = "";
+                });
+            },
+            submit: () => {
+                const event = new Event("submit", { bubbles: true, cancelable: true });
+                form.dispatchEvent(event);
+            }
+        };
+        return element;
+    }
+};
+
+globalThis.FormData = class {
+    constructor(form) {
+        this.data = form?.data || {};
+    }
+    append(name, value) {
+        this.data[name] = value;
+    }
+    get(name) {
+        return this.data[name];
+    }
+    entries() {
+        return Object.entries(this.data);
+    }
+};
+
+Deno.test("FormModule.from should create a dictionary from form elements", () => {
+    const form = new FormData();
+    form.append("name", "John");
+    form.append("age", "30");
+
+    const result = FormModule.from({ form });
+    assertEquals(result.name, "John");
+    assertEquals(result.age, "30");
+});
+
+Deno.test("FormModule.to should populate form elements with data from a dictionary", () => {
+    const form = document.createElement("form");
+    const inputName = document.createElement("input");
+    inputName.name = "name";
+    form.appendChild(inputName);
+
+    const inputAge = document.createElement("input");
+    inputAge.name = "age";
+    form.appendChild(inputAge);
+
+    const data = { name: "John", age: "30" };
+    FormModule.to({ form, data });
+
+    assertEquals(inputName.value, "John");
+    assertEquals(inputAge.value, "30");
+});
+
+Deno.test("FormModule.set should set a specific form element's value", () => {
+    const form = document.createElement("form");
+    const inputName = document.createElement("input");
+    inputName.name = "name";
+    form.appendChild(inputName);
+
+    FormModule.set({ form, property: "name", value: "John" });
+    assertEquals(inputName.value, "John");
+});
+
+Deno.test("FormModule.clear should clear the form elements", () => {
+    const form = document.createElement("form");
+    const inputName = document.createElement("input");
+    inputName.name = "name";
+    inputName.value = "John";
+    form.appendChild(inputName);
+
+    FormModule.clear({ form });
+    assertEquals(inputName.value, "");
+});
+