Playground

Throughout the docs, you will encounter occasional code snippets accompanied by a Try it button.

These open up the Schema Playground, an interactive editor that lets you experiment with schema processing and validation.

It consists of three panels:

1. SCHEMA - The source of your schema, plus any supporting code.
2. INPUT - The data to either Process or Validate with your schema.
3. OUTPUT - Holds the serialized result of your operation.

The Playground provides a dropdown list of schema source examples and associated pre-seeded inputs. Editing either the schema source or the input switches the editor to *scratch* mode; you can Snapshot the current state of your edits into the dropdown for recall and comparison.

The best way to understand the system is to play with it. Here's an example showing email, password, and date validation. Click the Try It button below the code block:

// This is an example that has been set up to work in the Playground.
import { Schema, SchemaResolver } from '@versionzero/schema';

// Notice that our Schema and SchemaResolver instances are exported.
//
// This is how the Playground knows what to compile, and is not
// necessary for typical use of the library.

export const resolver = new SchemaResolver();

resolver.registerSchema('secure-password',
  new Schema('string')
    .meta('valueDescription', '<8+ chars, with lower, upper, digit, and special>')
    .validator({$matches: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/})
)

export const schema = new Schema('object')
  .property('email', new Schema('string')
    .validator('$email')
    .required()
  )
  .property('password', new Schema('secure-password')
    .validator({$never: {$matches: /password/i}})
    .required()
  )
  .property('updated', new Schema('date').default('now'))

// This code only appears inline, but is used to populate the Playground
// input choices:
const userSchema = resolver.compile(schema);

const secure = {
  email: 'hello@example.com',
  password: 'superS3cr3tP@ssword'
}
console.log( await userSchema.process( secure ) );

const insecure = {
  email: 'hello@example.com',
  password: 'Password123!'
}
try {
  console.log( await userSchema.process( insecure ) );
}
catch (error) {
  console.error( error );
}

Playground Quirks

Exports

The Playground discovers the Schema to compile by looking at exports, or the final value of the code. If a SchemaResolver instance is also exported, it will be used for compilation; otherwise, an internal resolver is constructed. Therefore, make sure to export any resolver with custom registered schemas or value processors.

Serialized Output

If your Schema constructs class instances, they will show up in the output panel in serialized form. This can be a little confusing; for example, new Schema('date') yields a schema that accepts textual date format inputs, but emits actual Date instances. These instances then appear in the output panel in their serialized form, even though the actual value is a Date instance. You can test this in Playground with the above example by copying the Process output back to the input panel, and hitting Validate - you'll get a ValidationError because it wants a Date for the updated property. If you wrap the input field's update with a new Date(...), validation will succeed.

To Data / Resolve

These tools expand a Schema into a plain data format that is useful for using schemas without introducing

If your schema has any custom schemas or value processors registered with the SchemaResolver, they won't work in the Playground if you hit To Data, because the entire schema panel is converted into only the data.

If you hit Resolve, may work - but some processors may rely on bound scopes that are lost in the Playground.