npmpackage.info

Gathering detailed insights and metrics for babel-plugin-transform-react-remove-prop-types

Gathering detailed insights and metrics for babel-plugin-transform-react-remove-prop-types

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

Remove unnecessary React propTypes from the production build. 🎈

0.4.24

895

MIT

JavaScript

2.79 kB

1,208,637,218 2.6

Installations

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

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.9.1

NPM Version

6.1.0

Score

99.2

Supply Chain

99.1

Quality

78.3

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

1

Total

114

Closed

27

Merged

86

Issues

Open

15

Total

87

Closed

72

Releases

42

v0.4.24

Published on 01 Feb 2019

v0.4.23

Published on 16 Jan 2019

v0.4.22

Published on 15 Jan 2019

v0.4.21

Published on 03 Dec 2018

v0.4.20

Published on 06 Nov 2018

v0.4.19

Published on 15 Oct 2018

View all 42 releases

Contributors

27

Unable to fetch Contributors

View all 27 contributors

Languages

1

JavaScript

JavaScript (100%)

Developer

oliviertassinari

Download Statistics

Total Downloads

1,208,637,218

Last Day

788,403

Last Week

3,608,717

Last Month

16,690,384

Last Year

225,380,501

GitHub Statistics

895 Stars

254 Commits

61 Forks

15 Watching

4 Branches

27 Contributors

Bundle Size

7.67 kB

Minified

2.79 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

Package Meta Information

Latest Version

0.4.24

Package Id

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

Size

10.80 kB

NPM Version

6.1.0

Node Version

8.9.1

Publised On

01 Feb 2019

Total Downloads

Cumulative downloads

Total Downloads

1,208,637,218

Last day

-5.9%

788,403

Compared to previous day

Last week

-18.7%

3,608,717

Compared to previous week

Last month

6.9%

16,690,384

Compared to previous month

Last year

-9.8%

225,380,501

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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): the propTypes definitions are removed from the source code.
wrap: the propTypes definitions 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: the propTypes definitions 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 if mode is set to remove:

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 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

Empty State

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

39 existing vulnerabilities detected

Details

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-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-01-27

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.