Schema - Your data ruler validator

Miguel Ramos — Fri, 25 Feb 2022 23:25:29 +0000

Olá again 👋, happy to introduce a new package Schema, a condition ruler validation for your data.

It is design to check if your data is compliant with the rules you define. It can be used as native form validator in any platform/framework as a raw, native validator. It will be integrated on other tool in the future for forms agnostic validation. It as ZERO dependencies and is developed in typescript. Feel free to contribute also.

Features

Rules for all native types (String, Number, Date, Boolean)
Support custom rules
Support object types and nested objects
Support on arrays of any type
Async checks

Install

You can install as:

yarn add @websublime/schema

Express steps

Define your schema of rules, then just check your data type if it is valid with the rules defined.

const schemaObject = ObjectType<{ age: number; email: string }>({
  age: NumberType().min(18),
  email: StringType().isEmail()
});

let validation = await schemaObject.check({
  age: 19,
  email: "ramos@websublime.dev"
});

expect(validation.properties?.age.hasError).toBeFalsy();
expect(validation.properties?.email.hasError).toBeFalsy();

Or just simple native types:

const str = StringType().minLength(5);

expect((await str.check("abcde")).hasError).toBeFalsy();
expect((await str.check("abcd")).hasError).toBeTruthy();

const validationSchema = NumberType().max(10);

expect((await validationSchema.check(9)).hasError).toBeFalsy();
expect((await validationSchema.check(11)).hasError).toBeTruthy();

Each native type as some rules already defined like:

String:

containsLetter (check if value contains only letters)
containsUppercaseLetter (check if value is uppercase)
containsLowercaseLetter (check if value is lowercase)
containsLetterOnly (check if value contains letters only)
containsNumber (check if value constains numbers)
isOneOf (check if is one of the types included)
isEmail (check if is valid email)
isURL (check if is valid url)
isHex (check if is a hex value)
pattern (test a reg expression)
rangeLength (check if value is between minimum and maximum length)
minLength (check if value as minimum length)
maxLength (check if value is less then maximum length)

And many more types. Also you can define custom rules or dependencies between rules.

A example more like real world:

type FormRegister = {
  password: string|null;
  email: string|null;
  firstName: string|null;
  lastName: string|null;
  repeat: string|null;
};

const formSchema = ObjectType<FormRegister>({
    email: StringType().isEmail('Please provide a valid email').isRequired('Email is required'),
    firstName: StringType().isRequired('First name is required'),
    lastName: StringType().isRequired('Last name is required'),
    password: StringType().minLength(8, 'Password should have minimum 8 characters').isRequired('Password is required'),
    repeat: StringType().minLength(8, 'Password should have minimum 8 characters').isRequired('Repeat password is required').addRule({
      errorMessage: 'Password confirmation not matching',
      validationFn: (value: string, parent: FormRegister) => {
        const { password = null } = parent || {};
        return value == password;
      }
    })
  });

Feel free to contribute!

Soon a github page with complete documentation and api. More to know, dig a bit testings. There are good examples there.

Links

Github link: https://github.com/websublime/schema

Happy coding! 🎉

VTX - vite monorepo manager

Miguel Ramos — Tue, 04 Jan 2022 03:00:42 +0000

Olá 👋, i'm very happy to introduce VTX, an wrapper on vite-cli tool to help on management of multi-apps, libs and packages for vuejs. Feel free to contribute also.

Features

Create a workspace to share libs or custom packages thru your apps.
Yarn workspaces only.
Create apps and serve on your localhost
Create libs to your apps or produce standalone dist to publish
Build on top of vitejs
Use all options from vitejs and a single configuration for your apps

Install

You should install as a global package for use it as cli tool. Just hit:

yarn global add @websublime/vtx-cli

After, vtx binary will be available to use it.

First steps

Start to create your workspace. Workspace is managed and design to use yarn as your dependency package manager. So for now is the only supported manager.

Create your workspace as:

vtx create-workspace

Nothing will be installed only created the initial directory structure to add apps and libs.

Ok, now just enter on your new workspace directory and create your first application. All applications and libs are created for typescript support. Let's initiate our first app:

vtx create-app

Cli will always put you questions to you refer what is name, directory our namespace.

Now on top of your root workspace perform an install:

yarn

Ok, you are now ready to run your first application as:

vtx dev

This are the initial steps to initiate multi-apps. You can perform lot of customisations, create libs, consume libs on your apps or share common code thru apps. For more info hit github link.

More like:

vtx create-lib
vtx dev --app todos --debug
vtx build --lib services -mode production

Feel free to contribute!

Links

Github link: https://github.com/miguelramos/vtx

Current

Create workspace
Create app
Create lib
Build app
Build lib
Optimize and preview (to come)

DEV Community: Miguel Ramos

Schema - Your data ruler validator

Features

Install

Express steps

Links

Happy coding! 🎉

VTX - vite monorepo manager

Features

Install

First steps

Links

Current

Happy coding! 🎉