WIP form helper

Author: punyflash

src/dom.ts

@@ -1,12 +1,15 @@
-import { axios, type RouterRequestConfig, type VortexConfig } from "./router"
+import { axios, RouterResponse, type RouterRequestConfig, type VortexConfig } from "./router"
+import { useForm, VortexForm } from "./form"
+import { formDataToObject, isEqual } from "./helpers"
+import { Signal, signal } from "./signals"
 
-export type Action<E extends HTMLElement, T> = (
+export type Action<E extends HTMLElement, T, R = {}> = (
     node: E,
     parameters?: T
 ) => {
     update?: (parameters: T) => void
     destroy?: () => void
-}
+} & R
 
 type PrefetchMethod = 'click' | 'mount' | 'hover'
 type PrefetchLinkConfig = {
@@ -153,3 +156,50 @@ export const visible: Action<HTMLElement, (VisibleConfig & RouterRequestConfig)
         }
     }
 }
+
+interface FormOptions extends RouterRequestConfig {
+    before?: (form: VortexForm<any>) => VortexForm<any>
+    after?: (result: Promise<RouterResponse<any>>) => any
+}
+
+export const form: Action<HTMLFormElement,FormOptions,{ errors: Signal<Record<string, string>> }> = (node, rawOptions = {}) => {
+    let options: FormOptions = {
+        before: (form) => form,
+        after: (result) => result,
+        ...rawOptions
+    }
+    const form = useForm(formDataToObject(new FormData(node)))
+    const errors = signal(form.get().errors, isEqual)
+
+    const unsubscribe = form.subscribe((form) => errors.set(form.errors))
+
+    function submit(event: SubmitEvent) {
+        event.preventDefault()
+
+        const { before, after } = options
+
+        // @ts-expect-error
+        return after(before(form.get()).request({
+            method: node.method || 'post',
+            url: node.action || (window.location.origin + window.location.pathname),
+            ...options
+        }))
+    }
+
+    node.addEventListener('submit', submit)
+
+    return {
+        errors,
+        update(newOptions) {
+            options = {
+                before: (form) => form,
+                after: (result) => result,
+                ...newOptions
+            }
+        },
+        destroy() {
+            node.removeEventListener('submit', submit)
+            unsubscribe()
+        }
+    }
+}

src/helpers.ts

@@ -40,4 +40,68 @@ export function proxyUnwrap<T>(data: T): T {
         acc[key] = proxyUnwrap(data[key]);
         return acc
     }, {} as T)
-}
+}
+
+export function formDataToObject(formData: FormData): Record<string, unknown> {
+    const obj = {};
+
+    function assign(obj, path, value) {
+        let current = obj;
+
+        for (let i = 0; i < path.length; i++) {
+            const key = path[i];
+            const isLast = i === path.length - 1;
+
+            if (isLast) {
+                // type cast
+                if (value === 'true') value = true;
+                else if (value === 'false') value = false;
+                else if (!isNaN(value) && value.trim() !== '') value = +value;
+
+                if (Array.isArray(current) && key === '') current.push(value);
+                else current[key] = value;
+            } else {
+                const nextKey = path[i + 1];
+                if (!(key in current)) {
+                    if (nextKey === '' || !isNaN(nextKey)) current[key] = [];
+                    else current[key] = {};
+                }
+                current = current[key];
+            }
+        }
+    }
+
+    for (const [fullKey, value] of formData.entries()) {
+        const path: string[] = [];
+        let buffer = '';
+        let bracketMode = false;
+        let escapeNext = false;
+
+        for (let char of fullKey) {
+            if (escapeNext) {
+                buffer += char;
+                escapeNext = false;
+            } else if (char === '\\') {
+                escapeNext = true;
+            } else if (char === '.' && !bracketMode) {
+                if (buffer) path.push(buffer);
+                buffer = '';
+            } else if (char === '[') {
+                if (buffer) path.push(buffer);
+                buffer = '';
+                bracketMode = true;
+            } else if (char === ']' && bracketMode) {
+                path.push(buffer);
+                buffer = '';
+                bracketMode = false;
+            } else {
+                buffer += char;
+            }
+        }
+        if (buffer) path.push(buffer);
+
+        assign(obj, path, value);
+    }
+
+    return obj;
+}

src/index.ts

@@ -1,6 +1,6 @@
 export * from "./client";
 export * from "./page";
-export { link, visible } from "./dom";
+export { link, visible, form } from "./dom";
 export { usePoll } from "./polling";
 export { useForm } from "./form";
 export { useRemember } from "./remember";