npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

schemative

v0.0.0-development

Published

Declarative schemas with propTypes, default values and transformers

Downloads

7

Readme

Schemative

Enhanced, declarative, schematic objects



Schemative is a tool that helps you write declarative objects. It creates an object-like superstructure enhanced with the following features:

  1. Default values depending the attribute defined type.
  2. Declarative replenish by matching the schema.
  3. Get the React propTypes definition following your schema.

Why?

As a Javascript developer you'll find yourself facing three problems quite a lot of times:

  1. You're duplicating your objects data all around: when creating them, when transforming, parsing, validating, etc.
  2. You have to dummy fill the default values for some objects.
  3. You have to manual and imperatively modify your objects. For example to avoid exposing the API response to the internal app state.

With Schemative you're gonna define your objects just once. So there's a clear and nuclear single source of truth.

Schemative also enhance the objects with transformers and mutators. Therefore, even the object modification are gonna be controlled at definition point.

Yeah, but... Show me some code!

This is how you declare an object with Schemative:

import * as Schemative from 'schemative'

const schema = Schemative.createSchema({
  name: Schemative.string,
  year: Schemative.number,
  address: Schemative.shape({
    city: Schemative.string,
    postalcode: Schemative.number
  })
})

If you want to get the default values:

schema.Default
// {
//   name: '',
//   year: 0,
//   address: {
//     city: '',
//     postalcode: 0
//   }
// }

It can also return the React propTypes:

MyReactComponent.propTypes = schema.PropTypes

Once you have an schema you can replenish it transforming with a filled object:

const data = {
  name: 'Ada Lovelace',
  year: 1812,
  nope: 'Not defined in the schema'
}

schema.transform(data)
// {
//    name: 'Ada Lovelace',
//    year: 1812
// }

Note how those attributes that wasn't defined are excluded.

Transformers also works with mutators. Mutators are agents that overrides the final output. Can be a function which intake the candidate (object after being replenish) or a straight value. They came in 2 flavors: One, mutators can be executed on run-time:

schema.transform(data, {
  name: (candidate) => candidate.name.toUpperCase(),
  extra: 'New param out of the definition can be added here'
})
// {
//    name: 'ADA LOVELACE',
//    extra: 'New param out of the definition can be added here'
// }

Note that transform always returns a new object

The second flavor is defined on declarative time:

schema.transform.utators = {
  change: 'something'
}

schema.transform({})
// { change: 'something' }

schema.transform(data)
// {
//    name: 'Ada Lovelace',
//    change: 'something'
// }

API

Types

Used to generate the declarative schema.

| Type | Default value | Required value | | ------------- |--------------:| ---------------:| | any | true | - | | array | [] | - | | bool | true | - | | element | false | - | | func | noop| - | | instanceOf | false | - | | number | 0 | - | | node | false | - | | object | {} | - | | string | '' | - | | symbol | Symbol | - | | arrayOf | - | any primitve | | objectOf | - | any primitve | | oneOf | - | any primitve | | oneOfType | - | any primitve | | shape | - | {} |

createSchema({})

Needs and object containing the object structure definition. And returns an schema. It's the main function.

schema.Default

Return object matching the structure filled with the default type values.

schema.PropTypes

Return object matching the structure with the React.PropTypes.

schema.transform({}, {}?)

Method used to replenish the schema. First argument is the one from where the schema is gonna take the values.

The second are the agent mutators. Those who are gonna enhance the final filled object. Each field can be either a function or a straight value.

schema.transform.mutators

Assign an object an will be used a default mutator each time transform is called.