Merge pull request #10 from balazsorban44/dev

Performance improvements

Author: balazsorban44

src/__tests__/useForm.test.js

@@ -1,28 +1,28 @@
 import React, { useEffect } from 'react'
 import { render, screen } from '@testing-library/react'
-import { render as customRender, fireEvent, cleanup } from '../test-utils'
+import { render as customRender, fireEvent } from '../test-utils'
 import useForm from '../useForm'
 import { errors } from '../handleDevErrors'
 import validatorsMock from './utils/validators.mock'
 
 it('invalid validator throws error', () => {
 
   const Component = ({ validators }) => {
-    useForm({ name: 'form', validators })
+    useForm({ name: 'form', validators, onSubmit: jest.fn() }).handleSubmit()
     return null
   }
 
   expect(() => customRender(
     <Component/>,
     { initialStates: { form: { input: '' } } }
   ))
-    .toThrow(errors.validators())
+    .toThrow(errors.validators(undefined))
 
   expect(() => customRender(
     <Component validators={() => ({ input: null })} />,
     { initialStates: { form: { input: '' } } }
   ))
-    .toThrow(errors.validator('input'))
+    .toThrow(errors.invalidValidators(['input']))
 
 })
 

src/changeHandler.js

@@ -7,7 +7,7 @@ import { errors as devErrors } from './handleDevErrors'
  * merged with the form.
  */
 export default function changeHandler({
-  dispatch, setErrors, form, name, onNotify, validators, args, extendValidations
+  dispatch, setErrors, form, name, onNotify, validators, args
 }) {
 
   let fields = {}
@@ -31,7 +31,8 @@ export default function changeHandler({
   }
   if (Array.isArray(args[1])) {
     validations = args[1]
-    extendValidations(args[1])
+  } else {
+    validations = Object.keys(fields)
   }
 
 

src/handleDevErrors.js

@@ -25,14 +25,12 @@ export const errors = {
     `onSubmit must be a function, but it was ${typeof onSubmit}.`,
     'docs: https://github.com/balazsorban44/use-form/wiki#use-form-onSubmit',
   ].join('\n'),
-
   validators: validators => [
     `validators must be a function, but it was ${typeof validators}.`,
     'docs: https://github.com/balazsorban44/use-form/wiki#use-form-validators',
   ].join('\n'),
-
-  validator: keys => [
-    `The validator(s) for ${keys} in validators are invalid.`,
+  invalidValidators: (keys) => [
+    `The following validator(s) were invalid: ${keys}`,
     'docs: https://github.com/balazsorban44/use-form/wiki#use-form-validators',
   ].join('\n'),
   outsideProvider: name => `useForm with name cannot be used outside a FormProvider (name was ${name})`
@@ -50,17 +48,9 @@ export default function handleDevErrors ({ name, initialState, form, validators,
   if (!form)
     throw new Error(errors.initialState(name))
 
-  if (typeof validators !== 'function') {
+  if (typeof validators !== 'function')
     throw new TypeError(errors.validators(validators))
 
-  } else {
-    const invalidValidators = Object.keys(form).filter(key =>
-      typeof validators(form, false)[key] !== 'boolean'
-    )
-    if (invalidValidators.length)
-      throw new TypeError(errors.validator(invalidValidators))
-  }
-
   if (typeof onSubmit !== 'function')
     throw new TypeError(errors.onSubmit(onSubmit))
 }

src/submitHandler.js

@@ -7,12 +7,22 @@ import { errors as devErrors } from './handleDevErrors'
  * before it is being sent.
  */
 export default function submitHandler({
-  e, options, name, form, submit, setLoading, setErrors, onNotify, validators, customValidations
+  e, options, name, form, submit, setLoading, setErrors, onNotify, validators
 }) {
   e?.preventDefault?.()
   name = options?.formName || name
 
-  const validations = [...Object.keys(form), ...customValidations]
+
+  const validations = Object.keys(validators({}))
+
+  if (process.env.NODE_ENV !== 'production') {
+    const invalidValidators = validations.filter(validation =>
+      typeof validators(form, false)[validation] !== 'boolean'
+    )
+    if (invalidValidators.length)
+      throw new Error(devErrors.invalidValidators(invalidValidators))
+  }
+
   const errors = validate({ fields: form, validators, submitting: true, validations })
   setErrors(e => ({ ...e, ...errors }))
 

src/useForm.js

@@ -25,16 +25,14 @@ export default function useForm ({ name, initialState, validators, onSubmit, onN
   const fields = concatFieldsAndErrors(form, errors)
   const hasErrors = Object.values(errors).some(e => e)
 
-  const [customValidations, extendValidations] = useState(Object.keys(validators))
-
   const handleChange = (...args) =>
     changeHandler({
-      dispatch, setErrors, form, name, onNotify, validators, args, extendValidations
+      dispatch, setErrors, form, name, onNotify, validators, args
     })
 
   const handleSubmit = (e, options) =>
     submitHandler({
-      e, options, name, form, submit: onSubmit, setLoading, onNotify, setErrors, validators, customValidations
+      e, options, name, form, submit: onSubmit, setLoading, onNotify, setErrors, validators
     })
 
   const inputs = inputPropGenerators({ fields, handleChange, handleSubmit })

src/validate.js

@@ -1,13 +1,7 @@
-export default function validate({
-  fields,
-  validators,
-  validations,
-  form = {},
-  submitting = false
-}) {
-  return (validations || Object.keys(fields))
-    .reduce((acc, field) => ({
-      ...acc,
-      [field]: !validators({ ...form, ...fields }, submitting)[field]
-    }), {})
+export default function validate({ fields, validators, validations, form = {}, submitting = false }) {
+  const validationReducer = (acc, field) => {
+    acc[field] = !validators({ ...form, ...fields }, submitting)[field]
+    return acc
+  }
+  return validations.reduce(validationReducer, {})
 }