@michalzard/svelte-forms 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # svelte-forms
 
+## 1.0.2
+
+### Patch Changes
+
+- adjustes readme
+
+## 1.0.1
+
+### Patch Changes
+
+- updates readme
+
 ## 1.0.0
 
 ### Major Changes

package/README.md

@@ -1,15 +1,89 @@
-# svelte-forms
+# Svelte Form Validation
 
-To install dependencies:
+Svelte 5 Form validation made simple.
+In order to define `intialValues` you pass [valibot](https://www.npmjs.com/package/valibot) schema.
 
-```bash
-bun install
+## Usage example:
+
+```ts
+const { values, errors, touched, markTouched, handleSubmit } = useForm({
+  initialValues: {
+    email: "",
+    password: "",
+  },
+  schema: signInSchema,
+  onSubmit(values) {
+    console.log("submitted ", values);
+    // TODO: add api call
+  },
+});
+```
+
+Valibot schema that you'd use for values(email,password) i.e:
+
+```ts
+export const passwordPolicy = v.pipe(
+  v.string(),
+  v.trim(),
+  v.minLength(8, "Password must be at least 8 characters long."),
+  v.maxLength(64, "Password must be at most 64 characters long."),
+  v.regex(/[A-Z]/, "Password must contain at least 1 uppercase letter."),
+  v.regex(/[0-9]/, "Password must contain at least 1 number."),
+  v.regex(
+    /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
+    "Password must contain at least 1 special character.",
+  ),
+);
+
+export const signInSchema = v.object({
+  email: v.pipe(
+    v.string(),
+    v.trim(),
+    v.email("Please provide a valid email address."),
+  ),
+  password: passwordPolicy,
+});
 ```
 
-To run:
+In order to capture submitted values you simply do:
 
-```bash
-bun run index.ts
+```ts
+  <form onsubmit={handleSubmit}>
 ```
 
-This project was created using `bun init` in bun v1.2.15. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
+To update each value you can simply use `bind:value` to individual writable signals,i.e `$values.email`
+To mark any input element as `touched` you can use `markTouched` function with the name of the field in order for form to track its `touched` state,that way you can display errors conditionally only if you interacted with the form input, without using `$touched.<fieldname>`, you'd be displaying errors immediately.
+
+```ts
+<Input
+    id="email"
+    type="email"
+    placeholder="johndoe@example.com"
+    bind:value={$values.email}
+    onblur={() => markTouched("email")}
+    />
+    {#if $touched.email && $errors.email}
+        <FieldError>{$errors.email}</FieldError>
+    {/if}
+```
+
+If you'd like to adjust how fast validation parsing gets executed since by default we have **debounce interval** of `50ms` you can adjust it by doing:
+
+Example on how to define `500ms` debounce(useful for searchbars that trigger api calls):
+<br/>
+`debounceInterval: 500`
+
+```ts
+const { values, errors, touched, markTouched, handleSubmit } = useForm({
+  initialValues: {
+    email: "",
+    password: "",
+  },
+  schema: signInSchema,
+  debounceInterval:500
+  onSubmit(values) {
+    console.log("submitted ", values);
+    // TODO: add api call
+  },
+});
+```

package/bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "svelte-forms",

package/dist/index.js

@@ -2,27 +2,37 @@ var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __moduleCache = /* @__PURE__ */ new WeakMap;
+function __accessProp(key) {
+  return this[key];
+}
 var __toCommonJS = (from) => {
-  var entry = __moduleCache.get(from), desc;
+  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
   if (entry)
     return entry;
   entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function")
-    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    }));
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (var key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(entry, key))
+        __defProp(entry, key, {
+          get: __accessProp.bind(from, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+        });
+  }
   __moduleCache.set(from, entry);
   return entry;
 };
+var __moduleCache;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: (newValue) => all[name] = () => newValue
+      set: __exportSetter.bind(all, name)
     });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalzard/svelte-forms",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "type": "module",