Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhancement for best practice prop types. #70

Merged
merged 4 commits into from
Jun 12, 2017
Merged

Enhancement for best practice prop types. #70

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c0aadb4
Fixes #69: Adding capability to reduce production build output size and
virgofx Jun 3, 2017
b33b0dd
Updated .babelrc that properly wraps prop-types.
virgofx Jun 7, 2017
5321582
Restoring the original constant declaration for prop types as uglify
virgofx Jun 10, 2017
13a727b
Updating changelog.
virgofx Jun 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"plugins": [
"dev-expression",
"add-module-exports",
"transform-object-assign"
"transform-object-assign",
["transform-react-remove-prop-types", { mode: "wrap" }]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is the idea that wrapping will work with uglify to remove dead code?

Copy link
Contributor Author

@virgofx virgofx Jun 7, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, correct. Sample output bundle from development build would look as follows:

TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
  component: _propTypes2.default.any,
  childFactory: _propTypes2.default.func,
  children: _propTypes2.default.node
} : {};

In the now production build for this app (as well as end-users who import and build production bundles using either Webpack -p or equivalently Define + Uglify plugins) will result in:

After Define

TransitionGroup.propTypes = false ? {
  component: _propTypes2.default.any,
  childFactory: _propTypes2.default.func,
  children: _propTypes2.default.node
} : {};

After Uglify

TransitionGroup.propTypes = {};

So small changes; however, allows for smaller code base in this production bundle -- which is a good thing... And optionally allows for end-users to perform the same optimizations when using bundlers like Webpack, browserify, etc, when not using external distribution production build.

This is how a lot of packages help reduce filesize (e.g. material-ui)

],
}
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.5",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this here? you aren't using it anywhere

Copy link
Contributor Author

@virgofx virgofx Jun 7, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, forgot to add plugin wrap mode to .babelrc, Updated.

"babel-preset-latest": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-2": "^6.18.0",
Expand Down
34 changes: 16 additions & 18 deletions src/CSSTransitionGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,6 @@ import TransitionGroup from './TransitionGroup';
import CSSTransitionGroupChild from './CSSTransitionGroupChild';
import { nameShape, transitionTimeout } from './utils/PropTypes';

const propTypes = {
transitionName: nameShape.isRequired,

transitionAppear: PropTypes.bool,
transitionEnter: PropTypes.bool,
transitionLeave: PropTypes.bool,
transitionAppearTimeout: transitionTimeout('Appear'),
transitionEnterTimeout: transitionTimeout('Enter'),
transitionLeaveTimeout: transitionTimeout('Leave'),
};

const defaultProps = {
transitionAppear: false,
transitionEnter: true,
transitionLeave: true,
};

class CSSTransitionGroup extends React.Component {

Expand Down Expand Up @@ -53,7 +37,21 @@ class CSSTransitionGroup extends React.Component {
}
}

CSSTransitionGroup.propTypes = propTypes;
CSSTransitionGroup.defaultProps = defaultProps;
CSSTransitionGroup.propTypes = {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't really like the propTypes defined down here, is the plugin really not smart enough to extract them as they were?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The plugin traverses the AST using the default parser... I think it's Babylon under the hood. It wraps the direct node and can't reverse engineer because it would require to find all references I believe which is very complicated.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its not that complicated, i've written that babel plugin before.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could investigate to see whether uglify will find the dead code and resulting file size is same if you'd prefer to keep these as separate variables?

transitionName: nameShape.isRequired,

transitionAppear: PropTypes.bool,
transitionEnter: PropTypes.bool,
transitionLeave: PropTypes.bool,
transitionAppearTimeout: transitionTimeout('Appear'),
transitionEnterTimeout: transitionTimeout('Enter'),
transitionLeaveTimeout: transitionTimeout('Leave'),
};

CSSTransitionGroup.defaultProps = {
transitionAppear: false,
transitionEnter: true,
transitionLeave: true,
};

export default CSSTransitionGroup;
29 changes: 14 additions & 15 deletions src/CSSTransitionGroupChild.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,6 @@ function addEndListener(node, listener) {
};
}

const propTypes = {
children: PropTypes.node,
name: nameShape.isRequired,

// Once we require timeouts to be specified, we can remove the
// boolean flags (appear etc.) and just accept a number
// or a bool for the timeout flags (appearTimeout etc.)
appear: PropTypes.bool,
enter: PropTypes.bool,
leave: PropTypes.bool,
appearTimeout: PropTypes.number,
enterTimeout: PropTypes.number,
leaveTimeout: PropTypes.number,
};

class CSSTransitionGroupChild extends React.Component {

Expand Down Expand Up @@ -176,6 +162,19 @@ class CSSTransitionGroupChild extends React.Component {
}
}

CSSTransitionGroupChild.propTypes = propTypes;
CSSTransitionGroupChild.propTypes = {
children: PropTypes.node,
name: nameShape.isRequired,

// Once we require timeouts to be specified, we can remove the
// boolean flags (appear etc.) and just accept a number
// or a bool for the timeout flags (appearTimeout etc.)
appear: PropTypes.bool,
enter: PropTypes.bool,
leave: PropTypes.bool,
appearTimeout: PropTypes.number,
enterTimeout: PropTypes.number,
leaveTimeout: PropTypes.number,
};

export default CSSTransitionGroupChild;
24 changes: 10 additions & 14 deletions src/TransitionGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,6 @@ import warning from 'warning';
import { getChildMapping, mergeChildMappings } from './utils/ChildMapping';


const propTypes = {
component: PropTypes.any,
childFactory: PropTypes.func,
children: PropTypes.node,
};

const defaultProps = {
component: 'span',
childFactory: child => child,
};


class TransitionGroup extends React.Component {
static displayName = 'TransitionGroup';

Expand Down Expand Up @@ -243,7 +231,15 @@ class TransitionGroup extends React.Component {
}
}

TransitionGroup.propTypes = propTypes;
TransitionGroup.defaultProps = defaultProps;
TransitionGroup.propTypes = {
component: PropTypes.any,
childFactory: PropTypes.func,
children: PropTypes.node,
};

TransitionGroup.defaultProps = {
component: 'span',
childFactory: child => child,
};

export default TransitionGroup;