solid-hook-form 1.6.4 → 1.7.0

package/README.md

@@ -4,7 +4,7 @@
 
 <p align="center">
   <a href="https://solid-hook-form.vercel.app/get-started">Get started</a> | 
-  <a href="https://solid-hook-form-playground.vercel.app">Playground</a> |
+  <a href="https://solid-hook-form.vercel.app/#playground">Playground</a> |
   <a href="https://solid-hook-form.vercel.app/examples">Examples</a> 
 </p>
 

package/dist/main.d.ts

@@ -1,6 +1,6 @@
 import { Path, LiteralUnion, FieldPath, FieldPathValue, Resolver } from 'react-hook-form';
 import * as solid_js from 'solid-js';
-import { Accessor, ParentProps } from 'solid-js';
+import { Accessor, ParentProps, JSX } from 'solid-js';
 
 type Message = string;
 type FieldError = {
@@ -29,6 +29,12 @@ type Rules<F extends FormValues = FormValues, N extends FieldPath<F> = FieldPath
     validate?: Validate<FieldPathValue<F, N>, F>;
 };
 
+type Control<F extends FormValues> = {
+    values: Accessor<F>;
+    errors: Accessor<FieldErrors<F>>;
+    register: Register<F>;
+};
+
 type FormValues = Record<string, any>;
 type Ref = HTMLElement | null;
 type RegisterReturn<F extends FormValues> = {
@@ -47,6 +53,7 @@ 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> = {
+    control: Control<F>;
     values: Accessor<F>;
     errors: Accessor<FieldErrors<F>>;
     isValid: Accessor<boolean>;
@@ -71,8 +78,28 @@ declare const FormProvider: <T extends FormValues>(props: FormProviderProps<T>)
 
 declare const useFormContext: <T extends FormValues>() => UseFormReturn<T>;
 
+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 Controller: <F extends FormValues>(props: ControllerProps<F>) => JSX.Element;
+
 declare const get: (object: any, path: string, defaultValue?: unknown) => any;
 
 declare const set: (object: FormValues, path: string, value: unknown) => void;
 
-export { type FieldError, type FieldErrors, FormProvider, get, set, useForm, useFormContext };
+export { Controller, type FieldError, type FieldErrors, FormProvider, get, set, useForm, useFormContext };

package/dist/main.js

@@ -1,5 +1,5 @@
 import { createContext, createSignal, createMemo, useContext } from 'solid-js';
-import { createComponent } from 'solid-js/web';
+import { createComponent, memo } from 'solid-js/web';
 
 // src/use_form.ts
 
@@ -292,7 +292,6 @@ var useForm = (arg = { defaultValues: {} }) => {
     addRule(name, options);
     return {
       name,
-      // value: get(values(), name),
       onInput(event) {
         if (mode === "onChange") {
           onFieldChange(event, name);
@@ -315,6 +314,11 @@ var useForm = (arg = { defaultValues: {} }) => {
       }
     };
   };
+  const control = {
+    values,
+    errors,
+    register
+  };
   const getValues = (name) => {
     if (name) {
       return get(values(), name);
@@ -356,6 +360,7 @@ var useForm = (arg = { defaultValues: {} }) => {
     });
   };
   return {
+    control,
     values,
     errors,
     isValid,
@@ -386,5 +391,23 @@ 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
+    },
+    fieldState: {
+      error
+    }
+  }));
+};
 
-export { FormProvider, get, set, useForm, useFormContext };
+export { Controller, FormProvider, get, set, useForm, useFormContext };

package/dist/main.jsx

@@ -293,7 +293,6 @@ var useForm = (arg = { defaultValues: {} }) => {
     addRule(name, options);
     return {
       name,
-      // value: get(values(), name),
       onInput(event) {
         if (mode === "onChange") {
           onFieldChange(event, name);
@@ -316,6 +315,11 @@ var useForm = (arg = { defaultValues: {} }) => {
       }
     };
   };
+  const control = {
+    values,
+    errors,
+    register
+  };
   const getValues = (name) => {
     if (name) {
       return get(values(), name);
@@ -357,6 +361,7 @@ var useForm = (arg = { defaultValues: {} }) => {
     });
   };
   return {
+    control,
     values,
     errors,
     isValid,
@@ -386,7 +391,31 @@ 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
+    }
+  })}
+    </>;
+};
 export {
+  Controller,
   FormProvider,
   get,
   set,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-hook-form",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",
@@ -40,7 +40,7 @@
   "description": "Performant, flexible and extensible forms with easy to use validation",
   "repository": {
     "type": "git",
-    "url": "https://github.com/tatsmaki/solid-hook-form.git"
+    "url": "git+https://github.com/tatsmaki/solid-hook-form.git"
   },
   "homepage": "https://solid-hook-form.vercel.app",
   "keywords": [