@steveesamson/microform 1.0.9 → 1.0.11

package/dist/form-action.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { FormOptions, FormAction, FormValues, FormErrors, FormSanity } from './types.js';
+import type { Params } from './internal.svelte.js';
+export declare const formAction: (values: FormValues, errors: FormErrors, unfits: FormErrors, sanity: FormSanity, options: FormOptions, validationMap: Params) => FormAction;

package/dist/{form-action.js → form-action.svelte.js}

@@ -1,4 +1,3 @@
-import { get } from 'svelte/store';
 import { useValidator } from './form-validators.js';
 import { getEditableContent } from './utils.js';
 const isField = (node) => {
@@ -16,12 +15,11 @@ const isRadio = (node) => {
     return node instanceof HTMLInputElement && ['radio'].includes(node.type.toLowerCase());
 };
 const checkFormFitness = (values, validationMap, validate) => {
-    const _values = get(values);
     for (const [name, { validations }] of Object.entries(validationMap)) {
-        validate({ name, value: _values[name], validations });
+        validate({ name, value: values[name], validations });
     }
 };
-export const formAction = (values, errors, unfits, isdirty, options, validationMap) => {
+export const formAction = (values, errors, unfits, sanity, options, validationMap) => {
     const { validators: customValidators } = options;
     const { validate, validators } = useValidator(errors, values);
     // override
@@ -30,12 +28,13 @@ export const formAction = (values, errors, unfits, isdirty, options, validationM
             validators[key] = val;
         }
     }
+    const hasError = (next) => !!next;
     return (node, eventProps) => {
         const nodeName = isField(node) ? node.name : '';
         const { name: dsname = nodeName } = node.dataset || {};
         const { name = dsname, validations = [], validateEvent = (options.validateEvent = 'blur'), html = false } = eventProps || {};
         validationMap[name] = { validations, html, nodeRef: node };
-        const storedValue = get(values)[name] || '';
+        const storedValue = values[name] || '';
         let defValue = storedValue;
         if (isField(node) && !isExcluded(node)) {
             defValue = node.value || storedValue;
@@ -45,58 +44,47 @@ export const formAction = (values, errors, unfits, isdirty, options, validationM
             defValue = node.innerHTML || storedValue;
             node.innerHTML = defValue;
         }
-        values.update((data) => {
-            return { ...data, [name]: defValue };
-        });
-        let unsubscribe;
+        values[name] = defValue;
         const updateNode = (e) => {
-            if (!unsubscribe) {
-                unsubscribe = values.subscribe((data) => {
-                    validate({ name, value: data[name], validations, node });
-                });
-            }
             if (isField(node) && !isExcluded(node)) {
                 const value = e.target.value || '';
-                values.update((data) => {
-                    return { ...data, [name]: value };
-                });
+                values[name] = value;
             }
             else if (node.isContentEditable) {
                 const { value: htm, text } = getEditableContent({ target: node }, html);
-                values.update((data) => {
-                    return { ...data, [name]: htm, [`${name}-text`]: text };
-                });
+                values[name] = htm;
+                values[`${name}-text`] = text;
             }
             else if (isCheckbox(node)) {
                 const { checked, value: val } = node;
-                const { [name]: fieldValue } = get(values);
-                let current = fieldValue.split(',');
+                const fieldValue = String(values[name] ?? '');
+                let current = fieldValue?.split(',');
                 if (checked) {
                     current.push(val);
                 }
                 else {
                     current = current.filter((next) => next !== val);
                 }
-                values.update((data) => {
-                    return { ...data, [name]: [...new Set(current)].join(',') };
-                });
+                values[name] = [...new Set(current)].join(',');
             }
             else if (isRadio(node)) {
                 const { value: fvalue } = node;
-                values.update((data) => {
-                    return { ...data, [name]: fvalue };
-                });
+                values[name] = fvalue;
             }
+            validate({ name, value: values[name], validations, node });
+        };
+        $effect(() => {
             const { validate: validateUnfit } = useValidator(unfits, values, validators);
             checkFormFitness(values, validationMap, validateUnfit);
-            isdirty.set(true);
-        };
-        node.addEventListener(validateEvent, updateNode);
-        return {
-            destroy() {
-                unsubscribe?.();
+            const withErrors = Object.values(errors).some(hasError);
+            const withUnfits = Object.values(unfits).some(hasError);
+            sanity.ok = !withErrors && !withUnfits;
+        });
+        $effect(() => {
+            node.addEventListener(validateEvent, updateNode);
+            return () => {
                 node.removeEventListener(validateEvent, updateNode);
-            }
-        };
+            };
+        });
     };
 };

package/dist/form-validators.d.ts

@@ -1,6 +1,4 @@
-import { type Writable } from 'svelte/store';
-import type { ValidateArgs, ValidatorType, ValidatorMap } from './types.js';
-import type { Params } from './internal.js';
+import type { ValidateArgs, ValidatorType, ValidatorMap, FormErrors, FormValues } from './types.js';
 export declare const IS_REQUIRED = "required";
 export declare const IS_EMAIL = "email";
 export declare const IS_URL = "url";
@@ -16,7 +14,7 @@ export declare const IS_MIN = "min";
 export declare const IS_MAX = "max";
 export declare const IT_MATCHES = "match";
 export declare const IS_FILE_SIZE_MB = "file-size-mb";
-export declare const useValidator: (errors: Writable<Params>, values: Writable<Params>, validators?: ValidatorMap<ValidatorType>) => {
+export declare const useValidator: (errors: FormErrors, values: FormValues, validators?: ValidatorMap<ValidatorType>) => {
     validate: ({ name, value, validations, node }: ValidateArgs) => Promise<void>;
     validators: ValidatorMap<ValidatorType>;
 };

package/dist/form-validators.js

@@ -1,4 +1,3 @@
-import { get } from 'svelte/store';
 import { makeName, isValidFileSize } from './utils.js';
 const regexes = {
     number: /^[-+]?[0-9]+(\.[0-9]+)?$/g,
@@ -60,7 +59,7 @@ const getDefaultValidators = () => {
                 : '';
         },
         [IS_MIN_LEN]: ({ value, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: min-length validation requires minimum length.`;
                 }
@@ -72,7 +71,7 @@ const getDefaultValidators = () => {
             return '';
         },
         [IS_MAX_LEN]: ({ value, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: max-length validation requires maximum length.`;
                 }
@@ -84,7 +83,7 @@ const getDefaultValidators = () => {
             return '';
         },
         [IS_LEN]: ({ value, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: length validation requires length.`;
                 }
@@ -96,7 +95,7 @@ const getDefaultValidators = () => {
             return '';
         },
         [IS_MAX]: ({ value, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: max validation requires the maximum value.`;
                 }
@@ -108,7 +107,7 @@ const getDefaultValidators = () => {
             return '';
         },
         [IS_MIN]: ({ value, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: min validation requires the minimum value.`;
                 }
@@ -131,7 +130,7 @@ const getDefaultValidators = () => {
             return '';
         },
         [IS_FILE_SIZE_MB]: ({ value, node, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: max file size in MB validation requires maximum file size of mb value.`;
                 }
@@ -145,9 +144,7 @@ const getDefaultValidators = () => {
 };
 export const useValidator = (errors, values, validators = getDefaultValidators()) => {
     const setError = (name, error) => {
-        errors.update((prev) => {
-            return { ...prev, [name]: error };
-        });
+        errors[name] = error ?? '';
     };
     return {
         validate: async ({ name, value, validations = [], node = undefined }) => {
@@ -164,7 +161,7 @@ export const useValidator = (errors, values, validators = getDefaultValidators()
                         name,
                         label: makeName(name),
                         value,
-                        values: get(values),
+                        values,
                         node,
                         parts
                     });

package/dist/index.svelte.js

@@ -1,55 +1,42 @@
-import { writable, derived, get } from 'svelte/store';
-import { formAction } from './form-action.js';
-import { bindStateToStore } from './utils.js';
+import { formAction } from './form-action.svelte.js';
+import { formState } from './internal.svelte.js';
+import { resetObject } from './utils.js';
 const microform = (props) => {
     // form default values
     const data = props?.data || {};
-    // form values
-    const _values = writable({ ...data });
-    // internal checks
-    const unfits = writable({});
-    // external form errors
-    const _errors = writable({});
-    const isdirty = writable(false);
-    const isclean = derived([_errors, unfits], ([$errors, $unfits]) => {
-        const errVals = Object.values($errors);
-        const unfitVals = Object.values($unfits);
-        return ((errVals.length === 0 ||
-            errVals.reduce((comm, next) => comm && !next, true)) &&
-            (unfitVals.length === 0 ||
-                unfitVals.reduce((comm, next) => comm && !next, true)));
-    });
-    const _valid = derived([isclean, isdirty], ([$isclean, $isdirty]) => {
-        return $isclean && $isdirty;
-    });
+    // form state
+    const state = formState(data);
     const validationMap = {};
     const { options = {
         validateEvent: 'blur',
         validators: {}
     } } = props || {};
-    const form = formAction(_values, _errors, unfits, isdirty, options, validationMap);
+    const form = formAction(state.values, state.errors, state.unfits, state.sanity, options, validationMap);
     const handleSubmit = (e, handler) => {
         e.preventDefault();
-        if (!get(_valid))
+        if (!state.sanity.ok)
             return;
-        handler({ ...get(_values) });
+        handler({ ...state.values });
     };
     const onsubmit = (handler) => {
-        const onSubmit = async (e) => {
+        return (e) => {
             handleSubmit(e, handler);
         };
-        return onSubmit;
     };
     const submit = (formNode, handler) => {
-        formNode.addEventListener('submit', (e) => {
-            handleSubmit(e, handler);
+        $effect(() => {
+            const localHandler = (e) => {
+                handleSubmit(e, handler);
+            };
+            formNode.addEventListener('submit', localHandler);
+            return () => formNode.removeEventListener('submit', localHandler);
         });
     };
     const reset = () => {
-        _errors.set({});
-        unfits.set({});
-        _values.set({ ...data });
-        isdirty.set(false);
+        resetObject(state.values, data);
+        resetObject(state.errors);
+        resetObject(state.unfits);
+        state.sanity.ok = false;
         for (const [name, { nodeRef, html }] of Object.entries(validationMap).filter(([, { nodeRef }]) => !!nodeRef)) {
             if (nodeRef) {
                 if (nodeRef.isContentEditable) {
@@ -61,18 +48,10 @@ const microform = (props) => {
             }
         }
     };
-    const values = $state({ ...data });
-    const errors = $state({});
-    const sanity = $state({ ok: get(_valid) });
-    bindStateToStore(values, _values);
-    bindStateToStore(errors, _errors);
-    _valid.subscribe((changes) => {
-        sanity.ok = changes;
-    });
     return {
-        values,
-        errors,
-        sanity,
+        values: state.values,
+        errors: state.errors,
+        sanity: state.sanity,
         form,
         submit,
         onsubmit,

package/dist/internal.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { FormValues, FormErrors, FormSanity } from "./types.js";
+export type Params<T = any> = {
+    [key: string | number | symbol]: T;
+};
+export type Primitive = string | number | boolean | string[] | number[] | boolean[];
+export type FormState = {
+    values: FormValues;
+    errors: FormErrors;
+    sanity: FormSanity;
+    unfits: FormErrors;
+};
+export declare const formState: (data: Params) => FormState;

package/dist/internal.svelte.js

@@ -0,0 +1,15 @@
+export const formState = (data) => {
+    // form values
+    const values = $state({ ...data });
+    // external form errors
+    const errors = $state({});
+    const sanity = $state({ ok: false });
+    // internal checks
+    const unfits = $state({});
+    return {
+        values,
+        errors,
+        sanity,
+        unfits,
+    };
+};

package/dist/types.d.ts

@@ -1,5 +1,4 @@
-import { type Writable } from 'svelte/store';
-import type { Params } from './internal.js';
+import type { Params } from './internal.svelte.js';
 export type Validator = `max:${number}` | `min:${number}` | `len:${number}` | `minlen:${number}` | `maxlen:${number}` | `file-size-mb:${number}` | `match:${string}` | 'required' | 'email' | 'integer' | 'number' | 'alpha' | 'alphanum' | 'url' | 'ip';
 export type ValidatorKey = 'required' | 'email' | 'integer' | 'number' | 'alpha' | 'alphanum' | 'url' | 'ip' | `max` | `min` | `len` | `minlen` | `maxlen` | `file-size-mb` | `match`;
 export type FieldProps = {
@@ -29,7 +28,7 @@ export type FormReturn = {
 export type ValidateEvent = 'input' | 'change' | 'keyup' | 'blur' | 'keydown';
 export type FormValues = Params;
 export type FormErrors = Params;
-export type Dirty = Writable<boolean>;
+export type Dirty = boolean;
 export type ActionOptions = {
     validateEvent?: ValidateEvent;
     name?: string;
@@ -37,11 +36,11 @@ export type ActionOptions = {
     node?: HTMLElement;
     html?: boolean;
 };
-export type FormAction = (node: HTMLElement, eventProps?: ActionOptions) => FormReturn;
+export type FormAction = (node: HTMLElement, eventProps?: ActionOptions) => void;
 export type FormSubmitEvent = SubmitEvent & {
     currentTarget: EventTarget & HTMLFormElement;
 };
-export type FormSubmit = (_data: Params) => void;
+export type FormSubmit = (_data: Params) => (void | Promise<void>);
 export type FormOptions = {
     validateEvent?: ValidateEvent;
     validators?: Partial<ValidatorMap<ValidatorType>>;
@@ -57,9 +56,9 @@ export type MicroFormReturn = {
     values: FormValues;
     errors: FormErrors;
     sanity: FormSanity;
-    form: (node: HTMLElement, eventProps?: ActionOptions) => FormReturn;
+    form: (node: HTMLElement, eventProps?: ActionOptions) => void;
     submit: (formNode: HTMLFormElement, handler: FormSubmit) => void;
-    onsubmit: (handler: FormSubmit) => (e: Event) => Promise<void>;
+    onsubmit: (handler: FormSubmit) => (e: Event) => void;
     reset: () => void;
 };
 export type Microform = (props?: MicroFormProps) => MicroFormReturn;

package/dist/types.js

@@ -1 +1 @@
-import {} from 'svelte/store';
+export {};

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import type { Writable } from 'svelte/store';
-import type { Params } from './internal.js';
+import type { Params } from "./internal.svelte.js";
+import type { FormValues } from "./types.js";
 type TEvent = {
     target: HTMLElement;
 };
@@ -9,5 +9,5 @@ export declare const getEditableContent: (e: TEvent, isHtml: boolean) => {
 };
 export declare const makeName: (str: string) => string;
 export declare const isValidFileSize: (node: HTMLInputElement | undefined, maxFileSizeInMB: number) => string;
-export declare const bindStateToStore: (state: Params, store: Writable<Params>) => void;
+export declare const resetObject: (target: FormValues, data?: Params | undefined) => void;
 export {};

package/dist/utils.js

@@ -43,10 +43,21 @@ export const isValidFileSize = (node, maxFileSizeInMB) => {
     }
     return '';
 };
-export const bindStateToStore = (state, store) => {
-    store.subscribe((changes) => {
-        for (const [k, v] of Object.entries(changes)) {
-            state[k] = v;
+export const resetObject = (target, data = undefined) => {
+    if (data) {
+        const defaultKeys = Object.keys({ ...data });
+        for (const [key,] of Object.entries(target)) {
+            if (defaultKeys.includes(key)) {
+                target[key] = data[key];
+            }
+            else {
+                delete target[key];
+            }
         }
-    });
+    }
+    else {
+        for (const [key,] of Object.entries(target)) {
+            target[key] = '';
+        }
+    }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@steveesamson/microform",
-	"version": "1.0.9",
+	"version": "1.0.11",
 	"scripts": {
 		"dev": "vite dev",
 		"postbuild": "touch ./docs/.nojekyll",

package/dist/form-action.d.ts

@@ -1,4 +0,0 @@
-import { type Writable } from 'svelte/store';
-import type { FormOptions, FormAction } from './types.js';
-import type { Params } from './internal.js';
-export declare const formAction: (values: Writable<Params>, errors: Writable<Params>, unfits: Writable<Params>, isdirty: Writable<boolean>, options: FormOptions, validationMap: Params) => FormAction;

package/dist/internal.d.ts

@@ -1,4 +0,0 @@
-export type Params<T = any> = {
-    [key: string | number | symbol]: T;
-};
-export type Primitive = string | number | boolean | string[] | number[] | boolean[];

package/dist/internal.js

@@ -1 +0,0 @@
-export {};