@yobta/validator NPM

Yobta!

A promising and ridiculously small es6 validator that tree-shakes well and respects your bundle.

Current state: work in progress

Installation

npm i @yobta/validator

General Plan

We want to fulfill the front-end needs and create functional promise-based validator which is fun to work with.

General Requirements

Functional
Universal
Immutable
Sync/async
Coercion (https://ajv.js.org/coercion.html)

Functional requirements

Validate: maps, arrays, strings, numbers, booleans, dates, FormData, URLSearchParams
Flow control: fall-backs, side effects, logic operators, serializers

API proposals

Case 1: Store hydration

We need to get a predictable initial state from the URL, the operation should be sync and silent (no errors) and the state should be a plain object.

const getInitialState = yobta(
  urlSearchParamsYobta(),
  shapeYobta({
    currentTab: [catchYobta('tab-1', enumYobta(['tab-1', 'tab-2', 'tab-3']))],
    myModalIsOpen: [catchYobta(false, booleanYobta(), requiredYobta())],
  }),
)

const initialState = getInitialState(location.search)

const myStore = createStore('name', initialState)

Case 2: Form validation

We need to get a type-safe form data, but the validation operation should be async, because we don't know if one of the fields exists in our database. This operation can produce errors and we need human friendly error messages.

async function confirmPassword (password) (
  const response = await fetch(`/api/my-endpoint?password=${password}`)
  if (!response.ok) throw new Error('Wrong password')
  return password.data.password
)

const validate = asyncYobta(
  effectYobta(toggleFormLock),
  formYobta()
  awaitShapeYobta({
    password: [
      stringYobta(),
      requiredYobta(),
      awaitSubmitYobta(verifyPassword),
    ],
    new: [
      stringYobta(),
      requiredYobta(),
      minYobta(6),
      maxYobta(16),
      matchYobta(passwordRegExp), // make your own RegExp
    ],
    repeat: [
      requiredYobta(),
      identicalYobta('new')
    ],
  }),
  awaitSubmitYobta(sendMyFormAsJSON),
  errorsYobta(),
  validityYobta(), // https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity#examples
  effectYobta(toggleFormLock),
)

const myForm = window.getElementByID('myForm')

const [formData, errors] = await validate(myForm)

Problems and Limitations

Due to typescript design limitation the required rule needs an explicit type when chained (requiredYobta<string>('My error')). To avoid manual errors I decided to chose the wrapping approach:

requiredYobta(
  stringYobta('String type error message'),
  'Required error message',
)

Types

+ Async validator
+ Sync validator
+ Shape validator
+ Async Shape validator
+ Enum validator (one of)
- Array validator
- + items
- - contains (do later)
- + unique
- + minimum items
- + maximum items
- String validator
- + minimum characters
- + maximum characters
- + email
- - href (do later)
- - credit card number (do later)
- - phone number (do later)
- - base64 (do later)
+ Number validator
- + int
- + minimum
- + maximum
+ Boolean validator
+ Const validator
+ Date validator
- + minimum date
- + maximum date
+ RegExp test
+ FormData