developit / proptypes Goto Github PK

View Code? Open in Web Editor NEW

59.0 3.0 11.0 45 KB

:guardsman: React's PropTypes, as a standalone module.

Home Page: https://facebook.github.io/react/docs/reusable-components.html#prop-validation

License: Other

JavaScript 100.00%

proptypes standalone react preact

proptypes's Introduction

proptypes

React's PropTypes, packaged up as a standalone module.

DISCLAIMER: This is literally copied from the React 0.14 codebase. If you're using PropTypes with React, it would be silly to reference this standalone version.

Usage

function check(props, propTypes) {
  for (let prop in propTypes) {
    if (propTypes.hasOwnProperty(prop)) {
      let err = propTypes[prop](props, prop, 'name', 'prop');
      if (err) {
        console.warn(err);
        return false;
      }
    }
  }
  return true;
}

let valid = check({
  a: 42,
  b: 'News'
}, {
  a: PropTypes.number,
  b: PropTypes.oneOf(['News', 'Photos'])
});

valid;  // true

Production build

Disabling

With webpack:

module.exports = {
  resolve: {
    alias: {
      proptypes: 'proptypes/disabled',
    }
  }
};

Removing the definitions with React

When you are using this package with React like API, you might want to save bandwidth by removing the definitions. You can use babel-plugin-transform-react-remove-prop-types for that use case, for instance:

// In
const Baz = (props) => (
  <div {...props} />
);

Baz.propTypes = {
  className: PropTypes.string
};

// Out
const Baz = (props) => (
  <div {...props} />
);

License

BSD

proptypes's People

Contributors

Stargazers

Watchers

Forkers

phucpnt marklundin joonhocho mikestead algotrader jarodccrowe haroenv sapegin hamayun-shahid aswintrikkur

proptypes's Issues

Removing dead code in prod builds

I've been looking a little into reducing the weight of my production libs.js and noticed that this proptypes lib was adding around ~4kb after minification, I know not much but hey every bit counts, especially when proptypes isn't used in prod builds.

Looking at preact-compat where these prop types get brought in I see you formulate a DEV var based on process.env.NODE_ENV here, that's then used to enable/disable PropType usage.

Unfortunately uglify.js with webpack DefinePlugin doesn't strip out the proptypes code based on this. Perhaps with tree shaking it might but that's not 100% working yet so I've not spent too much time there. Also I think you need to use the explicit conditional e.g. if (process.env.NODE_ENV === 'production') for uglify stripping to work (see below).

Looking at React code they stub out all the prop type validators and use these when process.env.NODE_ENV is production'. They actually have a babel processor which replaces __DEV__ with process.env.NODE_ENV !== 'production.

So first pass I tried formulating the DEV var like you did in preact compat and applying it. That didn't work though. For uglify to strip the code you seem to have to use the explicit check in the conditional, and on it's own.

if (process.env.NODE_ENV !== 'production'`) {

} else {

}

which webpack will replace with the following in prod builds

if (false) { ...

https://github.com/developit/proptypes/compare/master...mikestead:feature/prod-noop?expand=1#diff-1fdf421c05c1140f6d71444ea2b27638R117

So the above works and my libs shrink

    libs.c1c2e08.js   131 kB    1, 2  [emitted]  libs // before
    libs.a0e99bd.js   127 kB    1, 2  [emitted]  libs // after

My problem is how to polyfill process.env IN the proptypes index.js. I tried something like the following

if (typeof process === 'undefined') {
  var process = {};
}
if (!process.env) {
  process.env = {};
}

but that interferes with the uglify stripping too. I think it would need polyfilled outside of this module for it to work?

Not super high priority, just hoped there may be a quick win.

disabled is not published in npm

see here: https://unpkg.com/[email protected]/

We need to use it in webpack config to build production release.

Deprecate the package in favor of the official prop-type

prop-types 15.6.0 was released with a MIT license instead of BSD+Patents. And I don’t see any reasons too keep this package alive anymore:

The official prop-types package has MIT license;
License of this package is questionable;
preact-compat uses prop-types
Doesn‘t look very much alive

So I would suggest to deprecate it completely. (I can send a PR to update the readme.)

How to use ?

Hi,

I love the idea of using the concept of PropTypes to validate any data in any js code. I briefly skimmed the code but didn't find an exposed function like check(dataToValidate, propTypes). Did I miss something ?

[Suggestion] Give npm package name back to React team

Seeing as how React is going this direction, it seems like the right thing to do.

https://github.com/reactjs/prop-types

proptypes changes impacted inferno-compat

inferno-compat expects proptypes to export proptypes.default. Can you please export both directly and using default property?

> require('proptypes').default
undefined

> require('proptypes')
{ array: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  bool: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  func: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  number: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  object: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  string: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  symbol: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  any: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  arrayOf: [Function: createArrayOfTypeChecker],
  element: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  instanceOf: [Function: createInstanceTypeChecker],
  node: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  objectOf: [Function: createObjectOfTypeChecker],
  oneOf: [Function: createEnumTypeChecker],
  oneOfType: [Function: createUnionTypeChecker],
  shape: [Function: createShapeTypeChecker] }

Do you have any guidance?