@steveesamson/microform 1.0.8 → 1.0.10

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

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

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

@@ -1,13 +1,12 @@
-import { get } from "svelte/store";
-import { useValidator } from "./form-validators.js";
-import { getEditableContent } from "./utils.js";
+import { useValidator } from './form-validators.js';
+import { getEditableContent } from './utils.js';
 const isField = (node) => {
-    return node instanceof HTMLSelectElement ||
+    return (node instanceof HTMLSelectElement ||
         node instanceof HTMLInputElement ||
-        node instanceof HTMLTextAreaElement;
+        node instanceof HTMLTextAreaElement);
 };
 const isExcluded = (node) => {
-    return node instanceof HTMLInputElement && ['radio', 'checkbox'].includes(node.type.toLowerCase());
+    return (node instanceof HTMLInputElement && ['radio', 'checkbox'].includes(node.type.toLowerCase()));
 };
 const isCheckbox = (node) => {
     return node instanceof HTMLInputElement && ['checkbox'].includes(node.type.toLowerCase());
@@ -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, reportDirty, 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 || {};
+        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,50 @@ 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;
+        let eventBound = $state(false);
         const updateNode = (e) => {
-            if (!unsubscribe) {
-                unsubscribe = values.subscribe((data) => {
-                    validate({ name, value: data[name], validations, node });
-                });
+            if (!eventBound) {
+                eventBound = true;
             }
             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;
             }
             const { validate: validateUnfit } = useValidator(unfits, values, validators);
             checkFormFitness(values, validationMap, validateUnfit);
-            isdirty.set(true);
+            validate({ name, value: values[name], validations, node });
+            const withErrors = Object.values(errors).some(hasError);
+            const withUnfits = Object.values(unfits).some(hasError);
+            const clean = !withErrors && !withUnfits;
+            reportDirty(clean);
         };
-        node.addEventListener(validateEvent, updateNode);
-        return {
-            destroy() {
-                unsubscribe?.();
+        $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,5 +1,4 @@
-import { get } from "svelte/store";
-import { makeName, isValidFileSize } from "./utils.js";
+import { makeName, isValidFileSize } from './utils.js';
 const regexes = {
     number: /^[-+]?[0-9]+(\.[0-9]+)?$/g,
     alpha: /^[A-Z\s]+$/gi,
@@ -7,22 +6,22 @@ const regexes = {
     integer: /^[-+]?\d+$/g,
     email: /^[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4}$/gi,
     url: /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i,
-    ip: /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/g,
+    ip: /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/g
 };
-export const IS_REQUIRED = "required";
-export const IS_EMAIL = "email";
-export const IS_URL = "url";
-export const IS_IP = "ip";
-export const IS_INTEGER = "integer";
-export const IS_NUMBER = "number";
-export const IS_ALPHA = "alpha";
-export const IS_ALPHANUM = "alphanum";
-export const IS_MIN_LEN = "minlen";
-export const IS_MAX_LEN = "maxlen";
-export const IS_LEN = "len";
-export const IS_MIN = "min";
-export const IS_MAX = "max";
-export const IT_MATCHES = "match";
+export const IS_REQUIRED = 'required';
+export const IS_EMAIL = 'email';
+export const IS_URL = 'url';
+export const IS_IP = 'ip';
+export const IS_INTEGER = 'integer';
+export const IS_NUMBER = 'number';
+export const IS_ALPHA = 'alpha';
+export const IS_ALPHANUM = 'alphanum';
+export const IS_MIN_LEN = 'minlen';
+export const IS_MAX_LEN = 'maxlen';
+export const IS_LEN = 'len';
+export const IS_MIN = 'min';
+export const IS_MAX = 'max';
+export const IT_MATCHES = 'match';
 export const IS_FILE_SIZE_MB = 'file-size-mb';
 const getDefaultValidators = () => {
     const validators = {
@@ -30,78 +29,94 @@ const getDefaultValidators = () => {
             if (!value || (Array.isArray(value) && !value.length)) {
                 return `${label} is mandatory.`;
             }
-            return "";
+            return '';
         },
         [IS_EMAIL]: ({ value, label }) => {
-            return (!!value && !value.match(regexes['email'])) ? `${label} should be a valid email.` : '';
+            return !!value && !value.match(regexes['email']) ? `${label} should be a valid email.` : '';
         },
         [IS_URL]: ({ value, label }) => {
-            return !!value && !value.match(regexes['url']) ? `${label} should be a valid URL.` : "";
+            return !!value && !value.match(regexes['url']) ? `${label} should be a valid URL.` : '';
         },
         [IS_IP]: ({ value, label }) => {
-            return !!value && !value.match(regexes['ip']) ? `${label} should be a valid IP.` : "";
+            return !!value && !value.match(regexes['ip']) ? `${label} should be a valid IP.` : '';
         },
         [IS_INTEGER]: ({ value, label }) => {
-            return !!value && !value.match(regexes['integer']) ? `${label} must be an integer number.` : "";
+            return !!value && !value.match(regexes['integer'])
+                ? `${label} must be an integer number.`
+                : '';
         },
         [IS_NUMBER]: ({ value, label }) => {
-            return !!value && !value.match(regexes['number']) ? `${label} must be a number.` : "";
+            return !!value && !value.match(regexes['number']) ? `${label} must be a number.` : '';
         },
         [IS_ALPHA]: ({ value, label }) => {
-            return !!value && !value.match(regexes['alpha']) ? `${label} should be a string of alphabets.` : "";
+            return !!value && !value.match(regexes['alpha'])
+                ? `${label} should be a string of alphabets.`
+                : '';
         },
         [IS_ALPHANUM]: ({ value, label }) => {
-            return !!value && !value.match(regexes['alphanum']) ? `${label} should be a string of alphanumerics starting with alphabets.` : "";
+            return !!value && !value.match(regexes['alphanum'])
+                ? `${label} should be a string of alphanumerics starting with alphabets.`
+                : '';
         },
         [IS_MIN_LEN]: ({ value, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: min-length validation requires minimum length.`;
                 }
                 const extra = parts[1].trim();
-                return value.length >= parseInt(parts[1], 10) ? "" : `${label} must be at least ${extra} characters long.`;
+                return value.length >= parseInt(parts[1], 10)
+                    ? ''
+                    : `${label} must be at least ${extra} characters long.`;
             }
-            return "";
+            return '';
         },
         [IS_MAX_LEN]: ({ value, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: max-length validation requires maximum length.`;
                 }
                 const extra = parts[1].trim();
-                return value.length <= parseInt(parts[1], 10) ? "" : `${label} must be at most ${extra} characters long.`;
+                return value.length <= parseInt(parts[1], 10)
+                    ? ''
+                    : `${label} must be at most ${extra} characters long.`;
             }
-            return "";
+            return '';
         },
         [IS_LEN]: ({ value, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: length validation requires length.`;
                 }
                 const extra = parts[1].trim();
-                return value.length === parseInt(parts[1], 10) ? "" : `${label} must exactly be ${extra} characters long.`;
+                return value.length === parseInt(parts[1], 10)
+                    ? ''
+                    : `${label} must exactly be ${extra} characters long.`;
             }
-            return "";
+            return '';
         },
         [IS_MAX]: ({ value, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: max validation requires the maximum value.`;
                 }
                 const extra = parts[1].trim();
-                return parseInt(value, 10) <= parseInt(parts[1], 10) ? "" : `${label} must not be greater than ${extra}.`;
+                return parseInt(value, 10) <= parseInt(parts[1], 10)
+                    ? ''
+                    : `${label} must not be greater than ${extra}.`;
             }
-            return "";
+            return '';
         },
         [IS_MIN]: ({ value, label, parts }) => {
-            if (!!value) {
+            if (value) {
                 if (!parts || parts.length < 2) {
                     return `${label}: min validation requires the minimum value.`;
                 }
                 const extra = parts[1].trim();
-                return parseInt(value, 10) >= parseInt(parts[1], 10) ? "" : `${label} must not be less than ${extra}.`;
+                return parseInt(value, 10) >= parseInt(parts[1], 10)
+                    ? ''
+                    : `${label} must not be less than ${extra}.`;
             }
-            return "";
+            return '';
         },
         [IT_MATCHES]: ({ values, value, label, parts }) => {
             if (value) {
@@ -110,40 +125,46 @@ const getDefaultValidators = () => {
                 }
                 const partyName = parts[1].trim();
                 const partyValue = values[partyName];
-                return value === partyValue ? "" : `${label} does not match ${makeName(partyName)}.`;
+                return value === partyValue ? '' : `${label} does not match ${makeName(partyName)}.`;
             }
-            return "";
+            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.`;
-                    ;
                 }
                 const extra = parts[1].trim();
                 return isValidFileSize(node, parseInt(extra, 10));
             }
-            return "";
+            return '';
         }
     };
     return validators;
 };
 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 }) => {
             if (validations.length) {
-                const _validations = validations.includes('required') ? ['required', ...validations.filter((val) => val !== 'required')] : [...validations];
+                const _validations = validations.includes('required')
+                    ? ['required', ...validations.filter((val) => val !== 'required')]
+                    : [...validations];
                 for (let i = 0; i < _validations.length; ++i) {
                     const validation = _validations[i], parts = validation.split(':'), type = parts[0].trim();
                     const validator = validators[type];
                     if (!validator)
                         return;
-                    const error = validator({ name, label: makeName(name), value, values: get(values), node, parts });
+                    const error = validator({
+                        name,
+                        label: makeName(name),
+                        value,
+                        values,
+                        node,
+                        parts
+                    });
                     setError(name, error ? error : '');
                     if (error) {
                         break;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./types.js";
-export { IS_EMAIL, IS_ALPHA, IS_ALPHANUM, IS_INTEGER, IS_IP, IS_LEN, IT_MATCHES as IS_MATCH_FOR, IS_MAX, IS_FILE_SIZE_MB as IS_MAX_FILE_SIZE, IS_MAX_LEN, IS_MIN, IS_MIN_LEN, IS_NUMBER, IS_REQUIRED, IS_URL } from "./form-validators.js";
-import microform from "./index.svelte.js";
+export * from './types.js';
+export { IS_EMAIL, IS_ALPHA, IS_ALPHANUM, IS_INTEGER, IS_IP, IS_LEN, IT_MATCHES as IS_MATCH_FOR, IS_MAX, IS_FILE_SIZE_MB as IS_MAX_FILE_SIZE, IS_MAX_LEN, IS_MIN, IS_MIN_LEN, IS_NUMBER, IS_REQUIRED, IS_URL } from './form-validators.js';
+import microform from './index.svelte.js';
 export default microform;

package/dist/index.js

@@ -1,4 +1,4 @@
-export * from "./types.js";
-export { IS_EMAIL, IS_ALPHA, IS_ALPHANUM, IS_INTEGER, IS_IP, IS_LEN, IT_MATCHES as IS_MATCH_FOR, IS_MAX, IS_FILE_SIZE_MB as IS_MAX_FILE_SIZE, IS_MAX_LEN, IS_MIN, IS_MIN_LEN, IS_NUMBER, IS_REQUIRED, IS_URL } from "./form-validators.js";
-import microform from "./index.svelte.js";
+export * from './types.js';
+export { IS_EMAIL, IS_ALPHA, IS_ALPHANUM, IS_INTEGER, IS_IP, IS_LEN, IT_MATCHES as IS_MATCH_FOR, IS_MAX, IS_FILE_SIZE_MB as IS_MAX_FILE_SIZE, IS_MAX_LEN, IS_MIN, IS_MIN_LEN, IS_NUMBER, IS_REQUIRED, IS_URL } from './form-validators.js';
+import microform from './index.svelte.js';
 export default microform;

package/dist/index.svelte.js

@@ -1,36 +1,24 @@
-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';
 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 updateSanity = (isOk) => {
+        state.sanity.ok = isOk;
+    };
+    const form = formAction(state.values, state.errors, state.unfits, updateSanity, 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) => {
@@ -44,37 +32,37 @@ const microform = (props) => {
         });
     };
     const reset = () => {
-        _errors.set({});
-        unfits.set({});
-        _values.set({ ...data });
-        isdirty.set(false);
+        const defaultKeys = Object.keys({ ...data });
+        for (const [key,] of Object.entries(state.values)) {
+            if (defaultKeys.includes(key)) {
+                state.values[key] = data[key];
+            }
+            else {
+                delete state.values[key];
+            }
+        }
+        state.errors = {};
+        state.unfits = {};
+        state.sanity.ok = false;
         for (const [name, { nodeRef, html }] of Object.entries(validationMap).filter(([, { nodeRef }]) => !!nodeRef)) {
             if (nodeRef) {
                 if (nodeRef.isContentEditable) {
-                    nodeRef[html ? "innerHTML" : 'textContent'] = data[name] || '';
+                    nodeRef[html ? 'innerHTML' : 'textContent'] = data[name] || '';
                 }
                 else {
-                    nodeRef["value"] = data[name] || '';
+                    nodeRef['value'] = data[name] || '';
                 }
             }
         }
     };
-    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,
-        reset,
+        reset
     };
 };
 export default microform;

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 = {
@@ -26,10 +25,10 @@ export interface ValidateArgs {
 export type FormReturn = {
     destroy: () => void;
 };
-export type ValidateEvent = 'input' | 'change' | 'keyup' | 'blur';
+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,7 +36,7 @@ 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;
 };
@@ -57,7 +56,7 @@ 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>;
     reset: () => void;

package/dist/types.js

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

package/dist/utils.d.ts

@@ -1,5 +1,3 @@
-import type { Writable } from "svelte/store";
-import type { Params } from "./internal.js";
 type TEvent = {
     target: HTMLElement;
 };
@@ -9,5 +7,4 @@ 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 {};

package/dist/utils.js

@@ -1,21 +1,20 @@
 export const getEditableContent = (e, isHtml) => {
     const el = e.target;
-    const text = el.textContent?.trim() || "";
+    const text = el.textContent?.trim() || '';
     if (!isHtml) {
         return { text, value: text };
     }
+    if (!text) {
+        return { value: '', text };
+    }
     let htm = el.innerHTML;
     htm = htm.trim();
-    htm = htm.replace(/<br>/g, "");
-    htm = htm.replace(/<div><\/div>/g, "");
-    htm = htm.replace(/<p><\/p>/g, "");
-    htm = htm.replace(/<div>/g, "<p>");
-    htm = htm.replace(/<\/div>/g, "</p>");
-    htm = htm.trim()
-        ? htm.indexOf("<p>") === -1
-            ? `<p>${htm}</p>`
-            : htm
-        : htm;
+    htm = htm.replace(/<br>/g, '');
+    htm = htm.replace(/<div><\/div>/g, '');
+    htm = htm.replace(/<p><\/p>/g, '');
+    htm = htm.replace(/<div>/g, '<p>');
+    htm = htm.replace(/<\/div>/g, '</p>');
+    htm = htm.trim() ? (htm.indexOf('<p>') === -1 ? `<p>${htm}</p>` : htm) : htm;
     return { value: htm.trim(), text };
 };
 export const makeName = function (str) {
@@ -44,10 +43,10 @@ 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 bindStateToStore = (state: Params, store: Writable<Params>): void => {
+// 	store.subscribe((changes: Params) => {
+// 		for (const [k, v] of Object.entries(changes)) {
+// 			state[k] = v;
+// 		}
+// 	});
+// };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@steveesamson/microform",
-	"version": "1.0.8",
+	"version": "1.0.10",
 	"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 {};