feat: validation package type inference when extending validation plugins

Author: foxhound87

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 6.12.0 (master)
+
+- Feat: validation package type inference when extending validation plugins
+
 # 6.11.2 (master)
 
 - Fix: `autocomplete` to `autoComplete`

src/Field.ts

@@ -106,11 +106,6 @@ const setupDefaultProp = (
     fallback: instance.$initial,
   });
 
-interface ValidationAsyncDataInterface {
-  valid?: boolean;
-  message?: string;
-}
-
 export default class Field extends Base implements FieldInterface {
   hasInitialNestedFields = false;
   incremental = false;
@@ -171,7 +166,7 @@ export default class Field extends Base implements FieldInterface {
 
   validationErrorStack: string[] = [];
   validationFunctionsData: any[] = [];
-  validationAsyncData: ValidationAsyncDataInterface | undefined;
+  validationAsyncData: any;
   debouncedValidation: any;
 
   disposeValidationOnBlur: any;
@@ -293,7 +288,7 @@ export default class Field extends Base implements FieldInterface {
 
   get checkValidationErrors(): boolean {
     return (
-      (this.validationAsyncData?.valid === false &&
+      ((this.validationAsyncData as any)?.valid === false &&
         !_.isEmpty(this.validationAsyncData)) ||
         !_.isEmpty(this.validationErrorStack) ||
         _.isString(this.errorAsync) ||
@@ -756,7 +751,7 @@ export default class Field extends Base implements FieldInterface {
     this.showError = false;
     this.errorSync = null;
     this.errorAsync = null;
-    this.validationAsyncData = {};
+    this.validationAsyncData = undefined;
     this.validationFunctionsData = [];
     this.validationErrorStack = [];
     Promise.resolve().then(action(() => {

src/models/FieldInterface.ts

@@ -16,6 +16,7 @@ export interface FieldInterface extends BaseInterface {
   errorAsync: string | null;
   validationErrorStack: string[];
   validationFunctionsData: any[];
+  validationAsyncData: { valid?: boolean, message?: string | null;};
   debouncedValidation: any;
   autoFocus: boolean;
   inputMode: string;
@@ -69,7 +70,7 @@ export interface FieldInterface extends BaseInterface {
   // checkValidationPlugins(): void;
   initNestedFields(field: any, update: boolean): void;
   invalidate(message?: string, deep?: boolean, async?: boolean): void;
-  setValidationAsyncData(valid: boolean, message: string): void;
+  setValidationAsyncData(valid?: boolean, message?: string): void;
   resetValidation(deep: boolean): void;
   clear(deep?: boolean): void;
   reset(deep?: boolean): void;

src/models/ValidatorInterface.ts

@@ -1,19 +1,19 @@
 import Form from "../Form";
 import Field from "../Field";
-import {FieldInterface} from "./FieldInterface";
-import {FormInterface} from "./FormInterface";
-import {StateInterface} from "./StateInterface";
+import { FieldInterface } from "./FieldInterface";
+import { FormInterface } from "./FormInterface";
+import { StateInterface } from "./StateInterface";
 
 export interface ValidatorConstructor {
   form: FormInterface;
   plugins: ValidationPlugins;
 }
 
 export interface ValidateOptionsInterface {
-  showErrors?: boolean,
-  related?: boolean,
-  field?: FieldInterface,
-  path?: string,
+  showErrors?: boolean;
+  related?: boolean;
+  field?: FieldInterface;
+  path?: string;
 }
 
 export type ValidateOptions = string | ValidateOptionsInterface | Form | Field;
@@ -30,47 +30,48 @@ export interface ValidatorInterface {
   validateRelatedFields(field: any, showErrors: boolean): void;
 }
 
-export type ValidationPlugin  = {
-  class: any,
-  config?: ValidationPluginConfig,
-};
-
-export interface ValidationPlugins {
-  [key: string]: ValidationPlugin | undefined;
-  vjf?: ValidationPlugin;
-  dvr?: ValidationPlugin;
-  svk?: ValidationPlugin;
-  yup?: ValidationPlugin;
-  zod?: ValidationPlugin;
-  joi?: ValidationPlugin;
-}
-
 export type ValidationPackage = any;
 
-export type ExtendPlugin = ({ validator, form }: {
-  validator: any, // the plugin instance
-  form: FormInterface
+export type ExtendPlugin<TValidator = ValidationPackage> = (args: {
+  validator: TValidator;
+  form: FormInterface;
 }) => void;
 
-export interface ValidationPluginConfig {
-  package: ValidationPackage;
+export interface ValidationPluginConfig<TValidator = ValidationPackage> {
+  package: TValidator;
   schema?: any;
   options?: any;
-  extend?: ExtendPlugin;
+  extend?: ExtendPlugin<TValidator>;
 }
 
-export interface ValidationPluginConstructor {
-  config: ValidationPluginConfig;
+export interface ValidationPluginConstructor<TValidator = ValidationPackage> {
+  config: ValidationPluginConfig<TValidator>;
   state: StateInterface;
   promises: Promise<unknown>[];
 }
 
-export interface ValidationPluginInterface extends ValidationPluginConstructor {
-  validator: ValidatorInterface;
+export interface ValidationPluginInterface<TValidator = ValidationPackage>
+  extends ValidationPluginConstructor<TValidator> {
+  validator: TValidator;
   schema?: any;
-  extend?: ExtendPlugin;
-  validate(field: FieldInterface);
-  class?(constructor: ValidationPluginConstructor): void;
+  extend?: ExtendPlugin<TValidator>;
+  validate(field: FieldInterface): void;
+  class?(constructor: ValidationPluginConstructor<TValidator>): void;
+}
+
+export type ValidationPlugin<TValidator = ValidationPackage> = {
+  class: any;
+  config?: ValidationPluginConfig<TValidator>;
+};
+
+export interface ValidationPlugins {
+  [key: string]: ValidationPlugin | undefined;
+  vjf?: ValidationPlugin;
+  dvr?: ValidationPlugin;
+  svk?: ValidationPlugin;
+  yup?: ValidationPlugin;
+  zod?: ValidationPlugin;
+  joi?: ValidationPlugin;
 }
 
 export type DriversMap = {
@@ -82,5 +83,4 @@ export enum ValidationHooks {
   onError = 'onError',
 }
 
-
 export default ValidatorInterface;

src/validators/DVR.ts

@@ -1,38 +1,21 @@
 import _ from "lodash";
-import {
-  ValidationPlugin,
-  ValidationPluginConfig,
-  ValidationPluginConstructor,
-  ValidationPluginInterface,
-} from "../models/ValidatorInterface";
-
-/**
-  Declarative Validation Rules
-
-    const plugins = {
-      dvr: dvr({
-        package: validatorjs,
-        extend: callback,
-      }),
-    };
-
-*/
-export class DVR implements ValidationPluginInterface {
-  promises = [];
-
-  config = null;
-
-  state = null;
-
-  extend = null;
-
-  validator = null;
+import FieldInterface from "src/models/FieldInterface";
+import FormInterface from "src/models/FormInterface";
+import { ValidationPlugin, ValidationPluginConfig, ValidationPluginConstructor, ValidationPluginInterface } from "src/models/ValidatorInterface";
+
+export class DVR<TValidator = any> implements ValidationPluginInterface<TValidator> {
+  promises: Promise<any>[];
+  config: any;
+  state: any;
+  extend?: (args: { validator: TValidator; form: FormInterface }) => void;
+  validator: TValidator;
+  schema?: any;
 
   constructor({
     config,
     state = null,
     promises = [],
-  }: ValidationPluginConstructor) {
+  }: ValidationPluginConstructor<TValidator>) {
     this.state = state;
     this.promises = promises;
     this.extend = config?.extend;
@@ -41,23 +24,21 @@ export class DVR implements ValidationPluginInterface {
   }
 
   extendValidator() {
-    // extend using "extend" callback
-    if (typeof this.extend === 'function') {
+    if (typeof this.extend === "function") {
       this.extend({
         validator: this.validator,
         form: this.state.form,
       });
     }
   }
 
-  validate(field) {
-    // get form fields data
+  validate(field: FieldInterface) {
     const data = this.state.form.validatedValues;
     this.validateFieldAsync(field, data);
     this.validateFieldSync(field, data);
   }
 
-  makeLabels(validation, field) {
+  makeLabels(validation: any, field: FieldInterface) {
     const labels = { [field.path]: field.label };
     _.forIn(validation.rules[field.path], (rule) => {
       if (
@@ -85,34 +66,24 @@ export class DVR implements ValidationPluginInterface {
     validation.setAttributeNames(labels);
   }
 
-  validateFieldSync(field, data) {
+  validateFieldSync(field: FieldInterface, data: any) {
     const $rules = this.rules(field.rules, "sync");
-    // exit if no rules found
     if (_.isEmpty($rules[0])) return;
-    // get field rules
     const rules = { [field.path]: $rules };
-    // create the validator instance
-    const validation = new this.validator(data, rules);
-    // set label into errors messages instead key
+    const validation = new (this.validator as any)(data, rules);
     this.makeLabels(validation, field);
-    // check validation
     if (validation.passes()) return;
-    // the validation is failed, set the field error
     field.invalidate(_.head(validation.errors.get(field.path)), false);
   }
 
-  validateFieldAsync(field, data) {
+  validateFieldAsync(field: FieldInterface, data: any) {
     const $rules = this.rules(field.rules, "async");
-    // exit if no rules found
     if (_.isEmpty($rules[0])) return;
-    // get field rules
     const rules = { [field.path]: $rules };
-    // create the validator instance
-    const validation = new this.validator(data, rules);
-    // set label into errors messages instead key
+    const validation = new (this.validator as any)(data, rules);
     this.makeLabels(validation, field);
 
-    const $p = new Promise((resolve) =>
+    const $p = new Promise((resolve: any) =>
       validation.checkAsync(
         () => this.handleAsyncPasses(field, resolve),
         () => this.handleAsyncFails(field, validation, resolve)
@@ -122,36 +93,40 @@ export class DVR implements ValidationPluginInterface {
     this.promises.push($p);
   }
 
-  handleAsyncPasses(field, resolve) {
+  handleAsyncPasses(field: FieldInterface, resolve: () => void) {
     field.setValidationAsyncData(true);
     resolve();
   }
 
-  handleAsyncFails(field, validation, resolve) {
-    field.setValidationAsyncData(false, _.head(validation.errors.get(field.path)));
+  handleAsyncFails(field: FieldInterface, validation: any, resolve: () => void) {
+    field.setValidationAsyncData(
+      false,
+      _.head(validation.errors.get(field.path))
+    );
     this.executeAsyncValidation(field);
     resolve();
   }
 
-  executeAsyncValidation(field) {
+  executeAsyncValidation(field: FieldInterface) {
     if (field.validationAsyncData.valid === false) {
       field.invalidate(field.validationAsyncData.message, false, true);
     }
   }
 
-  rules(rules, type) {
+  rules(rules: any, type: "sync" | "async") {
     const $rules = _.isString(rules) ? _.split(rules, "|") : rules;
-    // eslint-disable-next-line new-cap
-    const v = new this.validator();
+    const v = new (this.validator as any)();
     return _.filter($rules, ($rule) =>
       type === "async"
-        ? v.getRule(_.split($rule, ":")[0]).async
-        : !v.getRule(_.split($rule, ":")[0]).async
+        ? v.getRule(_.split($rule, ":")[0])?.async
+        : !v.getRule(_.split($rule, ":")[0])?.async
     );
   }
 }
 
-export default (config?: ValidationPluginConfig): ValidationPlugin => ({
-  class: DVR,
-  config,
-});
+export default <TValidator = any>(
+  config?: ValidationPluginConfig<TValidator>
+): ValidationPlugin<TValidator> => ({
+    class: DVR<TValidator>,
+    config,
+  });