Decouple custom messages and allow user defined ones

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/use-ajv-form",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Custom React Hook that integrates with Ajv JSON Schema Validator",
   "main": "dist/use-ajv-form.es.js",
   "author": "Aleksandar Grbic",
@@ -51,7 +51,6 @@
     "ajv": "8.12.0",
     "ajv-errors": "3.0.0",
     "ajv-formats": "2.1.1",
-    "programmer-network-ajv": "github:Programmer-Network/Programmer-Network-AJV",
     "prop-types": "15.7.2"
   },
   "devDependencies": {
@@ -79,7 +78,8 @@
     "vite": "5.0.2",
     "vite-plugin-dts": "3.6.3",
     "vite-tsconfig-paths": "4.2.1",
-    "vitest": "0.34.6"
+    "vitest": "0.34.6",
+    "programmer-network-ajv": "github:Programmer-Network/Programmer-Network-AJV"
   },
   "files": [
     "dist"

pnpm-lock.yaml

@@ -1,19 +1,29 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
-import { getInitial, getValue, getErrors } from './utils';
+import { getInitial, getValue, getErrors, addUserDefinedKeywords } from './utils';
 import { ajv } from './utils/validation';
 
-import { FormField, IState, useFormErrors, UseFormReturn } from './utils/types';
-import { ErrorObject, JSONSchemaType } from 'ajv';
+import {
+  AJVMessageFunction,
+  FormField,
+  IState,
+  useFormErrors,
+  UseFormReturn,
+} from './utils/types';
+import { ErrorObject, JSONSchemaType, KeywordDefinition } from 'ajv';
 import { useDebounce } from './Hooks/useDebounce';
 
 const useAJVForm = <T extends Record<string, any>>(
   initial: T,
   schema: JSONSchemaType<T>,
-  errors?: ErrorObject[],
+  options?: {
+    customKeywords?: KeywordDefinition[];
+    errors?: ErrorObject[];
+    userDefinedMessages?: Record<string, AJVMessageFunction>;
+  },
 ): UseFormReturn<T> => {
   const initialStateRef = useRef<IState<T>>(getInitial(initial));
+
   const [state, setState] = useState<IState<T>>(getInitial(initial));
-  const AJVValidate = ajv.compile(schema);
 
   const [currentField, setCurrentField] = useState<{
     name: keyof T;
@@ -22,6 +32,12 @@ const useAJVForm = <T extends Record<string, any>>(
   const [editCounter, setEditCounter] = useState(0);
   const debouncedField = useDebounce(currentField, 500);
 
+  if (options?.customKeywords?.length) {
+    addUserDefinedKeywords(ajv, options.customKeywords);
+  }
+
+  const AJVValidate = ajv.compile(schema);
+
   const resetForm = () => {
     setState(
       Object.keys(state).reduce((acc, name) => {
@@ -39,7 +55,9 @@ const useAJVForm = <T extends Record<string, any>>(
   const validateField = (fieldName: keyof T) => {
     const isValid = AJVValidate({ [fieldName]: state[fieldName].value });
     const errors = AJVValidate.errors || [];
-    const fieldErrors = isValid ? {} : getErrors(errors);
+    const fieldErrors = isValid
+      ? {}
+      : getErrors(errors, options?.userDefinedMessages);
 
     const error = isDirty ? fieldErrors[fieldName as string] || '' : '';
 
@@ -100,7 +118,10 @@ const useAJVForm = <T extends Record<string, any>>(
       }, {} as T);
 
       if (!AJVValidate(data) && AJVValidate.errors) {
-        const errors: useFormErrors<T> = getErrors(AJVValidate.errors);
+        const errors: useFormErrors<T> = getErrors(
+          AJVValidate.errors,
+          options?.userDefinedMessages,
+        );
 
         setState(
           setErrors(
@@ -142,12 +163,12 @@ const useAJVForm = <T extends Record<string, any>>(
   }, [debouncedField]);
 
   useEffect(() => {
-    if (!errors?.length) {
+    if (!options?.errors?.length) {
       return;
     }
 
-    setState(setErrors(getErrors(errors)));
-  }, [errors]);
+    setState(setErrors(getErrors(options?.errors, options?.userDefinedMessages)));
+  }, [options?.errors]);
 
   return {
     reset: resetForm,

src/index.ts

@@ -2,6 +2,7 @@ import { act, renderHook } from '@testing-library/react-hooks';
 import useAJVForm from '.';
 import { JSONSchemaType } from 'ajv';
 import { vi } from 'vitest';
+import { keywords } from 'utils/validation';
 
 beforeEach(() => {
   vi.useFakeTimers();
@@ -168,7 +169,9 @@ describe('useAJVForm', () => {
       },
     };
 
-    const { result } = renderHook(() => useAJVForm(initialData, schema));
+    const { result } = renderHook(() =>
+      useAJVForm(initialData, schema, { customKeywords: [...keywords] }),
+    );
 
     result.current.set({ title: 'Hello, world ++++' });
     result.current.onBlur('title');

src/useAjvForm.test.tsx

@@ -1,43 +1,25 @@
-import { ErrorObject } from 'ajv';
+import Ajv, { ErrorObject, KeywordDefinition } from 'ajv';
 
-import { InitialState, useFormErrors } from './types';
+import { AJVMessageFunction, InitialState, useFormErrors } from './types';
 
 import { DefaultAJVMessages } from './types';
 import { defaultAJVMessages } from './constants';
-import { customKeywordNames } from './validation';
 
-// TODO: Is there a better way to do this?
-// This is error prone because not all keywords are covered.
 const getFieldName = (field: ErrorObject): string | null => {
-  if (customKeywordNames.includes(field.keyword)) {
-    return field.instancePath.slice(1);
-  }
-
-  switch (field.keyword) {
-    case 'required':
-      return field.params.missingProperty;
-    case 'errorMessage':
-    case 'minimum':
-    case 'maximum':
-    case 'type':
-    case 'minItems':
-    case 'maxItems':
-    case 'minLength':
-    case 'maxLength':
-    case 'format':
-    case 'secure-string':
-      return field.instancePath.slice(1);
-    default:
-      return null;
-  }
+  return field.instancePath.slice(1);
 };
 
-const getErrorMessage = (error: ErrorObject): string => {
+const getErrorMessage = (
+  error: ErrorObject,
+  userDefinedMessages?: Record<string, AJVMessageFunction>,
+): string => {
   const UNKNOWN_VALIDATION_ERROR = 'Unknown validation error';
 
   try {
     const keyword = error.keyword as keyof DefaultAJVMessages;
-    const errorMessageFunction = defaultAJVMessages[keyword];
+    const errorMessageFunction = { ...defaultAJVMessages, ...userDefinedMessages }[
+      keyword
+    ];
 
     if (typeof errorMessageFunction === 'function') {
       return errorMessageFunction(error.params);
@@ -51,6 +33,7 @@ const getErrorMessage = (error: ErrorObject): string => {
 
 export const getErrors = <T extends Record<string, any>>(
   ajvErrors: ErrorObject[],
+  userDefinedMessages?: Record<string, AJVMessageFunction>,
 ): useFormErrors<T> => {
   return ajvErrors.reduce((acc, current) => {
     const fieldName: string | null = getFieldName(current);
@@ -60,7 +43,7 @@ export const getErrors = <T extends Record<string, any>>(
 
     return {
       ...acc,
-      [fieldName]: getErrorMessage(current),
+      [fieldName]: getErrorMessage(current, userDefinedMessages),
     };
   }, {});
 };
@@ -86,3 +69,16 @@ export const getValue = (value: unknown) => {
 
   return value ?? '';
 };
+
+export const addUserDefinedKeywords = (
+  ajv: Ajv,
+  customKeywords: KeywordDefinition[],
+): void => {
+  customKeywords.forEach((keyword: KeywordDefinition) => {
+    if (ajv.getKeyword(keyword.keyword as string)) {
+      return;
+    }
+
+    ajv.addKeyword(keyword);
+  });
+};

src/utils/index.ts

@@ -3,13 +3,13 @@
  * @url https://github.com/ajv-validator/ajv-formats
  * @url https://github.com/ajv-validator/ajv-errors
  */
-import Ajv, { KeywordDefinition } from 'ajv';
+import Ajv from 'ajv';
 import addAjvErrors from 'ajv-errors';
 import addFormats from 'ajv-formats';
 // @ts-expect-error - Currently, there is no type definition for this package.
 import programmerNetworkAjv from 'programmer-network-ajv';
 
-const { keywords } = programmerNetworkAjv;
+export const { keywords } = programmerNetworkAjv;
 
 export const ajv = addFormats(
   addAjvErrors(
@@ -28,9 +28,3 @@ export const ajv = addFormats(
     }),
   ),
 );
-
-keywords.map((keyword: string | KeywordDefinition) => ajv.addKeyword(keyword));
-
-export const customKeywordNames = keywords.map((keyword: { keyword: string }) => {
-  return keyword.keyword;
-});