@steveesamson/microform 1.0.5 → 1.0.6

package/README.md

@@ -31,7 +31,8 @@ import uform  from "@steveesamson/microform";
 let defaultData:any = $props();
 
 // Instatiate microform
-const { form, values, errors, submit, sanity } = uform({
+// const { form, values, errors, submit, sanity } = uform({
+const { form, values, errors, submit, sanity, setValue, setError } = uform({
     // Set default form data
     data:{...defaultData},
     // Set a global event for validation, can be overriden on a each field.
@@ -63,6 +64,8 @@ On the instantiation of `microform`, we have access to:
 - `sanity`, a `FormSanity`, which tells us if a form is clean/without errors by it's `ok` property.
 - `reset`, a function to reset form
 - `onsubmit`, a function to handle form submission.
+- `setValue`, a function to mutate state in order to avoid `ownership_invalid_mutation` errors, especially, when values is fed as props to other components that intend to mutate `values` states.
+- `setError`, is a function introduced for the same reason `setValue` was added; it give privileges to components authored on `microform` that may mutate the `errors` state.
 
 ### In the view Html
 
@@ -70,11 +73,11 @@ On the instantiation of `microform`, we have access to:
     <form use:submit={onSubmit}>
         <label for="fullname">
 			Name:
-			<input 
-			type="text" 
-			name="fullname" 
-			id="fullname" 
-			use:form={{ validations: ['required'] }} 
+			<input
+			type="text"
+			name="fullname"
+			id="fullname"
+			use:form={{ validations: ['required'] }}
 			/>
 			{#if errors.fullname}
 				<small>{errors.fullname}</small>
@@ -82,11 +85,11 @@ On the instantiation of `microform`, we have access to:
 		</label>
 		<label for="dob">
 			DOB:
-			<input 
-			type="date" 
-			name="dob" 
-			id="dob" 
-			use:form={{ validations: ['required'] }} 
+			<input
+			type="date"
+			name="dob"
+			id="dob"
+			use:form={{ validations: ['required'] }}
 			/>
 			{#if errors.dob}
 				<small>{errors.dob}</small>
@@ -149,9 +152,9 @@ On the instantiation of `microform`, we have access to:
 				type="file"
 				name="resume"
 				id="resume"
-				use:form={{ 
-					validateEvent:'change', 
-					validations: ['required', 'file-size-mb:3'] 
+				use:form={{
+					validateEvent:'change',
+					validations: ['required', 'file-size-mb:3']
 				}}
 			/>
 			{#if errors.resume}
@@ -160,9 +163,9 @@ On the instantiation of `microform`, we have access to:
 		</label>
 		<label for="comment">
 			Comment:
-			<textarea 
-			name="comment" 
-			id="comment" 
+			<textarea
+			name="comment"
+			id="comment"
 			use:form={{ validations: ['required'] }}
 			></textarea>
 			{#if errors.comment}
@@ -209,11 +212,11 @@ On the instantiation of `microform`, we have access to:
 			Story:
 			<div
 				contenteditable="true"
-				use:form={{ 
-				 	validateEvent: 'input', 
-					validations: ['required'], 
-					name: 'story', 
-					html: true 
+				use:form={{
+				 	validateEvent: 'input',
+					validations: ['required'],
+					name: 'story',
+					html: true
 				}}
 			></div>
 			{#if errors.story}
@@ -235,10 +238,10 @@ While the above example uses the `submit` action of `microform`, form could also
 <form>
 	<label for="password">
 		Password:
-		<input 
-            type="text" 
-            name="password" 
-            id="password" 
+		<input
+            type="text"
+            name="password"
+            id="password"
             use:form={{
 				validations: ['required']
             }}
@@ -254,7 +257,7 @@ While the above example uses the `submit` action of `microform`, form could also
 			name="confirm_password"
 			id="confirm_password"
 			use:form={{
-				validations: ['required','match:password'], 
+				validations: ['required','match:password'],
             }}
 		/>
 		{#if errors.confirm_password}
@@ -297,10 +300,7 @@ While the above example uses the `submit` action of `microform`, form could also
 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
-    ...
-	value="{values.email_account}"
-/>
+<input ... value="{values.email_account}" />
 ```
 
 ### 1. Validations
@@ -395,9 +395,11 @@ Finally, the validations can be combined to form a complex graph of validations
 ```
 
 # Overriding validators
+
 Validators could be overriden to provide custom validation and/or messages besides the default ones. For instance, let us overide the `len` validation rule. Every non-empty string/message returned from a validator's call becomes the error to be displayed to the user; and it shows up in the `errors` keyed by the field name.
 
 ### Approach 1
+
 ```ts
 <script>
 import uform, { type FieldProps } from "@steveesamson/microform";
@@ -427,7 +429,9 @@ const { form, values, errors, submit, sanity } = uform({
 });
 </script>
 ```
+
 Instead of using the literal validation keys like `len`, `required` etc., while overriding validators, the exported key namee could be used. The key names are:
+
 - IS_REQUIRED = `required`
 - IS_EMAIL = `email`
 - IS_URL = `url`
@@ -447,6 +451,7 @@ Instead of using the literal validation keys like `len`, `required` etc., while
 Therefore, the following is equivalent to the configuration in `Approach 1`:
 
 ### Approach 2
+
 ```ts
 <script>
 import uform, { type FieldProps, IS_LEN } from "@steveesamson/microform";
@@ -488,4 +493,4 @@ The validation will be used on the view as below:
         validations:['required','len:30']
     }}
 />
-```
+```

package/dist/form-action.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import { type Writable } from "svelte/store";
 import type { FormOptions, FormAction } from "./types.js";
 import type { Params } from "./internal.js";

package/dist/form-validators.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import { type Writable } from "svelte/store";
 import type { ValidateArgs, ValidatorType, ValidatorMap } from "./types.js";
 import type { Params } from "./internal.js";

package/dist/index.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { Microform } from './types.js';
+declare const microform: Microform;
+export default microform;

package/dist/index.svelte.js

@@ -2,7 +2,6 @@ import { writable, derived, get } from 'svelte/store';
 import { formAction } from './form-action.js';
 import { bindStateToStore } from "./utils.js";
 const microform = (props) => {
-    // form default values
     const data = props?.data || {};
     // form values
     const _values = writable({ ...data });
@@ -62,6 +61,12 @@ const microform = (props) => {
     const values = $state({ ...data });
     const errors = $state({});
     const sanity = $state({ ok: get(_valid) });
+    const setValue = (field, value) => {
+        values[field] = value;
+    };
+    const setError = (field, value) => {
+        errors[field] = value;
+    };
     bindStateToStore(values, _values);
     bindStateToStore(errors, _errors);
     _valid.subscribe((changes) => {
@@ -75,6 +80,8 @@ const microform = (props) => {
         submit,
         onsubmit,
         reset,
+        setError,
+        setValue
     };
 };
 export default microform;

package/dist/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import { type Writable } from "svelte/store";
 import type { Params } from "./internal.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';
@@ -62,5 +61,7 @@ export type MicroFormReturn = {
     submit: (formNode: HTMLFormElement, handler: FormSubmit) => void;
     onsubmit: (handler: FormSubmit) => (e: Event) => Promise<void>;
     reset: () => void;
+    setValue: (key: string, value: unknown) => void;
+    setError: (key: string, value: unknown) => void;
 };
 export type Microform = (props?: MicroFormProps) => MicroFormReturn;

package/dist/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { Writable } from "svelte/store";
 import type { Params } from "./internal.js";
 type TEvent = {

package/package.json

@@ -1,22 +1,24 @@
 {
 	"name": "@steveesamson/microform",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"scripts": {
 		"dev": "vite dev",
 		"postbuild": "touch ./docs/.nojekyll",
 		"prebuild": "rm -fr ./docs & rm -fr ./dist",
-		"build": "vite build && npm run package",
+		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run"
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/steveesamson/microform.git"
+		"url": "git+https://github.com/steveesamson/microform.git"
 	},
 	"exports": {
 		".": {
@@ -31,31 +33,41 @@
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"type": "module",
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.0.0",
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.16.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",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.4",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"jsdom": "^26.0.0",
+		"mdsvex": "^0.12.3",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"publint": "^0.3.2",
 		"shiki": "^0.14.7",
-		"svelte-check": "^3.6.0",
-		"tslib": "^2.4.1",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.0.0",
+		"vitest": "^3.0.0"
 	},
 	"default": "./dist/index.js",
 	"types": "./dist/index.d.ts",
-	"type": "module",
 	"keywords": [
 		"microform",
 		"microform-svelte",
@@ -68,8 +80,5 @@
 		"sveltekit",
 		"svelte-kit",
 		"sveltekit-microform"
-	],
-	"dependencies": {
-		"svelte": "^5.0.0-next.210"
-	}
+	]
 }