Gathering detailed insights and metrics for babel-plugin-transform-class-remove-static-properties
Gathering detailed insights and metrics for babel-plugin-transform-class-remove-static-properties
Remove unnecessary React propTypes from the production build. 🎈
Installations
npm install babel-plugin-transform-class-remove-static-propertiesDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
10.16.0
NPM Version
6.10.1
Releases
42
Languages
1
JavaScript
JavaScript (100%)
Developer
oliviertassinari
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
893 Stars
254 Commits
46 Forks
14 Watchers
4 Branches
27 Contributors
Updated on May 02, 2025
Maintainers
1
Package Meta Information
Latest Version
0.0.2
Package Id
babel-plugin-transform-class-remove-static-properties@0.0.2
Unpacked Size
47.69 kB
Size
10.91 kB
File Count
12
NPM Version
6.10.1
Node Version
10.16.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
26
@babel/cli@babel/core@babel/generator@babel/plugin-external-helpers@babel/plugin-proposal-class-properties@babel/plugin-transform-flow-strip-types@babel/preset-env@babel/preset-flow@babel/preset-react@babel/registerbabel-eslintbabel-plugin-flow-react-proptypeschaieslinteslint-config-airbnbeslint-plugin-babeleslint-plugin-flowtypeeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-mochaeslint-plugin-prettiereslint-plugin-reactglobbymochapkgfilesprettier
babel-plugin-transform-react-remove-prop-types
Remove unnecessary React propTypes from the production build.
Installation
1npm 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
1const Baz = (props) => ( 2 <div {...props} /> 3); 4 5Baz.propTypes = { 6 className: PropTypes.string 7};
Out
1const Baz = (props) => ( 2 <div {...props} /> 3);
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:
1Component.propTypes /* remove-proptypes */ = {}
Usage
Via .babelrc (Recommended)
.babelrc
without options:
1{ 2 "env": { 3 "production": { 4 "plugins": ["transform-react-remove-prop-types"] 5 } 6 } 7}
with options:
1{ 2 "env": { 3 "production": { 4 "plugins": [ 5 ["transform-react-remove-prop-types", { 6 "mode": "wrap", 7 "ignoreFilenames": ["node_modules"] 8 }] 9 ] 10 } 11 } 12}
Via CLI
1babel --plugins transform-react-remove-prop-types script.js
Via Node API
without options:
1require('babel-core').transform('code', { 2 plugins: [ 3 'transform-react-remove-prop-types', 4 ], 5});
with options:
1require('babel-core').transform('code', { 2 plugins: [ 3 [ 4 'transform-react-remove-prop-types', 5 { 6 mode: 'wrap', 7 ignoreFilenames: ['node_modules'], 8 }, 9 ], 10 ], 11});
Options
mode
remove(default): thepropTypesdefinitions are removed from the source code.wrap: thepropTypesdefinitions are wrapped with the following code:
1Component.propTypes = process.env.NODE_ENV !== "production" ? { 2 // ... 3} : {};
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: thepropTypesdefinitions are wrapped with the following code:
1if (process.env.NODE_ENV !== "production") { 2 Component.propTypes = { 3 // ... 4 } 5}
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 ifmodeis set toremove:
1import 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:
1ignoreFilenames: ['node_modules'],
additionalLibraries
This option gives the possibility to remove other propTypes in addition to the canonical prop-types.
For instance, by default
1import PropTypes from 'prop-types' 2import ImmutablePropTypes from 'react-immutable-proptypes'
will result in the latter not to be removed, while with:
1additionalLibraries: ['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
1import CustomPropTypes from '../../prop-types/my-own-validator' 2import OtherCustomPropTypes from '../../prop-types/my-other-validator'
would be removed with the following setting
1additionalLibraries: [/\/prop-types\/.*$/]
If you use an index file
1import CustomPropTypes from '../../prop-types'
you could set it up as
1additionalLibraries: [/\/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:
1class MyComponent extends BaseComponent { 2 ... 3}
You would use:
1classNameMatchers: ["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:
1import createClass from 'create-react-class';
You would use:
1createReactClassName: '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:
1const 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
propTypesto 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
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 12/28 approved changesets -- score normalized to 4
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 17 are checked with a SAST tool
Reason
41 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Score
2.6
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More