solid-hook-form 1.4.0 → 1.4.2

package/README.md

@@ -1,8 +1,17 @@
 # Solid Hook Form
 
-### Playground
+[<img width="1171" alt="Screenshot 2025-04-05 at 15 01 47" src="https://github.com/tatsmaki/solid-hook-form/blob/master/assets/demo.png" />](https://tatsmaki.github.io/solid-hook-form)
 
-[<img width="1171" alt="Screenshot 2025-04-05 at 15 01 47" src="https://github.com/tatsmaki/solid-hook-form/blob/master/assets/demo.png" />](https://solid-hook-form.vercel.app/)
+<p align="center">
+  <a href="https://tatsmaki.github.io/solid-hook-form/#/quickstart">Get started</a> | 
+  <a href="https://solid-hook-form.vercel.app/">Playground</a> 
+</p>
+
+### Features
+
+- Embraces native HTML form [validation](https://tatsmaki.github.io/solid-hook-form/#/quickstart?id=apply-validation)
+- [Small size](https://bundlephobia.com/package/solid-hook-form@latest) and no [dependencies](./package.json)
+- TypeScript [support](https://tatsmaki.github.io/solid-hook-form/#/quickstart?id=typescript)
 
 ### Install
 
@@ -10,42 +19,23 @@
 npm install solid-hook-form
 ```
 
-### Quickstart
+### Quick start
 
-```tsx
+```jsx
 import { useForm } from "solid-hook-form";
 
-const Form = () => {
-  const { errors, isValid, register, onSubmit } = useForm({
+const ExampleForm = () => {
+  const { errors, register, onSubmit } = useForm({
     defaultValues: {
-      date: new Date().toISOString().split("T")[0],
-      email: "",
-      password: "",
-      age: 0,
-      remember: false,
+      name: "",
     },
   });
 
+  const submitExample = (values) => console.log(values);
+
   return (
-    <form onSubmit={onSubmit(handleSubmit)}>
-      <input type="date" {...register("date", { required: "Required" })} />;
-      <input
-        {...register("email", {
-          required: "Required",
-          pattern: {
-            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-            message: "Invalid email",
-          },
-        })}
-      />
-      <input
-        {...register("password", {
-          required: "Required",
-          minLength: { value: 8, message: "Min 8" },
-        })}
-      />
-      <input type="number" {...register("age", { min: 18, max: 100 })} />
-      <input type="checkbox" {...register("remember", { required: "Required" })} />
+    <form onSubmit={onSubmit(submitExample)}>
+      <input {...register("name", { minLength: 2, pattern: /[A-Za-z]/ })} />;
       <button type="submit">Submit</button>
     </form>
   );

package/dist/logic/get_value.d.ts

@@ -1 +1 @@
-export declare const getFieldValue: (event: Event) => string | boolean | FileList | null;
+export declare const getFieldValue: (event: Event) => string | boolean | File[];

package/dist/main.js

@@ -1,7 +1,7 @@
 import { createSignal as d, createContext as H, createComponent as T, useContext as q } from "solid-js";
 const S = (e) => {
   const n = e.target;
-  return n instanceof HTMLSelectElement ? n.value : n instanceof HTMLInputElement && n.type === "checkbox" ? n.checked : n instanceof HTMLInputElement && n.type === "file" ? n.files : n.value;
+  return n instanceof HTMLSelectElement ? n.value : n instanceof HTMLInputElement && n.type === "checkbox" ? n.checked : n instanceof HTMLInputElement && n.type === "file" ? [...n.files || []] : n.value;
 }, y = (e, n) => {
   if (e instanceof HTMLSelectElement) {
     e.value = n;

package/dist/main.umd.cjs

@@ -1 +1 @@
-(function(f,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("solid-js")):typeof define=="function"&&define.amd?define(["exports","solid-js"],a):(f=typeof globalThis<"u"?globalThis:f||self,a(f["solid-hook-form"]={},f.solid))})(this,function(f,a){"use strict";const b=e=>{const n=e.target;return n instanceof HTMLSelectElement?n.value:n instanceof HTMLInputElement&&n.type==="checkbox"?n.checked:n instanceof HTMLInputElement&&n.type==="file"?n.files:n.value},h=(e,n)=>{if(e instanceof HTMLSelectElement){e.value=n;return}if(e instanceof HTMLInputElement&&e.type==="checkbox"){e.checked=n;return}e instanceof HTMLInputElement&&e.type==="file"||(e.value=n)},l=e=>e instanceof RegExp||typeof e=="string"||typeof e=="number"?e:e.value,d=e=>typeof e=="string"?e:typeof e.message=="string"?e.message:"",C=(e,n,r={})=>{const s=e[n];if(r.required&&!s)return{type:"required",message:d(r.required)};if(r.min&&Number(s)<Number(l(r.min)))return{type:"min",message:d(r.min)};if(r.max&&Number(s)>Number(l(r.max)))return{type:"max",message:d(r.max)};if(r.minLength&&s.length<l(r.minLength))return{type:"minLength",message:d(r.minLength)};if(r.maxLength&&s.length>l(r.maxLength))return{type:"maxLength",message:d(r.maxLength)};if(r.pattern&&!l(r.pattern).test(s))return{type:"pattern",message:d(r.pattern)};if(r.validate){const c=r.validate(s,e);if(c===!1)return{type:"validate"};if(typeof c=="string")return{type:"validate",message:c}}},k=()=>{const[e,n]=a.createSignal({});return{errors:e,appendError:(u,m)=>{n(p=>({...p,[u]:m}))},removeError:u=>{n(m=>{const p={...m};return delete p[u],p})},resetErrors:()=>{n({})}}},I=({defaultValues:e,mode:n="onInput"})=>{const r={},s={},[c,u]=a.createSignal(e),{errors:m,appendError:p,removeError:M,resetErrors:V}=k(),[v,E]=a.createSignal(!0),j=(t,o)=>{const i=r[t];i&&(o.ref=i),p(t,o)},q=t=>{M(t)},x=t=>{const o=s[t],i=C(c(),t,o);i?j(t,i):q(t),E(!Object.keys(m()).length)},H=()=>{Object.keys(c()).forEach(t=>{x(t)})},P=()=>{var o;const t=Object.keys(r);for(const i of t){const g=m()[i];if(g){(o=g.ref)==null||o.focus();break}}},L=(t,o)=>{const i=b(t);u(g=>({...g,[o]:i})),x(o)},N=(t,o={})=>(s[t]={required:o.required,min:o.min,max:o.max,minLength:o.minLength,maxLength:o.maxLength,pattern:o.pattern,validate:o.validate},{name:t,onInput(i){n==="onInput"&&L(i,t)},onChange(i){(n==="onChange"||n==="onInput")&&L(i,t)},ref(i){r[t]||(r[t]=i,i&&h(i,c()[t]))}}),F=t=>t?c()[t]:c();return{values:c,errors:m,isValid:v,register:N,getValues:F,setValue:(t,o)=>{u(g=>({...g,[t]:o}));const i=r[t];i&&h(i,o)},onSubmit:t=>o=>{o.preventDefault(),H(),v()&&t(F()),P()},reset:(t={})=>{u(()=>({...e,...t})),V(),E(!0)}}},y=a.createContext(),S=e=>a.createComponent(y.Provider,{get value(){return e.form},get children(){return e.children}}),T=()=>{const e=a.useContext(y);if(!e)throw new Error("useFormContext: cannot find a FormProvider");return e};f.FormProvider=S,f.useForm=I,f.useFormContext=T,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
+(function(f,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("solid-js")):typeof define=="function"&&define.amd?define(["exports","solid-js"],a):(f=typeof globalThis<"u"?globalThis:f||self,a(f["solid-hook-form"]={},f.solid))})(this,function(f,a){"use strict";const b=e=>{const n=e.target;return n instanceof HTMLSelectElement?n.value:n instanceof HTMLInputElement&&n.type==="checkbox"?n.checked:n instanceof HTMLInputElement&&n.type==="file"?[...n.files||[]]:n.value},h=(e,n)=>{if(e instanceof HTMLSelectElement){e.value=n;return}if(e instanceof HTMLInputElement&&e.type==="checkbox"){e.checked=n;return}e instanceof HTMLInputElement&&e.type==="file"||(e.value=n)},l=e=>e instanceof RegExp||typeof e=="string"||typeof e=="number"?e:e.value,d=e=>typeof e=="string"?e:typeof e.message=="string"?e.message:"",C=(e,n,r={})=>{const s=e[n];if(r.required&&!s)return{type:"required",message:d(r.required)};if(r.min&&Number(s)<Number(l(r.min)))return{type:"min",message:d(r.min)};if(r.max&&Number(s)>Number(l(r.max)))return{type:"max",message:d(r.max)};if(r.minLength&&s.length<l(r.minLength))return{type:"minLength",message:d(r.minLength)};if(r.maxLength&&s.length>l(r.maxLength))return{type:"maxLength",message:d(r.maxLength)};if(r.pattern&&!l(r.pattern).test(s))return{type:"pattern",message:d(r.pattern)};if(r.validate){const c=r.validate(s,e);if(c===!1)return{type:"validate"};if(typeof c=="string")return{type:"validate",message:c}}},k=()=>{const[e,n]=a.createSignal({});return{errors:e,appendError:(u,m)=>{n(p=>({...p,[u]:m}))},removeError:u=>{n(m=>{const p={...m};return delete p[u],p})},resetErrors:()=>{n({})}}},I=({defaultValues:e,mode:n="onInput"})=>{const r={},s={},[c,u]=a.createSignal(e),{errors:m,appendError:p,removeError:M,resetErrors:V}=k(),[v,E]=a.createSignal(!0),j=(t,o)=>{const i=r[t];i&&(o.ref=i),p(t,o)},q=t=>{M(t)},x=t=>{const o=s[t],i=C(c(),t,o);i?j(t,i):q(t),E(!Object.keys(m()).length)},H=()=>{Object.keys(c()).forEach(t=>{x(t)})},P=()=>{var o;const t=Object.keys(r);for(const i of t){const g=m()[i];if(g){(o=g.ref)==null||o.focus();break}}},L=(t,o)=>{const i=b(t);u(g=>({...g,[o]:i})),x(o)},N=(t,o={})=>(s[t]={required:o.required,min:o.min,max:o.max,minLength:o.minLength,maxLength:o.maxLength,pattern:o.pattern,validate:o.validate},{name:t,onInput(i){n==="onInput"&&L(i,t)},onChange(i){(n==="onChange"||n==="onInput")&&L(i,t)},ref(i){r[t]||(r[t]=i,i&&h(i,c()[t]))}}),F=t=>t?c()[t]:c();return{values:c,errors:m,isValid:v,register:N,getValues:F,setValue:(t,o)=>{u(g=>({...g,[t]:o}));const i=r[t];i&&h(i,o)},onSubmit:t=>o=>{o.preventDefault(),H(),v()&&t(F()),P()},reset:(t={})=>{u(()=>({...e,...t})),V(),E(!0)}}},y=a.createContext(),S=e=>a.createComponent(y.Provider,{get value(){return e.form},get children(){return e.children}}),T=()=>{const e=a.useContext(y);if(!e)throw new Error("useFormContext: cannot find a FormProvider");return e};f.FormProvider=S,f.useForm=I,f.useFormContext=T,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-hook-form",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "type": "module",
   "main": "./dist/main.umd.cjs",
   "module": "./dist/main.js",
@@ -21,6 +21,7 @@
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
     "@testing-library/user-event": "^14.6.1",
+    "docsify-cli": "^4.4.4",
     "happy-dom": "^17.4.4",
     "react-hook-form": "^7.55.0",
     "typescript": "~5.7.2",
@@ -33,7 +34,8 @@
     "start": "vite --config vite.demo",
     "build": "tsc && vite build",
     "build:demo": "tsc && vite build --config vite.demo",
-    "test": "vitest run"
+    "test": "vitest run",
+    "start:docs": "npx docsify serve src-docs"
   },
   "author": "thorn_pear",
   "license": "ISC",
@@ -42,6 +44,7 @@
     "type": "git",
     "url": "https://github.com/tatsmaki/solid-hook-form.git"
   },
+  "homepage": "https://tatsmaki.github.io/solid-hook-form",
   "keywords": [
     "solid",
     "hooks",