@coxy/react-validator 2.0.7 → 4.0.0

package/src/use-validator.test.tsx

@@ -2,22 +2,19 @@
  * @jest-environment jsdom
  */
 
-import { unmountComponentAtNode } from 'react-dom'
-import { render, screen } from '@testing-library/react'
-import { act } from 'react-dom/test-utils'
+import { act, render, screen } from '@testing-library/react'
 import { useEffect, useState } from 'react'
 
 import { rules } from './rules'
 import { useValidator } from './use-validator'
 
-let container
+let container: HTMLDivElement | null
 beforeEach(() => {
   container = document.createElement('div')
   document.body.appendChild(container)
 })
 
 afterEach(() => {
-  unmountComponentAtNode(container)
   container.remove()
   container = null
 })
@@ -39,8 +36,8 @@ it('check state change and hide field', () => {
 
     return (
       <>
-        <span data-testid='test1'>{isValid ? 'true' : 'false'}</span>
-        <span data-testid='test2'>{validateObject.message || 'true'}</span>
+        <span data-testid="test1">{isValid ? 'true' : 'false'}</span>
+        <span data-testid="test2">{validateObject.message || 'true'}</span>
       </>
     )
   }

package/src/use-validator.ts

@@ -1,7 +1,7 @@
+import type { ValidatorRules } from './rules'
+import type { Validity } from './types'
 import { Validator } from './validator'
-import { ValidatorRules } from './rules'
-import { Value } from './validator-field'
-import { Validity } from './types'
+import type { Value } from './validator-field'
 
 export function useValidator(value: Value, rules: ValidatorRules): [boolean, Pick<Validity, 'message' | 'errors'>] {
   const validator = new Validator()

package/src/validator-field.test.tsx

@@ -2,21 +2,17 @@
  * @jest-environment jsdom
  */
 
+import { act, render } from '@testing-library/react'
 import { createRef, useEffect, useState } from 'react'
-import { render, act } from '@testing-library/react'
 
-import { ValidatorWrapper } from './validator-wrapper'
-import { ValidatorField } from './validator-field'
 import { rules } from './rules'
-
-it('render without wrapper', () => {
-  expect(() => shallow(<ValidatorField />)).toThrowError()
-})
+import { ValidatorField } from './validator-field'
+import { ValidatorWrapper } from './validator-wrapper'
 
 it('normal render', () => {
   render(
     <ValidatorWrapper>
-      <ValidatorField rules={[]} value='' />
+      <ValidatorField rules={[]} value="" />
     </ValidatorWrapper>,
   )
 })
@@ -25,7 +21,7 @@ it('check context validator', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} />
+      <ValidatorField rules={[]} value="" />
     </ValidatorWrapper>,
   )
 
@@ -42,10 +38,10 @@ it('check failed validation', () => {
   render(
     <>
       <ValidatorWrapper ref={validator1}>
-        <ValidatorField rules={rules.email} value='test' />
+        <ValidatorField rules={rules.email} value="test" />
       </ValidatorWrapper>
       <ValidatorWrapper ref={validator2}>
-        <ValidatorField rules={rules.email} value='' />
+        <ValidatorField rules={rules.email} value="" />
       </ValidatorWrapper>
     </>,
   )
@@ -83,8 +79,8 @@ it('check state change and hide field', () => {
 
     return (
       <ValidatorWrapper ref={validator1}>
-        <ValidatorField rules={rules.email} value='test' />
-        {st && <ValidatorField rules={rules.email} value='' />}
+        <ValidatorField rules={rules.email} value="test" />
+        {st && <ValidatorField rules={rules.email} value="" />}
       </ValidatorWrapper>
     )
   }
@@ -104,7 +100,7 @@ it('check success validation', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={rules.email} value='email@email.com' />
+      <ValidatorField rules={rules.email} value="email@email.com" />
     </ValidatorWrapper>,
   )
 
@@ -118,7 +114,7 @@ it('check success validation fot child function', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={rules.email} value='email@email.com'>
+      <ValidatorField rules={rules.email} value="email@email.com">
         {({ isValid, message }) => <>{!isValid && <div>{message}</div>}</>}
       </ValidatorField>
     </ValidatorWrapper>,
@@ -134,13 +130,13 @@ it('check custom rule message function', () => {
   const validator = createRef<ValidatorWrapper>()
   const rule = [
     {
-      rule: (value) => value !== 'test',
-      message: (value) => `test message ${value}`,
+      rule: (value: string) => value !== 'test',
+      message: (value: string) => `test message ${value}`,
     },
   ]
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={rule} value='test'>
+      <ValidatorField rules={rule} value="test">
         {({ isValid, message }) => <>{!isValid && <div>{message}</div>}</>}
       </ValidatorField>
     </ValidatorWrapper>,
@@ -151,3 +147,34 @@ it('check custom rule message function', () => {
   expect(validateResult.isValid).toBe(false)
   expect(validateResult.message).toBe('test message test')
 })
+
+jest.useFakeTimers()
+
+it('re-renders the same field to cover handleRef initialization false branch and else-validate path', () => {
+  const validator = createRef<ValidatorWrapper>()
+
+  function Comp() {
+    const [val, setVal] = useState('')
+    useEffect(() => {
+      setTimeout(() => {
+        act(() => setVal('abc'))
+      }, 50)
+    }, [])
+    return (
+      <ValidatorWrapper ref={validator}>
+        <ValidatorField id="rerender" rules={rules.notEmpty} value={val}>
+          {() => null}
+        </ValidatorField>
+      </ValidatorWrapper>
+    )
+  }
+
+  render(<Comp />)
+  // initial: invalid
+  let field = validator.current.getField('rerender')
+  expect(field.validate().isValid).toBe(false)
+
+  jest.runAllTimers()
+  field = validator.current.getField('rerender')
+  expect(field.validate().isValid).toBe(true)
+})

package/src/validator-field.tsx

@@ -1,68 +1,59 @@
-import { Component, ReactNode } from 'react'
-import { Validity } from 'types'
+import { forwardRef, type ReactNode, useContext, useEffect, useRef } from 'react'
+import type { FieldParams, Validity } from 'types'
 
-import { Context } from './context'
+import { Context, type RegisteredFieldHandle } from './context'
 import { Field } from './validator'
-import { ValidatorRules } from './rules'
 
+// biome-ignore lint/suspicious/noExplicitAny: <need>
 export type Value = any
 
 type Fn = (validity: Validity, value: Value) => ReactNode
 
-interface Props {
-  rules?: ValidatorRules
-  required?: boolean
-  value?: Value
-  id?: string | number
+type Props = FieldParams & {
   children?: ReactNode | Fn
-  unregisterField: (val: any) => void
-  registerField: (val: any) => void
-  customErrors: Array<Validity>
 }
 
-class ValidationFieldWrapper extends Component<Props> {
-  componentWillUnmount() {
-    this.props.unregisterField(this)
-  }
-
-  componentDidMount() {
-    this.props.registerField(this)
+export const ValidatorField = forwardRef<unknown, Props>(function ValidatorField(props: Props, _ref) {
+  const { children, value } = props
+  const { customErrors, registerField, unregisterField } = useContext(Context)
+
+  const propsRef = useRef(props)
+  propsRef.current = props
+
+  const customErrorsRef = useRef(customErrors)
+  customErrorsRef.current = customErrors
+
+  const handleRef = useRef<RegisteredFieldHandle | null>(null)
+  if (!handleRef.current) {
+    handleRef.current = {
+      get props() {
+        return propsRef.current
+      },
+      validate: () => {
+        const curr = propsRef.current
+        const customError = customErrorsRef.current.find((item) => item.id === curr.id)
+        if (customError) {
+          return customError
+        }
+        const field = new Field({
+          rules: curr.rules,
+          required: curr.required,
+          value: curr.value,
+          id: curr.id,
+        })
+        return field.validate()
+      },
+    }
   }
 
-  validate(): Validity {
-    const props = this.props
-    const customError = (props.customErrors || []).find((item) => item.id === props.id)
-    if (customError) {
-      return customError
+  useEffect(() => {
+    registerField(handleRef.current as RegisteredFieldHandle)
+    return () => {
+      unregisterField(handleRef.current as RegisteredFieldHandle)
     }
+  }, [registerField, unregisterField])
 
-    const field = new Field({
-      rules: props.rules,
-      required: props.required,
-      value: props.value,
-      id: props.id,
-    })
-    return field.validate()
-  }
-
-  render() {
-    const { children, value } = this.props
-    const validity = this.validate()
-    return typeof children === 'function' ? children(validity, value) : children
-  }
-}
+  const validity = handleRef.current.validate()
 
-export function ValidatorField(props: Omit<Props, 'registerField' | 'unregisterField' | 'customErrors'>) {
-  return (
-    <Context.Consumer>
-      {(data) => (
-        <ValidationFieldWrapper
-          {...props}
-          customErrors={data?.customErrors}
-          registerField={data?.registerField}
-          unregisterField={data?.unregisterField}
-        />
-      )}
-    </Context.Consumer>
-  )
-}
+  return typeof children === 'function' ? (children as Fn)(validity, value) : (children as ReactNode)
+})

package/src/validator-wrapper.test.tsx

@@ -2,27 +2,23 @@
  * @jest-environment jsdom
  */
 
-import { createRef } from 'react'
 import { render } from '@testing-library/react'
+import { createRef } from 'react'
 
-import { ValidatorWrapper } from './validator-wrapper'
-import { ValidatorField } from './validator-field'
 import { rules } from './rules'
-
-it('render without child', () => {
-  expect(() => shallow(<ValidatorWrapper />)).toThrowError()
-})
+import { ValidatorField } from './validator-field'
+import { ValidatorWrapper } from './validator-wrapper'
 
 it('check wrapper validator', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} />
-      <ValidatorField rules={[]} />
-      <ValidatorField rules={[]} />
-      <ValidatorField rules={[]} />
-      <ValidatorField rules={[]} />
-      <ValidatorField rules={[]} />
+      <ValidatorField rules={[]} value="" />
+      <ValidatorField rules={[]} value="" />
+      <ValidatorField rules={[]} value="" />
+      <ValidatorField rules={[]} value="" />
+      <ValidatorField rules={[]} value="" />
+      <ValidatorField rules={[]} value="" />
     </ValidatorWrapper>,
   )
 
@@ -34,8 +30,8 @@ it('check getField validator', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} id='test' />
-      <ValidatorField rules={[]} id='test-fields' />
+      <ValidatorField rules={[]} id="test" value="" />
+      <ValidatorField rules={[]} id="test-fields" value="" />
     </ValidatorWrapper>,
   )
   expect(typeof validator.current.getField).toBe('function')
@@ -52,7 +48,7 @@ it('check getField undefined field', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} id='test-empty-field' />
+      <ValidatorField rules={[]} id="test-empty-field" value="" />
     </ValidatorWrapper>,
   )
 
@@ -64,9 +60,9 @@ it('check stopAtFirstError validator', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator} stopAtFirstError>
-      <ValidatorField rules={[]} value='test' />
-      <ValidatorField rules={rules.email} value='test' />
-      <ValidatorField rules={rules.password} value='' />
+      <ValidatorField rules={[]} value="test" />
+      <ValidatorField rules={rules.email} value="test" />
+      <ValidatorField rules={rules.password} value="" />
     </ValidatorWrapper>,
   )
   const fieldValidate = validator.current.validate()
@@ -79,7 +75,7 @@ it('check unregisterField, registerField', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} id='test-register-field' />
+      <ValidatorField rules={[]} id="test-register-field" value="" />
     </ValidatorWrapper>,
   )
 
@@ -91,9 +87,9 @@ it('check filed in field', () => {
   const validator = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]}>
-        <ValidatorField rules={[]} id='check-validate-field-1' />
-        <ValidatorField rules={[]} id='check-validate-field-2' />
+      <ValidatorField rules={[]} value="">
+        <ValidatorField rules={[]} id="check-validate-field-1" value="" />
+        <ValidatorField rules={[]} id="check-validate-field-2" value="" />
       </ValidatorField>
     </ValidatorWrapper>,
   )
@@ -109,9 +105,9 @@ it('check wrapper in wrapper', () => {
   const validatorIn = createRef<ValidatorWrapper>()
   render(
     <ValidatorWrapper ref={validatorOut}>
-      <ValidatorField rules={rules.email} value='' />
+      <ValidatorField rules={rules.email} value="" />
       <ValidatorWrapper ref={validatorIn}>
-        <ValidatorField rules={rules.password} value='successpasswword' />
+        <ValidatorField rules={rules.password} value="successpasswword" />
       </ValidatorWrapper>
     </ValidatorWrapper>,
   )
@@ -125,10 +121,10 @@ it('check two validators', () => {
   render(
     <>
       <ValidatorWrapper ref={validatorSuccess}>
-        <ValidatorField rules={rules.password} value='successpasswword' />
+        <ValidatorField rules={rules.password} value="successpasswword" />
       </ValidatorWrapper>
       <ValidatorWrapper ref={validatorFailed}>
-        <ValidatorField rules={rules.email} value='' />
+        <ValidatorField rules={rules.email} value="" />
       </ValidatorWrapper>
     </>,
   )
@@ -136,3 +132,21 @@ it('check two validators', () => {
   expect(validatorFailed.current.validate().isValid).toBe(false)
   expect(validatorSuccess.current.validate().isValid).toBe(true)
 })
+
+it('covers registerField duplicate and unregisterField non-existing branches', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render(
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={[]} id="dup-field" value="" />
+    </ValidatorWrapper>,
+  )
+
+  const handle = validator.current.getField('dup-field')
+  validator.current.registerField(handle)
+  validator.current.unregisterField(handle)
+  const dummy = {
+    props: { value: '', rules: [], id: 'dummy' },
+    validate: () => ({ isValid: true, message: '' }),
+  }
+  validator.current.unregisterField(dummy)
+})

package/src/validator-wrapper.tsx

@@ -1,75 +1,78 @@
-import { Component, ReactNode, RefObject } from 'react'
+import { forwardRef, type ReactNode, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react'
 
-import { Validity } from './types'
-import { Context } from './context'
-import { Field, Validator } from './validator'
+import { Context, type RegisteredFieldHandle } from './context'
+import type { Validity } from './types'
+import { Validator } from './validator'
 
 interface ComponentProps {
   children?: ReactNode
   stopAtFirstError?: boolean
-  ref?: RefObject<any>
 }
 
-export class ValidatorWrapper extends Component<ComponentProps> {
-  fields = []
-  state = {
-    customErrors: [],
-  }
-
-  constructor(props, ctx) {
-    super(props, ctx)
-    this.registerField = this.registerField.bind(this)
-    this.unregisterField = this.unregisterField.bind(this)
-  }
+export interface ValidatorWrapper {
+  validate: () => Validity
+  getField: (id: string | number) => RegisteredFieldHandle | null
+  registerField: (field: RegisteredFieldHandle) => void
+  unregisterField: (field: RegisteredFieldHandle) => void
+  setCustomError: (customError: Validity) => void
+  clearCustomErrors: () => void
+}
 
-  componentWillUnmount() {
-    this.fields = []
-  }
+export const ValidatorWrapper = forwardRef<ValidatorWrapper, ComponentProps>(function ValidatorWrapper(
+  { children, stopAtFirstError },
+  ref,
+) {
+  const fieldsRef = useRef<RegisteredFieldHandle[]>([])
+  const [customErrors, setCustomErrors] = useState<Validity[]>([])
 
-  registerField(field) {
-    if (field && !this.fields.includes(field)) {
-      this.fields.push(field)
+  const registerField = useCallback((field: RegisteredFieldHandle) => {
+    if (field && !fieldsRef.current.includes(field)) {
+      fieldsRef.current.push(field)
     }
-  }
+  }, [])
 
-  unregisterField(field) {
-    const index = this.fields.indexOf(field)
-    if (index > -1) this.fields.splice(index, 1)
-  }
+  const unregisterField = useCallback((field: RegisteredFieldHandle) => {
+    const index = fieldsRef.current.indexOf(field)
+    if (index > -1) fieldsRef.current.splice(index, 1)
+  }, [])
 
-  getField(id): Field | null {
-    return this.fields.find((field) => field.props.id === id) || null
-  }
+  const getField = useCallback<ValidatorWrapper['getField']>((id) => {
+    return fieldsRef.current.find((field) => field?.props?.id === id) || null
+  }, [])
 
-  setCustomError(customError: Validity) {
-    this.setState({
-      customErrors: [...this.state.customErrors, customError],
-    })
-  }
+  const setCustomError = useCallback<ValidatorWrapper['setCustomError']>((customError) => {
+    setCustomErrors((prev) => [...prev, customError])
+  }, [])
 
-  clearCustomErrors() {
-    this.setState({ customErrors: [] })
-  }
+  const clearCustomErrors = useCallback<ValidatorWrapper['clearCustomErrors']>(() => {
+    setCustomErrors([])
+  }, [])
 
-  validate(): Validity {
-    const validator = new Validator({ stopAtFirstError: this.props.stopAtFirstError })
-    this.fields.forEach((comp) => {
+  const validate = useCallback<ValidatorWrapper['validate']>(() => {
+    const validator = new Validator({ stopAtFirstError })
+    for (const comp of fieldsRef.current) {
       validator.addField(comp.props)
-    })
+    }
     return validator.validate()
-  }
+  }, [stopAtFirstError])
 
-  render() {
-    return (
-      <Context.Provider
-        value={{
-          customErrors: this.state.customErrors,
-          registerField: this.registerField,
-          unregisterField: this.unregisterField,
-        }}
-      >
-        {this.props.children}
-      </Context.Provider>
-    )
-  }
-}
+  useImperativeHandle(
+    ref,
+    () => ({
+      validate,
+      getField,
+      registerField,
+      unregisterField,
+      setCustomError,
+      clearCustomErrors,
+    }),
+    [validate, getField, registerField, unregisterField, setCustomError, clearCustomErrors],
+  )
+
+  const contextValue = useMemo(
+    () => ({ customErrors, registerField, unregisterField }),
+    [customErrors, registerField, unregisterField],
+  )
+
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>
+})

package/src/validator.test.tsx

@@ -28,3 +28,13 @@ it('check normal add and remove fields', () => {
   newFieldSearchPassword = validator.getField('for-remove')
   expect(newFieldSearchPassword === null).toBe(true)
 })
+
+it('removeField does nothing when field is not registered', () => {
+  const validator = new Validator()
+  // create a field-like object that validator doesn't know about
+  // import Field from the module is possible, but we can emulate shape using any
+  // Should not throw and should not alter state
+  // @ts-expect-error.
+  expect(() => validator.removeField({})).not.toThrow()
+  expect(validator.getField('unknown')).toBe(null)
+})

package/src/validator.ts

@@ -1,11 +1,11 @@
-import { Value } from './validator-field'
-import { ValidatorRules } from './rules'
-import { FieldParams, Validity } from './types'
+import type { ValidatorRules } from './rules'
+import type { FieldParams, Validity } from './types'
+import type { Value } from './validator-field'
 
 export class Field {
-  private rules: ValidatorRules
-  private required: boolean
-  private value: Value
+  protected rules: ValidatorRules
+  protected required: boolean
+  protected value: Value
   public id: string | number
 
   constructor({ rules, required, value, id }: FieldParams) {
@@ -20,12 +20,12 @@ export class Field {
     let message = ''
     const { rules, value, required, id } = this
 
-    const isEmptyValue = !value && parseFloat(value) !== 0
+    const isEmptyValue = !value && Number.parseFloat(value) !== 0
 
     if (!rules.length || (isEmptyValue && required === false)) {
       return { isValid, message, id }
     }
-    rules.forEach((instance) => {
+    for (const instance of rules) {
       if (isValid) {
         isValid = instance.rule(value)
         if (!isValid) {
@@ -36,7 +36,7 @@ export class Field {
           }
         }
       }
-    })
+    }
     return { isValid, message, id }
   }
 }
@@ -70,7 +70,7 @@ export class Validator {
   }
 
   validate(): Validity {
-    let prevResult
+    let prevResult: Validity | null
     const statuses = this.fields.map((field) => {
       if (this.params?.stopAtFirstError && prevResult && prevResult.isValid === false) {
         return null

package/tsconfig.json

@@ -6,21 +6,17 @@
     "removeComments": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2017",
+    "target": "ESNext",
     "sourceMap": false,
-    "composite": true,
-    "incremental": true,
+    "composite": false,
+    "incremental": false,
     "noUnusedLocals": true,
     "noUnusedParameters": false,
     "resolveJsonModule": true,
     "outDir": "./dist",
     "rootDir": "src",
     "baseUrl": "./src",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -28,12 +24,6 @@
     "moduleResolution": "node",
     "jsx": "react-jsx"
   },
-  "include": [
-    "src",
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
+  "include": ["src", "src/**/*"],
+  "exclude": ["node_modules", "dist"]
 }