Security News
Internet Archive Hacked, 31 Million Record Compromised
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
babel-plugin-transform-react-remove-prop-types
Advanced tools
Remove unnecessary React propTypes from the production build
The babel-plugin-transform-react-remove-prop-types package is a Babel plugin that removes unnecessary React propTypes from the production build. This can help reduce the file size of your bundle and improve performance by eliminating development-only checks.
Remove PropTypes from React Components
This feature automatically strips out propTypes from your React components when building for production, which can lead to smaller bundle sizes and potentially faster application performance since the propTypes checks are not included.
import PropTypes from 'prop-types';
function MyComponent(props) {
// ...
}
MyComponent.propTypes = {
name: PropTypes.string
};
// After transformation with babel-plugin-transform-react-remove-prop-types
// The propTypes will be removed in production builds.
Option to remove PropTypes by wrapping them with a condition
This feature allows you to wrap your propTypes definitions in a condition that checks the environment. The plugin will remove the entire condition in production builds, effectively removing the propTypes.
if (process.env.NODE_ENV !== 'production') {
MyComponent.propTypes = {
name: PropTypes.string
};
}
// After transformation with babel-plugin-transform-react-remove-prop-types
// The propTypes will be removed in production builds, as the condition will be false.
Option to remove or wrap PropTypes with a custom function
This feature provides the ability to define a custom function that will be used to remove or wrap propTypes. This can be useful if you have a custom build process or want to apply more complex logic to the removal of propTypes.
MyComponent.propTypes = removePropTypesInProduction({
name: PropTypes.string
});
// After transformation with babel-plugin-transform-react-remove-prop-types
// The removePropTypesInProduction function will be replaced with an empty object or removed entirely in production builds.
This package transforms React class components that could be functions into functions. While it doesn't deal with propTypes directly, it is similar in the sense that it optimizes React components for production.
This Babel plugin transforms JSX elements to ReactElement objects directly, which can improve performance in some cases. It's similar in its goal of optimizing React applications for production.
Remove unnecessary React propTypes from the production build.
npm install --save-dev babel-plugin-transform-react-remove-prop-types
Remove React propTypes
from the production build, as they are only used in development.
You can save bandwidth by removing them.
In
const Baz = (props) => (
<div {...props} />
);
Baz.propTypes = {
className: PropTypes.string
};
Out
const Baz = (props) => (
<div {...props} />
);
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 */ = {}
.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"]
}]
]
}
}
}
babel --plugins transform-react-remove-prop-types script.js
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'],
},
],
],
});
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.
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'
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:
propTypes
to work around that limitation.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.
MIT
FAQs
Remove unnecessary React propTypes from the production build
We found that babel-plugin-transform-react-remove-prop-types demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
Security News
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.