yobta

Tree-shakable es6 validator

Showing:

Popularity

Downloads/wk

3

GitHub Stars

10

Maintenance

Last Commit

9d ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

Yobta!

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

Current state: work in progress

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 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 = createYobta(
  urlSearchParamsYobta(),
  fromEntriesYobta(),
  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 = createAsyncYobta(
  asyncEffectYobta(toggleFormLock),
  formDataYobta({
    password: [
      stringYobta(),
      requiredYobta(),
      awaitYobta(verifyPassword),
    ],
    new: [
      stringYobta(),
      requiredYobta(),
      minYobta(6),
      maxYobta(16),
      matchYobta(passwordRegExp), // make your own RegExp
    ],
    repeat: [
      sameYobta('newPassword')
    ],
  })
  fromEntriesYobta(),
  submitYobta(sendMyFormAsJSON),
  errorsYobta(),
  reportValidityYobta(), // https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity#examples
  asyncEffectYobta(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
  • [+] 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
  • [+] Date validator
    • [+] minimum date
    • [+] maximum date
  • [+] RegExp test
  • [-] FormData validator

Flow Utilities

  • [+] required
  • [+] default
  • [+] catch
  • [+] identical
  • [+] different
  • [+] URLSearchParams
  • [+] from Entries
  • [+] side effect
  • [-] anyOf

Docs

  • [-] Readme for all
  • [-] JSDoc for all

Samples

  • Ajv — Follows json-schema.org specs, great choice for a back-end
  • Yup — Popular front-end library
  • Shark-Validator — a validator es6, but class-based
  • formurai — to be researched

Docs coming soon

Kudos:

Andrey Sitnik Joe Calzaretta Jon Schlinkert John-David Dalton

Pokes:

YoptaScript

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100