[[./images/Overgear.png]]

• YUP AST to validatior generator

We wanted to create a system where validations did not have to be statically compiled into the frontend sources, but rather served from the backend database, and usable by both the backend and the frontend simultaneously.

To do this we created a simple [[https://en.wikipedia.org/wiki/Abstract_syntax_tree][AST]] model using [[https://github.com/jquense/yup][yup]] for validation.

For many examples of the AST we can look into the [[./source/tests/converter.test.js][tests]] file, where different use cases are defined.

• Installing

With NPM: #+BEGIN_SRC bash npm install @overgear/yup-ast #+END_SRC

With yarn: #+BEGIN_SRC bash yarn add @overgear/yup-ast #+END_SRC

• Schema

The schema is defined as follows:

A simple array with a string name is seen as a prefix notational function lookup.

#+BEGIN_SRC json ["yup.object"] #+END_SRC

Is seen as a call to the function #+BEGIN_SRC javascript yup.object() #+END_SRC

Functions can be chained together by surrounding them by an array:

#+BEGIN_SRC json [ ["yup.object"], ["yup.required"], ] #+END_SRC

Becomes #+BEGIN_SRC javascript yup .object() .required() #+END_SRC

Anything else in the array after the prefix function is treated as an argument to be passed to that function:

#+BEGIN_SRC json [ ["yup.number"], ["yup.required"], ["yup.min", 50], ["yup.max", 500],

] #+END_SRC Becomes #+BEGIN_SRC javascript yup .object() .required() .min(50) .max(500) #+END_SRC

(Which validates that a number is required, greater than 50 and less than 500.

Multiple arguments can be passed to functions

#+BEGIN_SRC json [ ["yup.number"], ["yup.required"], ["yup.min", 50, "This is the error for failing this validation"], ["yup.max", 500, "Number should be less than 500"], ] #+END_SRC

Becomes #+BEGIN_SRC javascript yup .object() .required() .min(50, "This is the error for failing this validation") .max(500, "Number should be less than 500") #+END_SRC

and additional yup validators

#+BEGIN_SRC json [ ["yup.object"], ["yup.required"], [ "yup.shape", { "game": [["yup.string"], ["yup.required", "wizard.validations.is_required"]], "locale": [["yup.string"], ["yup.required", "wizard.validations.is_required"]], "category": [["yup.string"], ["yup.required", "wizard.validations.is_required"]], "subcategory": [["yup.string"], ["yup.required", "wizard.validations.is_required"]], }, ], ] #+END_SRC

Becomes #+BEGIN_SRC javascript yup .object() .required() .shape({ "game": yup.string().required("wizard.validations.is_required"), "locale": yup.string().required("wizard.validations.is_required"), "category": yup.string().required("wizard.validations.is_required"), "subcategory": yup.string().required("wizard.validations.is_required"), }) #+END_SRC

• Custom validators ** ~addCustomValidator(name, validator, binding = false)~ Adds a custom validator by name: #+BEGIN_SRC javascript addCustomValidator('myCustomValidator', yup.number().min(50).max(500)) #+END_SRC Which creates a custom validator, to be used as: #+BEGIN_SRC json [ ["myCustomValidator"] ] #+END_SRC ** ~getCustomValidator(name)~ Gets the value of a custom validator ** ~delCustomValidator(name)~ Removes a validator which the user has added

• Generated validator

Since the result of a call to transformAll is a yup validator, please see the [[https://github.com/jquense/yup][yup documentation]] for more information about features available.