@steveesamson/microform 0.0.1

package/README.md

@@ -0,0 +1,322 @@
+# microform
+
+`microform` is a tiny library for managing forms in `svelte/sveltekit`.
+
+## Installation
+
+```bash
+# In your project directory
+npm install microform
+```
+
+or
+
+```bash
+# In your project directory
+yarn add microform
+```
+
+## Usage
+
+Once you've added `microform` to your project, use it as shown below, in your view(`.svelte` files):
+
+### In the view Script
+
+```ts
+<script lang='ts'>
+import uForm from "microform";
+// default form data, probably passed as props
+export let defaultData:any = {};
+
+// Instatiate microform
+const { form, values, errors, submit, valid } = uForm({
+    // Set default form data
+    data:{...defaultData},
+    // Set a global event for validation, can be overriden on a each field.
+    // Possible values: blur, change, input, keyup
+    validateEvent:'blur'
+});
+
+// Submit handler
+// data is the collected form data
+// Only called on valid form
+// A form is valid when it has no error and at least one of the fields has changed
+const onSubmit = (data:unknown) => {
+    console.log(data);
+}
+</script>
+```
+
+On the instantiation of `microform`, we have access to:
+
+- `values`, a `FormValues`, which is a `svelte store` for form data.
+- `errors`, a `FormErrors`, which is a `svelte store` for form errors.
+- `form`, which is a `svelte action` that actually does the `microform` magic.
+- `submit`, which is another `svelte action` to handle form submission.
+- `valid`, a `FormSanity`, which is a `svelte store` that tells if a form is clean/without errors.
+- `reset`, a function to reset form
+- `onsubmit`, a function to handle form submission.
+
+### In the view Html
+
+```html
+    <form use:submit={onSubmit}>
+        <label for='username'>
+            Username:
+            <input
+            type='text'
+            name='username'
+            id='username'
+            use:form
+            data-validations='required'>
+            {#if $errors.username}
+            <small>{$errors.username}</small>
+            {/if}
+        </label>
+         <label for='email_account'>
+            Email Account:
+            <input
+            type='text'
+            name='email_account'
+            id='email_account'
+            use:form={{
+                validations:'required|email'
+            }}/>
+            {#if $errors.email_account}
+            <small>{$errors.email_account}</small>
+            {/if}
+        </label>
+        <label for='gender'>
+            Gender:
+            <select
+            name='gender'
+            id='gender'
+            use:form={{
+                validations:'required',
+                validateEvent:'change'
+            }}>
+                <options value=''>Gender please</option>
+                <options value='F'>Female</option>
+                <options value='M'>Male</option>
+                </select>
+            {#if $errors.gender}
+            <small>{$errors.gender}</small>
+            {/if}
+        </label>
+        <label for='password'>
+            Password:
+            <input
+            type='text'
+            name='password'
+            id='password'
+            use:form
+            data-validations='required'>
+            {#if $errors.password}
+            <small>{$errors.password}</small>
+            {/if}
+        </label>
+         <label for='confirm_password'>
+            Confirm password:
+            <input
+            type='text'
+            name='confirm_password'
+            id='confirm_password'
+            use:form
+            data-validations='required|match:password'>
+            {#if $errors.confirm_password}
+            <small>{$errors.confirm_password}</small>
+            {/if}
+        </label>
+        <label for="story">
+        Story:
+            <div
+                contenteditable="true"
+                use:form={{
+                    validateEvent: 'input',
+                    validations: 'required',
+                    name: 'story',
+                    html: true
+                }}
+            />
+            {#if $errors.story}
+                <small>{$errors.story}</small>
+            {/if}
+        </label>
+
+        <button
+        type='submit'
+        disabled={!$valid}>
+            Submit form
+        </button>
+    </form>
+```
+
+While the above example uses the `submit` action of `microform`, form could also be submitted by using the `onsubmit` function of `microform`. See the following:
+
+```html
+<form>
+	<label for="password">
+		Password:
+		<input type="text" name="password" id="password" use:form data-validations="required" />
+		{#if $errors.password}
+		<small>{$errors.password}</small>
+		{/if}
+	</label>
+	<label for="confirm_password">
+		Confirm password:
+		<input
+			type="text"
+			name="confirm_password"
+			id="confirm_password"
+			use:form
+			data-validations="required|match:password"
+		/>
+		{#if $errors.confirm_password}
+		<small>{$errors.confirm_password}</small>
+		{/if}
+	</label>
+
+	<button type="button" disabled="{!$valid}" on:click="{onsubmit(onSubmit)}">Submit form</button>
+</form>
+```
+
+## microform Features
+
+`microform` performs its magic by relying the `form` action. The `form` action can optionally accept the following:
+
+```javascript
+<input
+	use:form={{
+		// an optional list of validations
+		// default is '' - no validations
+		validations: 'email|length:20',
+		// an optional string of
+		// any of blur, change, input, keyup.
+		// default is blur
+		validateEvent: 'input',
+		// an optional string that allows passing field names
+		// especially useful for contenteditables
+		// that have no native name attribute
+		// default is ''
+		name: '',
+		// an optional boolean indicating
+		// whether content should be treated as plain text or html
+		// also useful for contenteditables
+		// default is false
+		html: true
+	}}
+/>
+```
+
+You need not bind the `values` to your fields except when there is a definite need for it as `form` will coordinate all value changes based on the `data` passed at instantiation, if any. Therefore, constructs like the following might not be neccessary:
+
+```html
+<input
+	type="text"
+	name="email_account"
+	id="email_account"
+	value="{$values.email_account}"
+	data-validations="required|email"
+	use:form
+/>
+```
+
+### 1. Validations
+
+Uses both inline `data-validations` on field and `validations` props on `form` action. For instance, the following are perfectly identical:
+
+```html
+<input
+    type='text'
+    name='email_account'
+    id='email_account'
+    data-validations='required|email'
+    use:form/>
+
+<input
+    type='text'
+    name='email_account'
+    id='email_account'
+    use:form={{
+        validations:'required|email'
+    }}/>
+```
+
+### 2. Validation Event
+
+Validation event can be changed/specified on a per-field basis. For instance, in our example, the global `validateEvent` was set to `blur` but we changed it on the select field to `change` like so:
+
+```html
+<select
+    name='gender'
+    id='gender'
+    use:form={{
+        validations:'required',
+        validateEvent:'change'
+    }}>
+        <options value=''>Gender please</option>
+        <options value='F'>Female</option>
+        <options value='M'>Male</option>
+</select>
+```
+
+### 3. Supports for contenteditable
+
+`microform` supports `contenteditable` out-of-box:
+
+```html
+<form use:submit={onSubmit}>
+    <label for="story">
+	Story:
+        <div
+            contenteditable="true"
+            use:form={{
+                validateEvent: 'input',
+                validations: 'required',
+                name: 'story',
+                html: true
+            }}
+        />
+        {#if $errors.story}
+            <small>{$errors.story}</small>
+        {/if}
+    </label>
+</form>
+```
+
+### 4. Provides usable default validations
+
+`microform` provides a set of usable validations out-of-box. The following is a list of provided validations:
+
+- `required`: Usage, `validations='required'`
+- `email`: Usage, `validations='email'`
+- `url`: Usage, `validations='url'`
+- `ip`: Usage, `validations='ip'`
+- `length`: Usage, `validations='length:40'`
+- `number`: Usage, `validations='number'`
+- `integer`: Usage, `validations='integer'`
+- `alpha`: Usage, `validations='alpha'` - only alphabets
+- `alphanum`: Usage, `validations='alphanum'` - alphanumeric
+- `match`: Usage, `validations='match:<name-of-field-to-match>'`. For instance, this is examplified in our example with `password` and `confirm_password` fields
+- `min-length`: Usage, `validations='min-length:6'`
+- `max-length`: Usage, `validations='max-length:15'`
+- `max`: Usage, `validations='max:25'`
+- `max-file-size-mb`: Usage, `validations='max-file-size-mb:30'` - for file upload
+
+Every validation listed above also comes with a very good default error message.
+
+Finally, the validations can be combined to form a complex graph of validations based on use cases by separating each validation rule with a `pipe`, `|`. For instance, a required field that also should be an email field could be validated thus:
+
+```html
+<input
+	type="text"
+	name="email_account"
+	id="email_account"
+	data-validations="required|email"
+	use:form
+/>
+```
+
+# TODO
+
+I shall be working on how to allow users register their `validators` and `error messages` for the purpose of customisation.

package/dist/form-action.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="svelte" />
+import { type Writable } from "svelte/store";
+import type { ActionOptions, FormErrors, FormOptions, FormValues, Params } from "./types.js";
+export declare const formAction: (values: FormValues, errors: FormErrors, unfits: Writable<Params>, isdirty: Writable<boolean>, options: FormOptions, validationMap: Params) => (node: HTMLElement, eventProps?: ActionOptions) => {
+    destroy(): void;
+};

package/dist/form-action.js

@@ -0,0 +1,69 @@
+import { get } from "svelte/store";
+import { useValidator } from "./form-validators.js";
+import { getEditableContent } from "./utils.js";
+const isField = (node) => {
+    return node instanceof HTMLSelectElement ||
+        node instanceof HTMLInputElement ||
+        node instanceof HTMLTextAreaElement;
+};
+const isExcluded = (node) => {
+    return node instanceof HTMLInputElement && ['radio', 'checkbox', 'file'].includes(node.type.toLowerCase());
+};
+const checkFormFitness = (values, unfits, validationMap) => {
+    const validate = useValidator(unfits, values);
+    const _values = get(values);
+    for (const [name, { validations }] of Object.entries(validationMap)) {
+        validate({ name, value: _values[name], validations, });
+    }
+};
+export const formAction = (values, errors, unfits, isdirty, options, validationMap) => {
+    const validate = useValidator(errors, values);
+    return (node, eventProps) => {
+        const nodeName = isField(node) ? node.name : '';
+        const { name: dsname = nodeName, validations: dsvalidations = '' } = node.dataset || {};
+        const { name = dsname, validations = dsvalidations, validateEvent = options.validateEvent, html = false } = eventProps || {};
+        validationMap[name] = { validations, html, nodeRef: isField(node) ? false : node };
+        const storedValue = get(values)[name] || '';
+        let defValue = storedValue;
+        if (isField(node) && !isExcluded(node)) {
+            defValue = node.value || storedValue;
+            node.value = defValue;
+        }
+        else if (node.isContentEditable) {
+            defValue = node.innerHTML || storedValue;
+            node.innerHTML = defValue;
+        }
+        values.update((data) => {
+            return { ...data, [name]: defValue };
+        });
+        let unsubscribe;
+        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 };
+                });
+            }
+            else if (node.isContentEditable) {
+                const { value: htm, text } = getEditableContent({ target: node }, html);
+                values.update((data) => {
+                    return { ...data, [name]: htm, [`${name}-text`]: text };
+                });
+            }
+            checkFormFitness(values, unfits, validationMap);
+            isdirty.set(true);
+        };
+        node.addEventListener(validateEvent, updateNode);
+        return {
+            destroy() {
+                unsubscribe?.();
+                node.removeEventListener(validateEvent, updateNode);
+            }
+        };
+    };
+};

package/dist/form-validators.d.ts

@@ -0,0 +1,2 @@
+import type { FormErrors, FormValues, ValidateArgs } from "./types.js";
+export declare const useValidator: (errors: FormErrors, values: FormValues) => ({ name, value, validations, node }: ValidateArgs) => Promise<void>;

package/dist/form-validators.js

@@ -0,0 +1,183 @@
+import { get } from "svelte/store";
+import { makeName } from "./utils.js";
+const regexes = {
+    number: /^[-+]?[0-9]+(\.[0-9]+)?$/g,
+    alpha: /^[A-Z\s]+$/gi,
+    alphanum: /^[A-Z]+[A-Z0-9]+$/gi,
+    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,
+};
+const getErrorText = (inputName, errorType, extra = '') => {
+    inputName = makeName(inputName);
+    switch (errorType.toLowerCase()) {
+        case 'required':
+            return inputName + ' is mandatory.';
+        case 'match':
+            return inputName + ' does not match ' + makeName(extra);
+        case 'func':
+            return inputName + extra;
+        case 'captcha':
+            return inputName + ' does not match the image.';
+        case 'email':
+            return inputName + ' should be a valid email.';
+        case 'url':
+            return inputName + ' should be a valid URL.';
+        case 'cron':
+            return inputName + ' should be a valid cron expression.';
+        case 'ip':
+            return inputName + ' should be a valid IP.';
+        case 'integer':
+            return inputName + ' must be an integer.';
+        case 'number':
+            return inputName + ' should be a number.';
+        case 'alpha':
+            return inputName + ' should be a string of alphabets.';
+        case 'alphanum':
+            return inputName + ' should be a string of alphanumerics starting with alphabets.';
+        case 'min-length':
+            return inputName + ' must be at least ' + extra + ' characters long.';
+        case 'max-length':
+            return inputName + ' must not be more than ' + extra + ' characters long.';
+        case 'length':
+            return inputName + ' must be exactly ' + extra + ' characters long.';
+        // case 'length':
+        //     return inputName + ' must not be greater than ' + extra + '.';
+        default:
+            return errorType;
+    }
+};
+const checkFileSize = (node, maxFileSizeInMB) => {
+    if (!node)
+        return "";
+    const { files } = node;
+    if (!files)
+        return `${node.name} is required`;
+    const max = maxFileSizeInMB * 1024 * 1024;
+    for (const file of files) {
+        if (file.size > max) {
+            return `File '${file.name}' is larger the ${maxFileSizeInMB}MB.`;
+        }
+    }
+    return "";
+};
+export const useValidator = (errors, values) => {
+    const setError = (name, error) => {
+        errors.update((prev) => {
+            return { ...prev, [name]: error };
+        });
+    };
+    return async ({ name, value, validations = '', node = undefined }) => {
+        let error = '';
+        if (validations) {
+            const inputName = name, _validations = validations.split('|');
+            for (let i = 0; i < _validations.length; ++i) {
+                const validation = _validations[i], typeDetails = validation.split(':'), type = typeDetails[0].trim();
+                let partyName, partyValue;
+                switch (type.toLowerCase()) {
+                    case 'required':
+                        error = !value || !value.length ? getErrorText(inputName, 'required') : '';
+                        setError(name, error);
+                        break;
+                    case 'match':
+                        error = typeDetails.length < 2 ? inputName + ': match validation requires party target' : '';
+                        setError(name, error);
+                        if (error)
+                            break;
+                        partyName = typeDetails[1].trim();
+                        partyValue = get(values)[partyName] || '';
+                        error = !value || value !== partyValue ? getErrorText(inputName, 'match', typeDetails[1]) : '';
+                        setError(name, error);
+                        break;
+                    case 'email':
+                        error = !value || !value.match(regexes['email']) ? getErrorText(inputName, 'email') : '';
+                        setError(name, error);
+                        break;
+                    case 'url':
+                        error = !value || !value.match(regexes['url']) ? getErrorText(inputName, 'url') : '';
+                        setError(name, error);
+                        break;
+                    case 'ip':
+                        error = !value || !value.match(regexes['ip']) ? getErrorText(inputName, 'ip') : '';
+                        setError(name, error);
+                        break;
+                    case 'integer':
+                        error = !value || !value.match(regexes['integer']) ? getErrorText(inputName, 'integer') : '';
+                        setError(name, error);
+                        break;
+                    case 'number':
+                        error = !value || !value.match(regexes['number']) ? getErrorText(inputName, 'number') : '';
+                        setError(name, error);
+                        break;
+                    case 'alpha':
+                        error = !value || !value.match(regexes['alpha']) ? getErrorText(inputName, 'alpha') : '';
+                        setError(name, error);
+                        break;
+                    case 'alphanum':
+                        error =
+                            !value || !value.match(regexes['alphanum']) ? getErrorText(inputName, 'alphanum') : '';
+                        setError(name, error);
+                        break;
+                    case 'min-length':
+                        error = typeDetails.length < 2 ? inputName + ': min-length validation requires width' : '';
+                        setError(name, error);
+                        if (error)
+                            break;
+                        error =
+                            !value || value.length < parseInt(typeDetails[1], 10)
+                                ? getErrorText(inputName, 'min-length', typeDetails[1])
+                                : '';
+                        setError(name, error);
+                        break;
+                    case 'max-length':
+                        error = typeDetails.length < 2 ? inputName + ': max-length validation requires width' : '';
+                        setError(name, error);
+                        if (error)
+                            break;
+                        error =
+                            !value || value.length > parseInt(typeDetails[1], 10)
+                                ? getErrorText(inputName, 'max-length', typeDetails[1])
+                                : '';
+                        setError(name, error);
+                        break;
+                    case 'length':
+                        error = typeDetails.length < 2 ? inputName + ': length validation requires width' : '';
+                        setError(name, error);
+                        if (error)
+                            break;
+                        error =
+                            !value || value.length !== parseInt(typeDetails[1], 10)
+                                ? getErrorText(inputName, 'length', typeDetails[1])
+                                : '';
+                        setError(name, error);
+                        break;
+                    case 'max':
+                        error = typeDetails.length < 2 ? inputName + ': max validation requires max value' : '';
+                        setError(name, error);
+                        if (error)
+                            break;
+                        error =
+                            !value || parseInt(value, 10) !== parseInt(typeDetails[1], 10)
+                                ? getErrorText(inputName, 'max', typeDetails[1])
+                                : '';
+                        setError(name, error);
+                        break;
+                    case 'max-file-size-mb':
+                        error = typeDetails.length < 2 ? inputName + ': max file size in MB validation requires max-file-size-mb value' : '';
+                        setError(name, error);
+                        if (error)
+                            break;
+                        error = checkFileSize(node, parseInt(typeDetails[1], 10));
+                        setError(name, error);
+                        break;
+                    default:
+                }
+                if (error) {
+                    setError(name, error);
+                    break;
+                }
+            } //end
+        }
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import type { UseFormProps, UseFormReturn } from './types.js';
+declare const useForm: (props?: UseFormProps) => UseFormReturn;
+export default useForm;

package/dist/index.js

@@ -0,0 +1,64 @@
+import { writable, derived, get } from 'svelte/store';
+import { formAction } from './form-action.js';
+const useForm = (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;
+    });
+    const validationMap = {};
+    const { options = {
+        validateEvent: 'blur'
+    } } = props || {};
+    const form = formAction(values, errors, unfits, isdirty, options, validationMap);
+    const handleSubmit = (e, handler) => {
+        e.preventDefault();
+        if (!get(valid))
+            return;
+        handler({ ...get(values) });
+    };
+    const onsubmit = (handler) => {
+        const onSubmit = async (e) => {
+            handleSubmit(e, handler);
+        };
+        return onSubmit;
+    };
+    const submit = (formNode, handler) => {
+        formNode.addEventListener('submit', (e) => {
+            handleSubmit(e, handler);
+        });
+    };
+    const reset = () => {
+        errors.set({});
+        unfits.set({});
+        values.set({ ...data });
+        for (const [name, { nodeRef, html }] of Object.entries(validationMap).filter(([, { nodeRef }]) => !!nodeRef)) {
+            if (nodeRef) {
+                nodeRef[html ? "innerHTML" : 'textContent'] = data[name] || '';
+            }
+        }
+    };
+    return {
+        values,
+        errors,
+        valid,
+        form,
+        submit,
+        onsubmit,
+        reset,
+    };
+};
+export default useForm;

package/dist/types.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="svelte" />
+import { type Writable, type Readable } from "svelte/store";
+export type FieldTypes = "Standard" | "Popover" | "Checkable";
+export type InputTypes = 'text' | 'number' | 'color' | 'time' | 'date' | 'range' | 'email' | 'hidden' | 'password' | 'tel' | 'url';
+export type FieldType = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement;
+export type InputType = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement;
+export interface ValidateArgs {
+    name: string;
+    value: string;
+    validations: string;
+    node?: HTMLElement;
+}
+export type ValidateEvent = 'input' | 'change' | 'keyup' | 'blur';
+export type Params = {
+    [key: string]: string | number | Array<any> | any;
+};
+export type FormValues = Writable<Params>;
+export type FormErrors = Writable<Params>;
+export type Dirty = Writable<boolean>;
+export type ActionOptions = {
+    validateEvent?: ValidateEvent;
+    name?: string;
+    validations?: string;
+    node?: HTMLElement;
+    html?: boolean;
+};
+export type FormAction = (node: HTMLElement, eventProps?: ActionOptions) => {
+    destroy: () => void;
+};
+export type FormSubmitEvent = SubmitEvent & {
+    currentTarget: EventTarget & HTMLFormElement;
+};
+export type FormSubmit = (_data: Params) => void;
+export type FormOptions = {
+    validateEvent: ValidateEvent;
+};
+export type UseFormProps = {
+    data?: Params;
+    options?: FormOptions;
+};
+export type FormSanity = Readable<boolean>;
+export type UseFormReturn = {
+    values: FormValues;
+    errors: FormErrors;
+    form: (node: HTMLElement, eventProps?: ActionOptions) => void;
+    valid: FormSanity;
+    submit: (formNode: HTMLFormElement, handler: FormSubmit) => void;
+    onsubmit: (handler: FormSubmit) => (e: Event) => Promise<void>;
+    reset: () => void;
+};

package/dist/types.js

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

package/dist/utils.d.ts

@@ -0,0 +1,9 @@
+type TEvent = {
+    target: HTMLElement;
+};
+export declare const getEditableContent: (e: TEvent, isHtml: boolean) => {
+    text: string;
+    value: string;
+};
+export declare const makeName: (str: string) => string;
+export {};

package/dist/utils.js

@@ -0,0 +1,32 @@
+export const getEditableContent = (e, isHtml) => {
+    const el = e.target;
+    const text = el.textContent?.trim() || "";
+    if (!isHtml) {
+        return { text, 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;
+    return { value: htm.trim(), text };
+};
+export const makeName = function (str) {
+    const index = str.indexOf('_');
+    if (index < 0) {
+        return str === 'id' ? str.toUpperCase() : str.charAt(0).toUpperCase() + str.substring(1);
+    }
+    const names = str.split('_');
+    let new_name = '';
+    names.forEach(function (s) {
+        new_name += new_name.length > 0 ? ' ' + makeName(s) : makeName(s);
+    });
+    return new_name;
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+	"name": "@steveesamson/microform",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "8.56.0",
+		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/parser": "^6.0.0",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"mdsvex": "^0.11.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.1.9",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"shiki": "^0.14.7"
+	}
+}