@develia/commons 0.4.9 → 0.4.12

package/package.json

@@ -1,56 +1,56 @@
-{
-  "name": "@develia/commons",
-  "version": "0.4.9",
-  "author": {
-    "name": "Antonio Gil Espinosa",
-    "email": "antonio.gil.espinosa@gmail.com",
-    "url": "https://antoniogilespinosa.com"
-  },
-  "type": "module",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "browser": "./dist/web/index.js"
-    },
-    "./array": {
-      "types": "./dist/types/array.d.ts",
-      "import": "./dist/esm/array.js",
-      "require": "./dist/cjs/array.js",
-      "browser": "./dist/web/array.js"
-    },
-    "./collections": {
-      "types": "./dist/types/collections/index.d.ts",
-      "import": "./dist/esm/collections/index.js",
-      "require": "./dist/cjs/collections/index.js",
-      "browser": "./dist/web/collections/index.js"
-    },
-    "./browser": {
-      "types": "./dist/types/browser/index.d.ts",
-      "import": "./dist/esm/browser/index.js",
-      "require": "./dist/cjs/browser/index.js",
-      "browser": "./dist/web/browser/index.js"
-    }
-  },
-  "license": "proprietary",
-  "devDependencies": {
-    "rimraf": "^6.0.1",
-    "typescript": "^5.1.3",
-    "jest": "^29.7.0"
-  },
-  "scripts": {
-    "clean": "rimraf dist || rm -rf dist",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:web": "tsc -p tsconfig.web.json",
-    "build": "npm run clean && npm run build:esm && npm run build:cjs  && npm run build:web"
-  },
-  "files": [
-    "dist",
-    "src"
-  ]
-}
+{
+  "name": "@develia/commons",
+  "version": "0.4.12",
+  "author": {
+    "name": "Antonio Gil Espinosa",
+    "email": "antonio.gil.espinosa@gmail.com",
+    "url": "https://antoniogilespinosa.com"
+  },
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "browser": "./dist/web/index.js"
+    },
+    "./array": {
+      "types": "./dist/types/array.d.ts",
+      "import": "./dist/esm/array.js",
+      "require": "./dist/cjs/array.js",
+      "browser": "./dist/web/array.js"
+    },
+    "./collections": {
+      "types": "./dist/types/collections/index.d.ts",
+      "import": "./dist/esm/collections/index.js",
+      "require": "./dist/cjs/collections/index.js",
+      "browser": "./dist/web/collections/index.js"
+    },
+    "./browser": {
+      "types": "./dist/types/browser/index.d.ts",
+      "import": "./dist/esm/browser/index.js",
+      "require": "./dist/cjs/browser/index.js",
+      "browser": "./dist/web/browser/index.js"
+    }
+  },
+  "license": "proprietary",
+  "devDependencies": {
+    "rimraf": "^6.0.1",
+    "typescript": "^5.1.3",
+    "jest": "^29.7.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist || rm -rf dist",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:web": "tsc -p tsconfig.web.json",
+    "build": "npm run clean && npm run build:esm && npm run build:cjs  && npm run build:web"
+  },
+  "files": [
+    "dist",
+    "src"
+  ]
+}

package/src/browser/form-utilities.ts

@@ -1,174 +1,180 @@
-import {type Optional, type Supplier} from "../types.js";
-
-
-/**
- * Submits a form via AJAX and returns a Promise that resolves to the Response object.
- *
- * @param {HTMLFormElement | string} selectorOrElement - The form element or selector.
- * @return {Promise<Response>} A Promise that resolves to the Response object.
- * @throws {Error} If the element is invalid.
- */
-export async function ajaxSubmit(selectorOrElement: HTMLFormElement | string): Promise<Response> {
-
-    const form = typeof selectorOrElement === 'string'
-        ? document.querySelector(selectorOrElement)
-        : selectorOrElement;
-
-    if (!(form instanceof HTMLFormElement)) {
-        throw new Error("Invalid element.");
-    }
-
-    // Crear un objeto FormData a partir del formulario
-    return await fetch(form.action, {
-        method: form.method,
-        body: new FormData(form),
-    });
-}
-
-
-export function submitForm(
-    url: string,
-    data: Record<string, any>,
-    method: 'POST' | 'GET' = 'POST',
-    target?: '_blank' | '_self' | '_parent' | '_top'
-): void {
-
-    const form = document.createElement('form');
-    form.method = method.toUpperCase();
-    form.action = url;
-    form.style.display = 'none';
-
-    if (target) {
-        form.target = target;
-    }
-
-    /**
-     * Recursively appends inputs to the form, supporting nested keys and arrays.
-     * @param keyPrefix - Key path, e.g., 'user[name]' or 'tags[]'
-     * @param value - The value to append (can be nested)
-     */
-    const appendInputs = (keyPrefix: string, value: any) => {
-        if (Array.isArray(value)) {
-            value.forEach(val => {
-                appendInputs(`${keyPrefix}[]`, val);
-            });
-        } else if (typeof value === 'object' && value !== null) {
-            for (const subKey in value) {
-                if (value.hasOwnProperty(subKey)) {
-                    appendInputs(`${keyPrefix}[${subKey}]`, value[subKey]);
-                }
-            }
-        } else {
-            const input = document.createElement('input');
-            input.type = 'hidden';
-            input.name = keyPrefix;
-            input.value = String(value);
-            form.appendChild(input);
-        }
-    };
-
-    for (const key in data) {
-        if (data.hasOwnProperty(key)) {
-            appendInputs(key, data[key]);
-        }
-    }
-
-    document.body.appendChild(form);
-    form.submit();
-}
-
-export function formToObject(form: HTMLFormElement): Record<string, FormDataEntryValue | FormDataEntryValue[]> {
-    const fd = new FormData(form);
-    const out: Record<string, FormDataEntryValue | FormDataEntryValue[]> = {};
-
-    for (const [key, value] of fd.entries()) {
-        if (key in out) {
-            const current = out[key];
-            if (Array.isArray(current)) {
-                current.push(value);
-            } else {
-                out[key] = [current, value];
-            }
-        } else {
-            out[key] = value;
-        }
-    }
-
-    return out;
-}
-
-/**
- * Converts an object to `FormData` format recursively.
- *
- * @param {Record<string, any>} data - The object data to convert.
- * @param {FormData} formData - The `FormData` instance to append data to.
- * @param {string} parentKey - The parent key to append to child keys in the `FormData`.
- * @returns {FormData} - The `FormData` instance with the converted data.
- */
-function _objectToFormData(data: Record<string, any>, formData: FormData, parentKey: string = ''): FormData {
-
-    for (const key in data) {
-        if (data.hasOwnProperty(key)) {
-            const value = data[key];
-
-            if (value instanceof Date) {
-                formData.append(parentKey ? `${parentKey}[${key}]` : key, value.toISOString());
-            } else if (value instanceof File) {
-                formData.append(parentKey ? `${parentKey}[${key}]` : key, value);
-            } else if (typeof value === 'object' && !Array.isArray(value)) {
-                _objectToFormData(value, formData, parentKey ? `${parentKey}[${key}]` : key);
-            } else if (Array.isArray(value)) {
-                value.forEach((item, index) => {
-                    const arrayKey = `${parentKey ? `${parentKey}[${key}]` : key}[${index}]`;
-                    if (typeof item === 'object' && !Array.isArray(item)) {
-                        _objectToFormData(item, formData, arrayKey);
-                    } else {
-                        formData.append(arrayKey, item);
-                    }
-                });
-            } else {
-                formData.append(parentKey ? `${parentKey}[${key}]` : key, value);
-            }
-        }
-    }
-
-    return formData;
-}
-
-/**
- * Converts an object into FormData.
- *
- * @param {Record<string, any>} data - The object to be converted into FormData.
- * @return {FormData} - The FormData object representing the converted data.
- */
-export function objectToFormData(data: Record<string, any>): FormData {
-    let formData = new FormData();
-    return _objectToFormData(data, formData);
-}
-
-export function ajaxSubmission(selectorOrElement: HTMLFormElement | string,
-                               onSuccess: Optional<Supplier<any>> = undefined,
-                               onFailure: Optional<Supplier<any>> = undefined): void {
-
-    const form = typeof selectorOrElement === 'string'
-        ? document.querySelector(selectorOrElement)
-        : selectorOrElement;
-
-    if (!(form instanceof HTMLFormElement)) {
-        return;
-    }
-
-    form.addEventListener('submit', async (event) => {
-        event.preventDefault();
-        let promise = ajaxSubmit(form);
-        if (promise) {
-            if (onSuccess)
-                promise = promise.then(onSuccess);
-            if (onFailure)
-                promise.catch(onFailure);
-        }
-
-    });
-
-
+import {type Consumer, type Optional} from "../types.js";
+
+
+/**
+ * Submits a form via AJAX and returns a Promise that resolves to the Response object.
+ *
+ * @param {HTMLFormElement | string} selectorOrElement - The form element or selector.
+ * @return {Promise<Response>} A Promise that resolves to the Response object.
+ * @throws {Error} If the element is invalid.
+ */
+export async function ajaxSubmit(selectorOrElement: HTMLFormElement | string): Promise<Response> {
+
+    const form = typeof selectorOrElement === 'string'
+        ? document.querySelector(selectorOrElement)
+        : selectorOrElement;
+
+    if (!(form instanceof HTMLFormElement)) {
+        throw new Error("Invalid element.");
+    }
+
+
+    const formData = new FormData(form);
+    const method = form.getAttribute('method') as string ?? form.method;
+    const action = form.getAttribute('action') as string ?? form.action;
+
+    return await fetch(action, {
+        method: method,
+        body: formData,
+    });
+}
+
+
+export function submitForm(
+    url: string,
+    data: Record<string, any>,
+    method: 'POST' | 'GET' = 'POST',
+    target?: '_blank' | '_self' | '_parent' | '_top'
+): void {
+
+    const form = document.createElement('form');
+    form.method = method.toUpperCase();
+    form.action = url;
+    form.style.display = 'none';
+
+    if (target) {
+        form.target = target;
+    }
+
+    /**
+     * Recursively appends inputs to the form, supporting nested keys and arrays.
+     * @param keyPrefix - Key path, e.g., 'user[name]' or 'tags[]'
+     * @param value - The value to append (can be nested)
+     */
+    const appendInputs = (keyPrefix: string, value: any) => {
+        if (Array.isArray(value)) {
+            value.forEach(val => {
+                appendInputs(`${keyPrefix}[]`, val);
+            });
+        } else if (typeof value === 'object' && value !== null) {
+            for (const subKey in value) {
+                if (value.hasOwnProperty(subKey)) {
+                    appendInputs(`${keyPrefix}[${subKey}]`, value[subKey]);
+                }
+            }
+        } else {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = keyPrefix;
+            input.value = String(value);
+            form.appendChild(input);
+        }
+    };
+
+    for (const key in data) {
+        if (data.hasOwnProperty(key)) {
+            appendInputs(key, data[key]);
+        }
+    }
+
+    document.body.appendChild(form);
+    form.submit();
+}
+
+export function formToObject(form: HTMLFormElement): Record<string, FormDataEntryValue | FormDataEntryValue[]> {
+    const fd = new FormData(form);
+    const out: Record<string, FormDataEntryValue | FormDataEntryValue[]> = {};
+
+    for (const [key, value] of fd.entries()) {
+        if (key in out) {
+            const current = out[key];
+            if (Array.isArray(current)) {
+                current.push(value);
+            } else {
+                out[key] = [current, value];
+            }
+        } else {
+            out[key] = value;
+        }
+    }
+
+    return out;
+}
+
+/**
+ * Converts an object to `FormData` format recursively.
+ *
+ * @param {Record<string, any>} data - The object data to convert.
+ * @param {FormData} formData - The `FormData` instance to append data to.
+ * @param {string} parentKey - The parent key to append to child keys in the `FormData`.
+ * @returns {FormData} - The `FormData` instance with the converted data.
+ */
+function _objectToFormData(data: Record<string, any>, formData: FormData, parentKey: string = ''): FormData {
+
+    for (const key in data) {
+        if (data.hasOwnProperty(key)) {
+            const value = data[key];
+
+            if (value instanceof Date) {
+                formData.append(parentKey ? `${parentKey}[${key}]` : key, value.toISOString());
+            } else if (value instanceof File) {
+                formData.append(parentKey ? `${parentKey}[${key}]` : key, value);
+            } else if (typeof value === 'object' && !Array.isArray(value)) {
+                _objectToFormData(value, formData, parentKey ? `${parentKey}[${key}]` : key);
+            } else if (Array.isArray(value)) {
+                value.forEach((item, index) => {
+                    const arrayKey = `${parentKey ? `${parentKey}[${key}]` : key}[${index}]`;
+                    if (typeof item === 'object' && !Array.isArray(item)) {
+                        _objectToFormData(item, formData, arrayKey);
+                    } else {
+                        formData.append(arrayKey, item);
+                    }
+                });
+            } else {
+                formData.append(parentKey ? `${parentKey}[${key}]` : key, value);
+            }
+        }
+    }
+
+    return formData;
+}
+
+/**
+ * Converts an object into FormData.
+ *
+ * @param {Record<string, any>} data - The object to be converted into FormData.
+ * @return {FormData} - The FormData object representing the converted data.
+ */
+export function objectToFormData(data: Record<string, any>): FormData {
+    let formData = new FormData();
+    return _objectToFormData(data, formData);
+}
+
+export function ajaxSubmission(
+    selectorOrElement: HTMLFormElement | string,
+    onSuccess: Optional<Consumer<any>> = undefined,
+    onFailure: Optional<Consumer<any>> = undefined
+): void {
+
+    const forms: HTMLFormElement[] = typeof selectorOrElement === 'string'
+            ? Array.from(document.querySelectorAll(selectorOrElement))
+                   .filter(el => el instanceof HTMLFormElement) as HTMLFormElement[]
+            : [selectorOrElement];
+
+    forms.forEach(form => {
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+
+            try {
+                let result = await ajaxSubmit(event.currentTarget as HTMLFormElement);
+                if (onSuccess)
+                    onSuccess(result);
+            } catch (e) {
+                if (onFailure)
+                    onFailure(e);
+            }
+
+
+        });
+    });
 }