[RMBWEB-2780] Support for structured validation results

dumi/docs/concepts/state/index.md

@@ -25,11 +25,11 @@ export interface IState<V> {
   activated: boolean
   /** Current validate status. */
   validateStatus: ValidateStatus
-  /** The error info of validation, ErrorObject type will be filled with ErrorObject.message. */
+  /** The error info of validation. */
   error: ValidationError
-  /** The state's own error info, regardless of child states, ErrorObject type will be filled with ErrorObject.message. */
+  /** The state's own error info, regardless of child states. */
   ownError: ValidationError
-  /** Ihe state's own error info, regardless of child states. */
+  /** The state's own error info, includes ValidationErrorObject error type, regardless of child states. */
   rawError: ValidationRawError
   /** Append validator(s). */
   withValidator(...validators: Array<Validator<V>>): this
@@ -101,7 +101,7 @@ States will not be auto-validated until it becomes **activated**. And they will
 
 ### Raw Error
 
-The state's own raw error info, regardless of child states. The difference compared to `ownError` is that it contains the type of `ErrorObject`. You can check details about them in issue [#82](https://github.com/qiniu/formstate-x/issues/82).
+The state's own raw error info, regardless of child states. The difference compared to `ownError` is that it contains the type of `ValidationErrorObject`. You can check details about them in issue [#82](https://github.com/qiniu/formstate-x/issues/82).
 
 ### Disable State
 

dumi/docs/concepts/validator/index.md

@@ -32,10 +32,10 @@ export type ValidationResult =
   | null
   | undefined
   | false
-  | ErrorObject
+  | ValidationErrorObject
 
 /** Object type validation result. */
-export type ErrorObject = { message: string }
+export type ValidationErrorObject = { message: string }
 
 /** Return value of validator. */
 export type ValidatorReturned = 

src/adapter/v2.ts

@@ -3,19 +3,13 @@ import * as v2 from 'formstate-x-v2'
 import { BaseState } from '../state'
 import * as v3 from '..'
 import Disposable from '../disposable'
+import { isPromiseLike, normalizeError, normalizeRawError } from '../utils'
 
 interface IV3StateFromV2<T extends v2.ComposibleValidatable<unknown, V>, V> extends v3.IState<V> {
   /** The original ([email protected]) state */
   $: T
 }
 
-type ExcludeErrorObject<V> = V extends v3.ErrorObject ? never : V extends Promise<infer R> ? Promise<ExcludeErrorObject<R>> : V
-
-type Conditional<K> = K extends any ? ExcludeErrorObject<K> : never
-
-// Omit ErrorObject
-type LegacyValidator<T> = (V: T) => Conditional<ReturnType<v3.Validator<T>>>
-
 class Upgrader<T extends v2.ComposibleValidatable<unknown, V>, V> extends BaseState implements IV3StateFromV2<T, V> {
   constructor(private stateV2: T) {
     super()
@@ -50,12 +44,12 @@ class Upgrader<T extends v2.ComposibleValidatable<unknown, V>, V> extends BaseSt
     setForV2(this.stateV2, value)
   }
   reset() { this.stateV2.reset() }
-  withValidator(...validators: Array<LegacyValidator<V>>) {
+  withValidator(...validators: Array<v3.Validator<V>>) {
     if (
       isV2FieldState(this.stateV2)
       || isV2FormState(this.stateV2)
     ) {
-      this.stateV2.validators(...validators)
+      this.stateV2.validators(...portV2Validators(...validators))
       return this
     }
     throwNotSupported()
@@ -72,6 +66,22 @@ class Upgrader<T extends v2.ComposibleValidatable<unknown, V>, V> extends BaseSt
   }
 }
 
+function portV2Validators<V>(...validators: Array<v3.Validator<V>>): Array<v2.Validator<V>> {
+  const normalizeRet = (v: any) => (
+    normalizeError(normalizeRawError(v))
+  )
+  return validators.map(validator => {
+    return (value: V) => {
+      const returned = validator(value)
+      if (isPromiseLike(returned)) {
+        return returned.then(normalizeRet)
+      } else {
+        return normalizeRet(returned)
+      }
+    }
+  })
+}
+
 /** Converts [email protected] state to [email protected] state */
 export function fromV2<T extends v2.ComposibleValidatable<unknown, unknown>>(stateV2: T): IV3StateFromV2<T, T['value']> {
   return new Upgrader(stateV2)

src/debouncedState.ts

@@ -2,7 +2,7 @@ import { action, computed, makeObservable, observable, override, reaction } from
 import { FieldState } from './fieldState'
 import { ValidatableState } from './state'
 import { IState, ValidateStatus, ValueOf } from './types'
-import { debounce, isErrorObject } from './utils'
+import { debounce, normalizeError } from './utils'
 
 const defaultDelay = 200 // ms
 
@@ -52,7 +52,7 @@ export class DebouncedState<S extends IState<V>, V = ValueOf<S>> extends Validat
 
   @override override get ownError() {
     if (this.disabled) return undefined
-    if (this._error) return isErrorObject(this._error) ? this._error.message : this._error
+    if (this._error) return normalizeError(this._error)
     return this.original.ownError
   }
 

src/state.ts

@@ -1,7 +1,7 @@
 import { action, autorun, computed, makeObservable, observable, when } from 'mobx'
 import { ValidationRawError, ValidationError, IState, Validation, ValidateResult, ValidateStatus, Validator } from './types'
 import Disposable from './disposable'
-import { applyValidators, isValid, isPromiseLike, isErrorObject } from './utils'
+import { applyValidators, isPromiseLike, normalizeRawError, normalizeError } from './utils'
 
 /** Extraction for some basic features of State */
 export abstract class BaseState extends Disposable implements Pick<
@@ -63,7 +63,7 @@ export abstract class ValidatableState<V> extends BaseState implements IState<V>
   }
 
   @computed get ownError() {
-    return this.rawError ? (isErrorObject(this.rawError) ? this.rawError.message : this.rawError) : undefined
+    return normalizeError(this.rawError)
   }
 
   @computed get error() {
@@ -108,7 +108,7 @@ export abstract class ValidatableState<V> extends BaseState implements IState<V>
     action('end-validation', () => {
       this.validation = undefined
       this._validateStatus = ValidateStatus.Validated
-      this.setError(isValid(result) ? undefined : result)
+      this.setError(normalizeRawError(result))
     })()
   }
 

src/types.ts

@@ -4,7 +4,7 @@ export type ValidationResult =
   | null
   | undefined
   | false
-  | ErrorObject
+  | ValidationErrorObject
 
 /** Return value of validator. */
 export type ValidatorReturned = 
@@ -19,9 +19,9 @@ export type Validation<TValue> = {
   returned: ValidatorReturned // result of applying validators
 }
 
-export type ErrorObject = { message: string }
+export type ValidationErrorObject = { message: string }
 export type ValidationError = string | undefined
-export type ValidationRawError = ErrorObject | ValidationError
+export type ValidationRawError = ValidationErrorObject | ValidationError
 
 export type ValidateResultWithError = { hasError: true, rawError: ValidationRawError, error: NonNullable<ValidationError> }
 export type ValidateResultWithValue<T> = { hasError: false, value: T }
@@ -33,13 +33,13 @@ export interface IState<V = unknown> {
   value: V
   /** If value has been touched. */
   touched: boolean
-  /** The error info of validation, ErrorObject type will be filled with ErrorObject.message. */
+  /** The error info of validation. */
   error: ValidationError
   /** If the state contains error. */
   hasError: boolean
-  /** The state's own error info, regardless of child states, ErrorObject type will be filled with ErrorObject.message. */
+  /** The state's own error info, regardless of child states. */
   ownError: ValidationError
-  /** Ihe state's own error info, regardless of child states. */
+  /** Ihe state's own error info, includes ValidationErrorObject error type, regardless of child states. */
   rawError: ValidationRawError
   /** If the state contains its own error info. */
   hasOwnError: boolean

src/utils.spec.ts

@@ -1,23 +1,24 @@
 import { observable } from 'mobx'
-import { asyncResultsAnd, isValid, isArrayLike, isErrorObject } from './utils'
+import { asyncResultsAnd, isValidationPassed, isArrayLike, isErrorObject, normalizeRawError, normalizeError } from './utils'
 import { delayValue as delay } from './testUtils'
+import { ValidationErrorObject } from './types'
 
 describe('asyncResultsAnd', () => {
   it('should work well with empty results', async () => {
     const result = await asyncResultsAnd([])
-    expect(isValid(result)).toBe(true)
+    expect(isValidationPassed(result)).toBe(true)
   })
 
   it('should work well with all-passed results', async () => {
     const result = await asyncResultsAnd([delay(null)])
-    expect(isValid(result)).toBe(true)
+    expect(isValidationPassed(result)).toBe(true)
 
     await asyncResultsAnd([
       delay(null, 30),
       delay(undefined, 10),
       delay(false, 20)
     ])
-    expect(isValid(result)).toBe(true)
+    expect(isValidationPassed(result)).toBe(true)
   })
 
   it('should work well with unpassed results', async () => {
@@ -99,5 +100,45 @@ describe('isErrorObject', () => {
     expect(isErrorObject({message: 'msg'})).toBe(true)
     expect(isErrorObject({message: 'msg', extra: 'ext' })).toBe(true)
     expect(isErrorObject(new Error('error msg'))).toBe(true)
+
+    class Foo implements ValidationErrorObject { message = 'mewo' }
+    expect(isErrorObject(new Foo())).toBe(true)
+
+    class Bar extends Foo {}
+    expect(isErrorObject(new Bar())).toBe(true)
+  })
+})
+
+describe('normalizeValidationResult', () => {
+  it('normalizeRawError should work well', () => {
+    expect(normalizeRawError(false)).toBe(undefined)
+    expect(normalizeRawError(null)).toBe(undefined)
+    expect(normalizeRawError(undefined)).toBe(undefined)
+    expect(normalizeRawError('')).toBe(undefined)
+    expect(normalizeRawError('foo')).toBe('foo')
+    expect(normalizeRawError({ message: 'mewo' })).toEqual({ message: 'mewo' })
+
+    class Foo implements ValidationErrorObject { message = 'mewo' }
+    const foo = new Foo()
+    expect(normalizeRawError(foo)).toBe(foo)
+
+    class Bar extends Foo {}
+    const bar = new Bar()
+    expect(normalizeRawError(bar)).toBe(bar)
+  })
+
+  it('normalizeError should work well', () => {
+    expect(normalizeError(undefined)).toBe(undefined)
+    expect(normalizeError('')).toBe('')
+    expect(normalizeError('foo')).toBe('foo')
+    expect(normalizeError({ message: 'mewo' })).toBe('mewo')
+
+    class Foo implements ValidationErrorObject { message = 'mewo' }
+    const foo = new Foo()
+    expect(normalizeError(foo)).toBe('mewo')
+
+    class Bar extends Foo {}
+    const bar = new Bar()
+    expect(normalizeError(bar)).toBe('mewo')
   })
 })

src/utils.ts

@@ -1,17 +1,36 @@
 import { isObservableArray, IObservableArray } from 'mobx'
-import { Validator, ValidationResult, ValidatorReturned, ErrorObject } from './types'
+import { Validator, ValidationResult, ValidatorReturned, ValidationError, ValidationErrorObject, ValidationRawError } from './types'
 
-export function isErrorObject(err: any): err is ErrorObject {
+export function normalizeRawError(err: ValidationResult): ValidationRawError {
+  if (isErrorObject(err)) {
+    return err
+  }
+
+  if (err === false || err === '' || err === null) {
+    // TODO: print an alert?
+    return undefined
+  }
+
+  return err
+}
+
+export function normalizeError(rawError: ValidationRawError): ValidationError {
+  if (isErrorObject(rawError)) {
+    return rawError.message
+  }
+  return rawError
+}
+
+export function isErrorObject(err: any): err is ValidationErrorObject {
   return err != null && typeof err === 'object' && 'message' in err
 }
 
 export function isPromiseLike(arg: any): arg is Promise<any> {
   return arg != null && typeof arg === 'object' && typeof arg.then === 'function'
 }
 
-/** If validation result is valid */
-export function isValid(result: ValidationResult): result is '' | null | undefined | false {
-  return !result
+export function isValidationPassed(result: ValidationResult): result is undefined {
+  return normalizeRawError(result) === undefined
 }
 
 export function asyncResultsAnd(asyncResults: Array<Promise<ValidationResult>>): ValidatorReturned {
@@ -22,7 +41,7 @@ export function asyncResultsAnd(asyncResults: Array<Promise<ValidationResult>>):
     let validResultCount = 0
     asyncResults.forEach(asyncResult => asyncResult.then(result => {
       // return error if any result is invalid
-      if (!isValid(result)) {
+      if (!isValidationPassed(result)) {
         resolve(result)
         return
       }
@@ -56,7 +75,7 @@ export function applyValidators<TValue>(value: TValue, validators: Validator<TVa
     }
 
     // 任一不通过，则不通过
-    if (!isValid(returned)) {
+    if (!isValidationPassed(returned)) {
       return returned
     }
   }