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

babel-plugin-transform-react-remove-prop-types

v0.4.24

Published

Remove unnecessary React propTypes from the production build

Downloads

20,866,173

Readme

babel-plugin-transform-react-remove-prop-types

Remove unnecessary React propTypes from the production build.

npm version npm downloads Build Status

Dependencies DevDependencies

Installation

npm install --save-dev babel-plugin-transform-react-remove-prop-types

The problem solved

Remove React propTypes from the production build, as they are only used in development. You can save bandwidth by removing them.

Example

In

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

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

Out

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

With comment annotation

The majority of cases should be addressed by default by this plugin.

In some cases, for example when using HOCs (High Order Components), like react-redux's connect, or component inheritance (although it's NOT recommended), a comment after the propTypes definition may be used to force the removal:

Component.propTypes /* remove-proptypes */ = {}

Usage

Via .babelrc (Recommended)

.babelrc

without options:

{
  "env": {
    "production": {
      "plugins": ["transform-react-remove-prop-types"]
    }
  }
}

with options:

{
  "env": {
    "production": {
      "plugins": [
        ["transform-react-remove-prop-types", {
          "mode": "wrap",
          "ignoreFilenames": ["node_modules"]
        }]
      ]
    }
  }
}

Via CLI

babel --plugins transform-react-remove-prop-types script.js

Via Node API

without options:

require('babel-core').transform('code', {
  plugins: [
    'transform-react-remove-prop-types',
  ],
});

with options:

require('babel-core').transform('code', {
  plugins: [
    [
      'transform-react-remove-prop-types',
      {
        mode: 'wrap',
        ignoreFilenames: ['node_modules'],
      },
    ],
  ],
});

Options

mode

  • remove (default): the propTypes definitions are removed from the source code.
  • wrap: the propTypes definitions are wrapped with the following code:
Component.propTypes = process.env.NODE_ENV !== "production" ? {
  // ...
} : {};

Accessing Component.propTypes.className won't throw. It's a tradeoff between the size of the output file and the likelihood libraries like react-native-hyperlink breaks.

  • unsafe-wrap: the propTypes definitions are wrapped with the following code:
if (process.env.NODE_ENV !== "production") {
  Component.propTypes = {
    // ...
  }
}

Accessing Component.propTypes.className will throw.

The wrap modes are targeting React libraries like material-ui or react-native-web. They are not intended to be used by application authors.

removeImport

  • true: the import statements are removed as well. This option only works if mode is set to remove:
import PropTypes from 'prop-types'
  • false (default): does not remove the import statements.

ignoreFilenames

This filter generates a regular expression. Any filenames containing one of the array's strings will be ignored. By default, we match everything.

Following the Is it safe? section, you might encounter a component depending on the propTypes at runtime to work. For this reason, we provide an array options to filter out some files and folders. For instance, you can ignore all the npm modules:

ignoreFilenames: ['node_modules'],

additionalLibraries

This option gives the possibility to remove other propTypes in addition to the canonical prop-types.

For instance, by default

import PropTypes from 'prop-types'
import ImmutablePropTypes from 'react-immutable-proptypes'

will result in the latter not to be removed, while with:

additionalLibraries: ['react-immutable-proptypes'],

both will be removed.

Regular expressions

If you are using Babel 7 or newer and your config is stored in babel.config.js, you can also use a regular expression to describe modules, which should be removed.

This would be particularly useful when using custom prop types validators, implemented as part of your own source code. For example

import CustomPropTypes from '../../prop-types/my-own-validator'
import OtherCustomPropTypes from '../../prop-types/my-other-validator'

would be removed with the following setting

additionalLibraries: [/\/prop-types\/.*$/]

If you use an index file

import CustomPropTypes from '../../prop-types'

you could set it up as

additionalLibraries: [/\/prop-types$/]

classNameMatchers

Use this option to enable this plugin to run on components that extend a class different than React.Component or React.PureComponent.

Given this example:

class MyComponent extends BaseComponent {
  ...
}

You would use:

classNameMatchers: ["BaseComponent"]

createReactClassName

Use this option to set a custom name for the import of the create-react-class package that is different than createReactClass.

Given this example:

import createClass from 'create-react-class';

You would use:

createReactClassName: 'createClass'

Is it safe?

If you are using the propTypes in a conventional way, i.e by using them to perform type checking on the properties, that plugin should be safe to use.

However, some libraries are accessing the propTypes on the component directly. For instance react-native-vector-icons use them to split the properties between two components:

const touchableProps = pick(restProps, Object.keys(TouchableHighlight.propTypes));

:warning: The plugin is breaking that code if it ends up removing TouchableHighlight.propTypes.

Make sure you are:

  • Not using that pattern in your source code. If you do, explicitly export the propTypes to work around that limitation.
  • Not parsing the node_modules. If you do, test that your code is still working before shipping into production.

eslint-plugin-react has a rule forbid-foreign-prop-types that can help you make this plugin safer to use.

License

MIT