solid-hook-form 1.8.0 → 1.9.1

package/README.md

@@ -24,19 +24,19 @@ npm install solid-hook-form
 ### Quick start
 
 ```jsx
-import { useForm } from "solid-hook-form";
+import { createForm } from "solid-hook-form";
 
 const ExampleForm = () => {
-  const { errors, register, onSubmit } = useForm({
+  const { errors, register, handleSubmit } = createForm({
     defaultValues: {
       name: "",
     },
   });
 
-  const submitExample = (values) => console.log(values);
+  const onSubmit = (values) => console.log(values);
 
   return (
-    <form onSubmit={onSubmit(submitExample)}>
+    <form onSubmit={handleSubmit(onSubmit)}>
       <input {...register("name", { minLength: 2, pattern: /[A-Za-z]/ })} />;
       <button type="submit">Submit</button>
     </form>

package/dist/main.d.ts

@@ -1,6 +1,7 @@
-import { Path, LiteralUnion, FieldPath, FieldPathValue, Resolver } from 'react-hook-form';
 import * as solid_js from 'solid-js';
 import { Accessor, JSXElement, ParentProps } from 'solid-js';
+import { Path, LiteralUnion, FieldPath, FieldPathValue, Resolver } from 'react-hook-form';
+export { Path } from 'react-hook-form';
 
 type Message = string;
 type FieldError = {
@@ -34,6 +35,12 @@ type Control<F extends FormValues> = {
     errors: Accessor<FieldErrors<F>>;
     register: Register<F>;
 };
+type UseControllerArg<F extends FormValues> = {
+    control: Control<F>;
+    name: Path<F>;
+    rules?: Rules<F>;
+    render(arg: UseControllerReturn): JSXElement;
+};
 type UseControllerReturn = {
     field: {
         name: string;
@@ -46,6 +53,7 @@ type UseControllerReturn = {
         error: Accessor<FieldError | undefined>;
     };
 };
+type UseController = <F extends FormValues>(arg: UseControllerArg<F>) => UseControllerReturn;
 type ControllerProps<F extends FormValues> = {
     control: Control<F>;
     name: Path<F>;
@@ -70,8 +78,17 @@ type SetValue<F extends FormValues> = (name: Path<F>, value: FieldPathValue<F, P
 type SubmitCallback<F extends FormValues> = (values: F) => void;
 type OnSubmit<F extends FormValues> = (submit: SubmitCallback<F>) => (event: SubmitEvent) => void;
 type Reset<F extends FormValues> = (newDefaultValues?: Partial<F>) => void;
-type UseFormReturn<F extends FormValues = FormValues> = {
+type CreateFormArg<F extends FormValues> = {
+    defaultValues: F;
+    mode?: "onChange" | "onSubmit";
+    resolver?: Resolver<F>;
+};
+type CreateFormReturn<F extends FormValues = FormValues> = {
     control: Control<F>;
+    formState: {
+        errors: Accessor<FieldErrors<F>>;
+        isValid: Accessor<boolean>;
+    };
     values: Accessor<F>;
     errors: Accessor<FieldErrors<F>>;
     isValid: Accessor<boolean>;
@@ -79,27 +96,26 @@ type UseFormReturn<F extends FormValues = FormValues> = {
     getValues: GetValues<F>;
     setValue: SetValue<F>;
     onSubmit: OnSubmit<F>;
+    handleSubmit: OnSubmit<F>;
     reset: Reset<F>;
 };
+type CreateForm = <F extends FormValues>(arg?: CreateFormArg<F>) => CreateFormReturn<F>;
 
-type UseFormArg<F extends FormValues> = {
-    defaultValues: F;
-    mode?: "onChange" | "onSubmit";
-    resolver?: Resolver<F>;
-};
-declare const useForm: <F extends FormValues>(arg?: UseFormArg<F>) => UseFormReturn<F>;
+declare const createForm: CreateForm;
+
+declare const useController: UseController;
+
+declare const Controller: <F extends FormValues>(props: ControllerProps<F>) => solid_js.JSX.Element;
+
+declare const useFormContext: <T extends FormValues>() => CreateFormReturn<T>;
 
 type FormProviderProps<T extends FormValues> = ParentProps & {
-    form: UseFormReturn<T>;
+    form: CreateFormReturn<T>;
 };
 declare const FormProvider: <T extends FormValues>(props: FormProviderProps<T>) => solid_js.JSX.Element;
 
-declare const useFormContext: <T extends FormValues>() => UseFormReturn<T>;
-
-declare const Controller: <F extends FormValues>(props: ControllerProps<F>) => solid_js.JSX.Element;
-
 declare const get: (object: any, path: string, defaultValue?: unknown) => any;
 
 declare const set: (object: FormValues, path: string, value: unknown) => void;
 
-export { Controller, type FieldError, type FieldErrors, FormProvider, get, set, useForm, useFormContext };
+export { type Control, Controller, type CreateFormArg, type CreateFormReturn, type FieldError, type FieldErrors, FormProvider, type FormValues, type Rules, type UseControllerArg, type UseControllerReturn, createForm, get, set, useController, createForm as useForm, useFormContext };

package/dist/main.js

@@ -1,7 +1,7 @@
 import { createContext, createSignal, createMemo, useContext } from 'solid-js';
-import { createComponent, memo } from 'solid-js/web';
+import { memo, createComponent } from 'solid-js/web';
 
-// src/use_form.ts
+// src/create_form.ts
 
 // src/logic/get_value.ts
 var getFieldValue = (event) => {
@@ -210,8 +210,8 @@ var getResolverFields = (fields) => {
   }, {});
 };
 
-// src/use_form.ts
-var useForm = (arg = { defaultValues: {} }) => {
+// src/create_form.ts
+var createForm = (arg = { defaultValues: {} }) => {
   const { defaultValues, mode = "onChange", resolver } = arg;
   const { fields, getField, setField } = createFields();
   const { rules, addRule, getRule } = createRules();
@@ -361,6 +361,10 @@ var useForm = (arg = { defaultValues: {} }) => {
   };
   return {
     control,
+    formState: {
+      errors,
+      isValid
+    },
     values,
     errors,
     isValid,
@@ -368,29 +372,10 @@ var useForm = (arg = { defaultValues: {} }) => {
     getValues,
     setValue,
     onSubmit,
+    handleSubmit: onSubmit,
     reset
   };
 };
-var FormContext = createContext();
-
-// src/form_provider.tsx
-var FormProvider = (props) => {
-  return createComponent(FormContext.Provider, {
-    get value() {
-      return props.form;
-    },
-    get children() {
-      return props.children;
-    }
-  });
-};
-var useFormContext = () => {
-  const form = useContext(FormContext);
-  if (!form) {
-    throw new Error("useFormContext: cannot find a FormProvider");
-  }
-  return form;
-};
 var useController = (arg) => {
   const fieldProps = arg.control.register(arg.name, arg.rules);
   const value = createMemo(() => {
@@ -409,11 +394,29 @@ var useController = (arg) => {
     }
   };
 };
-
-// src/controller.tsx
 var Controller = (props) => {
   const controller = useController(props);
   return memo(() => props.render(controller));
 };
+var FormContext = createContext();
+
+// src/use_form_context.ts
+var useFormContext = () => {
+  const form = useContext(FormContext);
+  if (!form) {
+    throw new Error("useFormContext: cannot find a FormProvider");
+  }
+  return form;
+};
+var FormProvider = (props) => {
+  return createComponent(FormContext.Provider, {
+    get value() {
+      return props.form;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
 
-export { Controller, FormProvider, get, set, useForm, useFormContext };
+export { Controller, FormProvider, createForm, get, set, useController, createForm as useForm, useFormContext };

package/dist/main.jsx

@@ -1,4 +1,4 @@
-// src/use_form.ts
+// src/create_form.ts
 import { createMemo, createSignal as createSignal2 } from "solid-js";
 
 // src/logic/get_value.ts
@@ -211,8 +211,8 @@ var getResolverFields = (fields) => {
   }, {});
 };
 
-// src/use_form.ts
-var useForm = (arg = { defaultValues: {} }) => {
+// src/create_form.ts
+var createForm = (arg = { defaultValues: {} }) => {
   const { defaultValues, mode = "onChange", resolver } = arg;
   const { fields, getField, setField } = createFields();
   const { rules, addRule, getRule } = createRules();
@@ -362,6 +362,10 @@ var useForm = (arg = { defaultValues: {} }) => {
   };
   return {
     control,
+    formState: {
+      errors,
+      isValid
+    },
     values,
     errors,
     isValid,
@@ -369,29 +373,11 @@ var useForm = (arg = { defaultValues: {} }) => {
     getValues,
     setValue,
     onSubmit,
+    handleSubmit: onSubmit,
     reset
   };
 };
 
-// src/form_context.ts
-import { createContext } from "solid-js";
-var FormContext = createContext();
-
-// src/form_provider.tsx
-var FormProvider = (props) => {
-  return <FormContext.Provider value={props.form}>{props.children}</FormContext.Provider>;
-};
-
-// src/use_form_context.ts
-import { useContext } from "solid-js";
-var useFormContext = () => {
-  const form = useContext(FormContext);
-  if (!form) {
-    throw new Error("useFormContext: cannot find a FormProvider");
-  }
-  return form;
-};
-
 // src/use_controller.ts
 import { createMemo as createMemo2 } from "solid-js";
 var useController = (arg) => {
@@ -418,11 +404,34 @@ var Controller = (props) => {
   const controller = useController(props);
   return <>{props.render(controller)}</>;
 };
+
+// src/use_form_context.ts
+import { useContext } from "solid-js";
+
+// src/form_context.ts
+import { createContext } from "solid-js";
+var FormContext = createContext();
+
+// src/use_form_context.ts
+var useFormContext = () => {
+  const form = useContext(FormContext);
+  if (!form) {
+    throw new Error("useFormContext: cannot find a FormProvider");
+  }
+  return form;
+};
+
+// src/form_provider.tsx
+var FormProvider = (props) => {
+  return <FormContext.Provider value={props.form}>{props.children}</FormContext.Provider>;
+};
 export {
   Controller,
   FormProvider,
+  createForm,
   get,
   set,
-  useForm,
+  useController,
+  createForm as useForm,
   useFormContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-hook-form",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",