solid-hook-form 1.7.2 → 1.9.0

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, ParentProps, JSX } 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,31 @@ 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;
+        value: Accessor<any>;
+        onInput(event: Event): void;
+        onChange(event: Event): void;
+        ref(element: HTMLElement): void;
+    };
+    fieldState: {
+        error: Accessor<FieldError | undefined>;
+    };
+};
+type UseController = <F extends FormValues>(arg: UseControllerArg<F>) => UseControllerReturn;
+type ControllerProps<F extends FormValues> = {
+    control: Control<F>;
+    name: Path<F>;
+    rules?: Rules<F>;
+    render(arg: UseControllerReturn): JSXElement;
+};
 
 type FormValues = Record<string, any>;
 type Ref = HTMLElement | null;
@@ -52,7 +78,12 @@ 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>;
     values: Accessor<F>;
     errors: Accessor<FieldErrors<F>>;
@@ -61,45 +92,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;
 
-type FormProviderProps<T extends FormValues> = ParentProps & {
-    form: UseFormReturn<T>;
-};
-declare const FormProvider: <T extends FormValues>(props: FormProviderProps<T>) => solid_js.JSX.Element;
+declare const useController: UseController;
 
-declare const useFormContext: <T extends FormValues>() => UseFormReturn<T>;
+declare const Controller: <F extends FormValues>(props: ControllerProps<F>) => solid_js.JSX.Element;
 
-type ControllerRenderArg = {
-    field: {
-        name: string;
-        value: Accessor<any>;
-        onInput(event: Event): void;
-        onChange(event: Event): void;
-        ref(element: HTMLElement): void;
-    };
-    fieldState: {
-        error: Accessor<FieldError | undefined>;
-    };
-};
-type ControllerProps<F extends FormValues> = {
-    control: Control<F>;
-    name: Path<F>;
-    rules?: Rules<F>;
-    render(arg: ControllerRenderArg): JSX.Element;
+declare const useFormContext: <T extends FormValues>() => CreateFormReturn<T>;
+
+type FormProviderProps<T extends FormValues> = ParentProps & {
+    form: CreateFormReturn<T>;
 };
-declare const Controller: <F extends FormValues>(props: ControllerProps<F>) => JSX.Element;
+declare const FormProvider: <T extends FormValues>(props: FormProviderProps<T>) => 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();
@@ -368,22 +368,35 @@ 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;
+var useController = (arg) => {
+  const fieldProps = arg.control.register(arg.name, arg.rules);
+  const value = createMemo(() => {
+    return get(arg.control.values(), arg.name);
+  });
+  const error = createMemo(() => {
+    return arg.control.errors()[arg.name];
+  });
+  return {
+    field: {
+      value,
+      ...fieldProps
     },
-    get children() {
-      return props.children;
+    fieldState: {
+      error
     }
-  });
+  };
 };
+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) {
@@ -391,23 +404,15 @@ var useFormContext = () => {
   }
   return form;
 };
-var Controller = (props) => {
-  const fieldProps = props.control.register(props.name, props.rules);
-  const value = createMemo(() => {
-    return get(props.control.values(), props.name);
-  });
-  const error = createMemo(() => {
-    return props.control.errors()[props.name];
-  });
-  return memo(() => props.render({
-    field: {
-      value,
-      ...fieldProps
+var FormProvider = (props) => {
+  return createComponent(FormContext.Provider, {
+    get value() {
+      return props.form;
     },
-    fieldState: {
-      error
+    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();
@@ -369,21 +369,46 @@ var useForm = (arg = { defaultValues: {} }) => {
     getValues,
     setValue,
     onSubmit,
+    handleSubmit: onSubmit,
     reset
   };
 };
 
-// src/form_context.ts
-import { createContext } from "solid-js";
-var FormContext = createContext();
+// src/use_controller.ts
+import { createMemo as createMemo2 } from "solid-js";
+var useController = (arg) => {
+  const fieldProps = arg.control.register(arg.name, arg.rules);
+  const value = createMemo2(() => {
+    return get(arg.control.values(), arg.name);
+  });
+  const error = createMemo2(() => {
+    return arg.control.errors()[arg.name];
+  });
+  return {
+    field: {
+      value,
+      ...fieldProps
+    },
+    fieldState: {
+      error
+    }
+  };
+};
 
-// src/form_provider.tsx
-var FormProvider = (props) => {
-  return <FormContext.Provider value={props.form}>{props.children}</FormContext.Provider>;
+// src/controller.tsx
+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) {
@@ -392,33 +417,17 @@ var useFormContext = () => {
   return form;
 };
 
-// src/controller.tsx
-import { createMemo as createMemo2 } from "solid-js";
-var Controller = (props) => {
-  const fieldProps = props.control.register(props.name, props.rules);
-  const value = createMemo2(() => {
-    return get(props.control.values(), props.name);
-  });
-  const error = createMemo2(() => {
-    return props.control.errors()[props.name];
-  });
-  return <>
-      {props.render({
-    field: {
-      value,
-      ...fieldProps
-    },
-    fieldState: {
-      error
-    }
-  })}
-    </>;
+// 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.7.2",
+  "version": "1.9.0",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",