Skip to content

Commit

Permalink
fix: strip custom prop-types in production (#448)
Browse files Browse the repository at this point in the history
Minified size with bundled dependencies before
17.53 KB
After
16.66 KB
  • Loading branch information
TrySound authored and jquense committed Jan 14, 2019
1 parent 200bfc3 commit 46fa20f
Show file tree
Hide file tree
Showing 6 changed files with 461 additions and 224 deletions.
8 changes: 8 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@
"travis-deploy-once": "travis-deploy-once",
"semantic-release": "semantic-release"
},
"size-limit": [
{
"gzip": false,
"path": "lib/index.js",
"limit": "16.66 KB"
}
],
"repository": {
"type": "git",
"url": "https://github.com/reactjs/react-transition-group.git"
Expand Down Expand Up @@ -94,6 +101,7 @@
"semantic-release": "^15.9.16",
"semantic-release-alt-publish-dir": "^2.1.1",
"sinon": "^6.3.4",
"size-limit": "^0.21.1",
"travis-deploy-once": "^5.0.8",
"webpack": "^4.19.1",
"webpack-atoms": "^8.0.0",
Expand Down
198 changes: 98 additions & 100 deletions src/CSSTransition.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,105 +10,6 @@ import { classNamesShape } from './utils/PropTypes';
const addClass = (node, classes) => node && classes && classes.split(' ').forEach(c => addOneClass(node, c));
const removeClass = (node, classes) => node && classes && classes.split(' ').forEach(c => removeOneClass(node, c));

const propTypes = {
...Transition.propTypes,

/**
* The animation classNames applied to the component as it enters, exits or has finished the transition.
* A single name can be provided and it will be suffixed for each stage: e.g.
*
* `classNames="fade"` applies `fade-enter`, `fade-enter-active`, `fade-enter-done`,
* `fade-exit`, `fade-exit-active`, `fade-exit-done`, `fade-appear`, and `fade-appear-active`.
* Each individual classNames can also be specified independently like:
*
* ```js
* classNames={{
* appear: 'my-appear',
* appearActive: 'my-active-appear',
* enter: 'my-enter',
* enterActive: 'my-active-enter',
* enterDone: 'my-done-enter',
* exit: 'my-exit',
* exitActive: 'my-active-exit',
* exitDone: 'my-done-exit',
* }}
* ```
*
* If you want to set these classes using CSS Modules:
*
* ```js
* import styles from './styles.css';
* ```
*
* you might want to use camelCase in your CSS file, that way could simply spread
* them instead of listing them one by one:
*
* ```js
* classNames={{ ...styles }}
* ```
*
* @type {string | {
* appear?: string,
* appearActive?: string,
* enter?: string,
* enterActive?: string,
* enterDone?: string,
* exit?: string,
* exitActive?: string,
* exitDone?: string,
* }}
*/
classNames: classNamesShape,

/**
* A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
* applied.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEnter: PropTypes.func,

/**
* A `<Transition>` callback fired immediately after the 'enter-active' or
* 'appear-active' class is applied.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntering: PropTypes.func,

/**
* A `<Transition>` callback fired immediately after the 'enter' or
* 'appear' classes are **removed** and the `done` class is added to the DOM node.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntered: PropTypes.func,


/**
* A `<Transition>` callback fired immediately after the 'exit' class is
* applied.
*
* @type Function(node: HtmlElement)
*/
onExit: PropTypes.func,

/**
* A `<Transition>` callback fired immediately after the 'exit-active' is applied.
*
* @type Function(node: HtmlElement)
*/
onExiting: PropTypes.func,

/**
* A `<Transition>` callback fired immediately after the 'exit' classes
* are **removed** and the `exit-done` class is added to the DOM node.
*
* @type Function(node: HtmlElement)
*/
onExited: PropTypes.func,
};

/**
* A `Transition` component using CSS transitions and animations.
* It's inspired by the excellent [ng-animate](http://www.nganimate.org/) library.
Expand Down Expand Up @@ -246,6 +147,103 @@ class CSSTransition extends React.Component {
}
}

CSSTransition.propTypes = propTypes;
CSSTransition.propTypes = {
...Transition.propTypes,

/**
* The animation classNames applied to the component as it enters, exits or has finished the transition.
* A single name can be provided and it will be suffixed for each stage: e.g.
*
* `classNames="fade"` applies `fade-enter`, `fade-enter-active`, `fade-enter-done`,
* `fade-exit`, `fade-exit-active`, `fade-exit-done`, `fade-appear`, and `fade-appear-active`.
* Each individual classNames can also be specified independently like:
*
* ```js
* classNames={{
* appear: 'my-appear',
* appearActive: 'my-active-appear',
* enter: 'my-enter',
* enterActive: 'my-active-enter',
* enterDone: 'my-done-enter',
* exit: 'my-exit',
* exitActive: 'my-active-exit',
* exitDone: 'my-done-exit',
* }}
* ```
*
* If you want to set these classes using CSS Modules:
*
* ```js
* import styles from './styles.css';
* ```
*
* you might want to use camelCase in your CSS file, that way could simply spread
* them instead of listing them one by one:
*
* ```js
* classNames={{ ...styles }}
* ```
*
* @type {string | {
* appear?: string,
* appearActive?: string,
* enter?: string,
* enterActive?: string,
* enterDone?: string,
* exit?: string,
* exitActive?: string,
* exitDone?: string,
* }}
*/
classNames: classNamesShape,

/**
* A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
* applied.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEnter: PropTypes.func,

/**
* A `<Transition>` callback fired immediately after the 'enter-active' or
* 'appear-active' class is applied.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntering: PropTypes.func,

/**
* A `<Transition>` callback fired immediately after the 'enter' or
* 'appear' classes are **removed** and the `done` class is added to the DOM node.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntered: PropTypes.func,


/**
* A `<Transition>` callback fired immediately after the 'exit' class is
* applied.
*
* @type Function(node: HtmlElement)
*/
onExit: PropTypes.func,

/**
* A `<Transition>` callback fired immediately after the 'exit-active' is applied.
*
* @type Function(node: HtmlElement)
*/
onExiting: PropTypes.func,

/**
* A `<Transition>` callback fired immediately after the 'exit' classes
* are **removed** and the `exit-done` class is added to the DOM node.
*
* @type Function(node: HtmlElement)
*/
onExited: PropTypes.func,
};

export default CSSTransition
20 changes: 9 additions & 11 deletions src/ReplaceTransition.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,6 @@ import React from 'react';
import { findDOMNode } from 'react-dom'
import TransitionGroup from './TransitionGroup';

const propTypes = {
in: PropTypes.bool.isRequired,
children(props, propName) {
if (React.Children.count(props[propName]) !== 2)
return new Error(`"${propName}" must be exactly two transition components.`)

return null;
},
};

/**
* The `<ReplaceTransition>` component is a specialized `Transition` component
* that animates between two children.
Expand Down Expand Up @@ -78,6 +68,14 @@ class ReplaceTransition extends React.Component {
}
}

ReplaceTransition.propTypes = propTypes;
ReplaceTransition.propTypes = {
in: PropTypes.bool.isRequired,
children(props, propName) {
if (React.Children.count(props[propName]) !== 2)
return new Error(`"${propName}" must be exactly two transition components.`)

return null;
},
};

export default ReplaceTransition;
99 changes: 49 additions & 50 deletions src/TransitionGroup.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,55 +11,6 @@ import {

const values = Object.values || (obj => Object.keys(obj).map(k => obj[k]))

const propTypes = {
/**
* `<TransitionGroup>` renders a `<div>` by default. You can change this
* behavior by providing a `component` prop.
* If you use React v16+ and would like to avoid a wrapping `<div>` element
* you can pass in `component={null}`. This is useful if the wrapping div
* borks your css styles.
*/
component: PropTypes.any,
/**
* A set of `<Transition>` components, that are toggled `in` and out as they
* leave. the `<TransitionGroup>` will inject specific transition props, so
* remember to spread them through if you are wrapping the `<Transition>` as
* with our `<Fade>` example.
*/
children: PropTypes.node,

/**
* A convenience prop that enables or disables appear animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
appear: PropTypes.bool,
/**
* A convenience prop that enables or disables enter animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
enter: PropTypes.bool,
/**
* A convenience prop that enables or disables exit animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
exit: PropTypes.bool,

/**
* You may need to apply reactive updates to a child as it is exiting.
* This is generally done by using `cloneElement` however in the case of an exiting
* child the element has already been removed and not accessible to the consumer.
*
* If you do need to update a child as it leaves you can provide a `childFactory`
* to wrap every child, even the ones that are leaving.
*
* @type Function(child: ReactElement) -> ReactElement
*/
childFactory: PropTypes.func,
}

const defaultProps = {
component: 'div',
childFactory: child => child,
Expand Down Expand Up @@ -157,7 +108,55 @@ class TransitionGroup extends React.Component {
}
}

TransitionGroup.propTypes = propTypes
TransitionGroup.propTypes = {
/**
* `<TransitionGroup>` renders a `<div>` by default. You can change this
* behavior by providing a `component` prop.
* If you use React v16+ and would like to avoid a wrapping `<div>` element
* you can pass in `component={null}`. This is useful if the wrapping div
* borks your css styles.
*/
component: PropTypes.any,
/**
* A set of `<Transition>` components, that are toggled `in` and out as they
* leave. the `<TransitionGroup>` will inject specific transition props, so
* remember to spread them through if you are wrapping the `<Transition>` as
* with our `<Fade>` example.
*/
children: PropTypes.node,

/**
* A convenience prop that enables or disables appear animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
appear: PropTypes.bool,
/**
* A convenience prop that enables or disables enter animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
enter: PropTypes.bool,
/**
* A convenience prop that enables or disables exit animations
* for all children. Note that specifying this will override any defaults set
* on individual children Transitions.
*/
exit: PropTypes.bool,

/**
* You may need to apply reactive updates to a child as it is exiting.
* This is generally done by using `cloneElement` however in the case of an exiting
* child the element has already been removed and not accessible to the consumer.
*
* If you do need to update a child as it leaves you can provide a `childFactory`
* to wrap every child, even the ones that are leaving.
*
* @type Function(child: ReactElement) -> ReactElement
*/
childFactory: PropTypes.func,
}

TransitionGroup.defaultProps = defaultProps

export default polyfill(TransitionGroup)
Loading

0 comments on commit 46fa20f

Please sign in to comment.