strip proptypes in production build (fixes #1882)

package.json

@@ -58,6 +58,7 @@
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-commonjs": "^8.2.0",
     "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^2.0.1",
     "sinon": "^3.2.1",
     "style-loader": "^0.18.2",

rollup.config.js

@@ -1,6 +1,7 @@
 import babel from 'rollup-plugin-babel';
 import resolve from 'rollup-plugin-node-resolve';
 import uglify from 'rollup-plugin-uglify';
+import replace from 'rollup-plugin-replace';
 import { minify } from 'uglify-es';
 
 const name = 'Select';
@@ -27,7 +28,7 @@ export default [
 			format: 'es',
 		},
 		external: external,
-		plugins: [babel(babelOptions)],
+		plugins: [babel(babelOptions), replace({'process.env.NODE_ENV': '"development"'})],
 	},
 	{
 		input: 'src/index.umd.js',
@@ -38,7 +39,7 @@ export default [
 		},
 		globals: globals,
 		external: external,
-		plugins: [babel(babelOptions), resolve()],
+		plugins: [babel(babelOptions), resolve(), replace({'process.env.NODE_ENV': '"development"'})],
 	},
 	{
 		input: 'src/index.umd.js',
@@ -49,6 +50,6 @@ export default [
 		},
 		globals: globals,
 		external: external,
-		plugins: [babel(babelOptions), resolve(), uglify({}, minify)],
+		plugins: [babel(babelOptions), resolve(), replace({'process.env.NODE_ENV': '"production"'}), uglify({}, minify)],
 	},
 ];

src/Async.js

@@ -192,8 +192,10 @@ export default class Async extends Component {
 		});
 	}
 }
+if (process.env.NODE_ENV !== 'production'){
+	Async.propTypes = propTypes;
+}
 
-Async.propTypes = propTypes;
 Async.defaultProps = defaultProps;
 
 function defaultChildren (props) {

src/Creatable.js

@@ -248,50 +248,51 @@ CreatableSelect.defaultProps = {
 	shouldKeyDownEventCreateNewOption
 };
 
-CreatableSelect.propTypes = {
-	// Child function responsible for creating the inner Select component
-	// This component can be used to compose HOCs (eg Creatable and Async)
-	// (props: Object): PropTypes.element
-	children: PropTypes.func,
+if (process.env.NODE_ENV !== 'production'){
+	CreatableSelect.propTypes = {
+		// Child function responsible for creating the inner Select component
+		// This component can be used to compose HOCs (eg Creatable and Async)
+		// (props: Object): PropTypes.element
+		children: PropTypes.func,
 
-	// See Select.propTypes.filterOptions
-	filterOptions: PropTypes.any,
+		// See Select.propTypes.filterOptions
+		filterOptions: PropTypes.any,
 
-	// Searches for any matching option within the set of options.
-	// This function prevents duplicate options from being created.
-	// ({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean
-	isOptionUnique: PropTypes.func,
+		// Searches for any matching option within the set of options.
+		// This function prevents duplicate options from being created.
+		// ({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean
+		isOptionUnique: PropTypes.func,
 
-	// Determines if the current input text represents a valid option.
-	// ({ label: string }): boolean
-	isValidNewOption: PropTypes.func,
+		// Determines if the current input text represents a valid option.
+		// ({ label: string }): boolean
+		isValidNewOption: PropTypes.func,
 
-	// See Select.propTypes.menuRenderer
-	menuRenderer: PropTypes.any,
+		// See Select.propTypes.menuRenderer
+		menuRenderer: PropTypes.any,
 
 		// Factory to create new option.
 		// ({ label: string, labelKey: string, valueKey: string }): Object
-	newOptionCreator: PropTypes.func,
+		newOptionCreator: PropTypes.func,
 
-	// input change handler: function (inputValue) {}
-	onInputChange: PropTypes.func,
+		// input change handler: function (inputValue) {}
+		onInputChange: PropTypes.func,
 
-	// input keyDown handler: function (event) {}
-	onInputKeyDown: PropTypes.func,
+		// input keyDown handler: function (event) {}
+		onInputKeyDown: PropTypes.func,
 
-	// new option click handler: function (option) {}
-	onNewOptionClick: PropTypes.func,
+		// new option click handler: function (option) {}
+		onNewOptionClick: PropTypes.func,
 
-	// See Select.propTypes.options
-	options: PropTypes.array,
+		// See Select.propTypes.options
+		options: PropTypes.array,
 
 		// Creates prompt/placeholder option text.
 		// (filterText: string): string
-	promptTextCreator: PropTypes.func,
-
-	// Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option.
-	shouldKeyDownEventCreateNewOption: PropTypes.func,
-};
+		promptTextCreator: PropTypes.func,
 
+		// Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option.
+		shouldKeyDownEventCreateNewOption: PropTypes.func,
+	};
+}
 
 export default CreatableSelect;

src/Option.js

@@ -95,19 +95,20 @@ class Option extends React.Component {
 		);
 	}
 };
-
-Option.propTypes = {
-	children: PropTypes.node,
-	className: PropTypes.string,             // className (based on mouse position)
-	instancePrefix: PropTypes.string.isRequired,  // unique prefix for the ids (used for aria)
-	isDisabled: PropTypes.bool,              // the option is disabled
-	isFocused: PropTypes.bool,               // the option is focused
-	isSelected: PropTypes.bool,              // the option is selected
-	onFocus: PropTypes.func,                 // method to handle mouseEnter on option element
-	onSelect: PropTypes.func,                // method to handle click on option element
-	onUnfocus: PropTypes.func,               // method to handle mouseLeave on option element
-	option: PropTypes.object.isRequired,     // object that is base for that option
-	optionIndex: PropTypes.number,           // index of the option, used to generate unique ids for aria
-};
+if (process.env.NODE_ENV !== 'production'){
+	Option.propTypes = {
+		children: PropTypes.node,
+		className: PropTypes.string,             // className (based on mouse position)
+		instancePrefix: PropTypes.string.isRequired,  // unique prefix for the ids (used for aria)
+		isDisabled: PropTypes.bool,              // the option is disabled
+		isFocused: PropTypes.bool,               // the option is focused
+		isSelected: PropTypes.bool,              // the option is selected
+		onFocus: PropTypes.func,                 // method to handle mouseEnter on option element
+		onSelect: PropTypes.func,                // method to handle click on option element
+		onUnfocus: PropTypes.func,               // method to handle mouseLeave on option element
+		option: PropTypes.object.isRequired,     // object that is base for that option
+		optionIndex: PropTypes.number,           // index of the option, used to generate unique ids for aria
+	};
+}
 
 export default Option;

src/Select.js

@@ -1043,81 +1043,82 @@ class Select extends React.Component {
 	}
 };
 
-Select.propTypes = {
-	'aria-describedby': PropTypes.string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech)
-	'aria-label': PropTypes.string,       // Aria label (for assistive tech)
-	'aria-labelledby': PropTypes.string,  // HTML ID of an element that should be used as the label (for assistive tech)
-	addLabelText: PropTypes.string,       // placeholder displayed when you want to add a label on a multi-value input
-	arrowRenderer: PropTypes.func,        // Create drop-down caret element
-	autoBlur: PropTypes.bool,             // automatically blur the component when an option is selected
-	autofocus: PropTypes.bool,            // autofocus the component on mount
-	autosize: PropTypes.bool,             // whether to enable autosizing or not
-	backspaceRemoves: PropTypes.bool,     // whether backspace removes an item if there is no text input
-	backspaceToRemoveMessage: PropTypes.string,  // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label
-	className: PropTypes.string,          // className for the outer element
-	clearAllText: stringOrNode,           // title for the "clear" control when multi: true
-	clearRenderer: PropTypes.func,        // create clearable x element
-	clearValueText: stringOrNode,         // title for the "clear" control
-	clearable: PropTypes.bool,            // should it be possible to reset value
-	closeOnSelect: PropTypes.bool,        // whether to close the menu when a value is selected
-	deleteRemoves: PropTypes.bool,        // whether backspace removes an item if there is no text input
-	delimiter: PropTypes.string,          // delimiter to use to join multiple values for the hidden field value
-	disabled: PropTypes.bool,             // whether the Select is disabled or not
-	escapeClearsValue: PropTypes.bool,    // whether escape clears the value when the menu is closed
-	filterOption: PropTypes.func,         // method to filter a single option (option, filterString)
-	filterOptions: PropTypes.any,         // boolean to enable default filtering or function to filter the options array ([options], filterString, [values])
-	ignoreAccents: PropTypes.bool,        // whether to strip diacritics when filtering
-	ignoreCase: PropTypes.bool,           // whether to perform case-insensitive filtering
-	inputProps: PropTypes.object,         // custom attributes for the Input
-	inputRenderer: PropTypes.func,        // returns a custom input component
-	instanceId: PropTypes.string,         // set the components instanceId
-	isLoading: PropTypes.bool,            // whether the Select is loading externally or not (such as options being loaded)
-	joinValues: PropTypes.bool,           // joins multiple values into a single form field with the delimiter (legacy mode)
-	labelKey: PropTypes.string,           // path of the label value in option objects
-	matchPos: PropTypes.string,           // (any|start) match the start or entire string when filtering
-	matchProp: PropTypes.string,          // (any|label|value) which option property to filter on
-	menuBuffer: PropTypes.number,         // optional buffer (in px) between the bottom of the viewport and the bottom of the menu
-	menuContainerStyle: PropTypes.object, // optional style to apply to the menu container
-	menuRenderer: PropTypes.func,         // renders a custom menu with options
-	menuStyle: PropTypes.object,          // optional style to apply to the menu
-	multi: PropTypes.bool,                // multi-value input
-	name: PropTypes.string,               // generates a hidden <input /> tag with this field name for html forms
-	noResultsText: stringOrNode,          // placeholder displayed when there are no matching search results
-	onBlur: PropTypes.func,               // onBlur handler: function (event) {}
-	onBlurResetsInput: PropTypes.bool,    // whether input is cleared on blur
-	onChange: PropTypes.func,             // onChange handler: function (newValue) {}
-	onClose: PropTypes.func,              // fires when the menu is closed
-	onCloseResetsInput: PropTypes.bool,   // whether input is cleared when menu is closed through the arrow
-	onFocus: PropTypes.func,              // onFocus handler: function (event) {}
-	onInputChange: PropTypes.func,        // onInputChange handler: function (inputValue) {}
-	onInputKeyDown: PropTypes.func,       // input keyDown handler: function (event) {}
-	onMenuScrollToBottom: PropTypes.func, // fires when the menu is scrolled to the bottom; can be used to paginate options
-	onOpen: PropTypes.func,               // fires when the menu is opened
-	onSelectResetsInput: PropTypes.bool,  // whether input is cleared on select (works only for multiselect)
-	onValueClick: PropTypes.func,         // onClick handler for value labels: function (value, event) {}
-	openOnClick: PropTypes.bool,          // boolean to control opening the menu when the control is clicked
-	openOnFocus: PropTypes.bool,          // always open options menu on focus
-	optionClassName: PropTypes.string,    // additional class(es) to apply to the <Option /> elements
-	optionComponent: PropTypes.func,      // option component to render in dropdown
-	optionRenderer: PropTypes.func,       // optionRenderer: function (option) {}
-	options: PropTypes.array,             // array of options
-	pageSize: PropTypes.number,           // number of entries to page when using page up/down keys
-	placeholder: stringOrNode,            // field placeholder, displayed when there's no value
-	required: PropTypes.bool,             // applies HTML5 required attribute when needed
-	resetValue: PropTypes.any,            // value to use when you clear the control
-	scrollMenuIntoView: PropTypes.bool,   // boolean to enable the viewport to shift so that the full menu fully visible when engaged
-	searchable: PropTypes.bool,           // whether to enable searching feature or not
-	simpleValue: PropTypes.bool,          // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
-	style: PropTypes.object,              // optional style to apply to the control
-	tabIndex: PropTypes.string,           // optional tab index of the control
-	tabSelectsValue: PropTypes.bool,      // whether to treat tabbing out while focused to be value selection
-	value: PropTypes.any,                 // initial field value
-	valueComponent: PropTypes.func,       // value component to render
-	valueKey: PropTypes.string,           // path of the label value in option objects
-	valueRenderer: PropTypes.func,        // valueRenderer: function (option) {}
-	wrapperStyle: PropTypes.object,       // optional style to apply to the component wrapper
-};
-
+if (process.env.NODE_ENV !== 'production'){
+	Select.propTypes = {
+		'aria-describedby': PropTypes.string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech)
+		'aria-label': PropTypes.string,       // Aria label (for assistive tech)
+		'aria-labelledby': PropTypes.string,  // HTML ID of an element that should be used as the label (for assistive tech)
+		addLabelText: PropTypes.string,       // placeholder displayed when you want to add a label on a multi-value input
+		arrowRenderer: PropTypes.func,        // Create drop-down caret element
+		autoBlur: PropTypes.bool,             // automatically blur the component when an option is selected
+		autofocus: PropTypes.bool,            // autofocus the component on mount
+		autosize: PropTypes.bool,             // whether to enable autosizing or not
+		backspaceRemoves: PropTypes.bool,     // whether backspace removes an item if there is no text input
+		backspaceToRemoveMessage: PropTypes.string,  // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label
+		className: PropTypes.string,          // className for the outer element
+		clearAllText: stringOrNode,           // title for the "clear" control when multi: true
+		clearRenderer: PropTypes.func,        // create clearable x element
+		clearValueText: stringOrNode,         // title for the "clear" control
+		clearable: PropTypes.bool,            // should it be possible to reset value
+		closeOnSelect: PropTypes.bool,        // whether to close the menu when a value is selected
+		deleteRemoves: PropTypes.bool,        // whether backspace removes an item if there is no text input
+		delimiter: PropTypes.string,          // delimiter to use to join multiple values for the hidden field value
+		disabled: PropTypes.bool,             // whether the Select is disabled or not
+		escapeClearsValue: PropTypes.bool,    // whether escape clears the value when the menu is closed
+		filterOption: PropTypes.func,         // method to filter a single option (option, filterString)
+		filterOptions: PropTypes.any,         // boolean to enable default filtering or function to filter the options array ([options], filterString, [values])
+		ignoreAccents: PropTypes.bool,        // whether to strip diacritics when filtering
+		ignoreCase: PropTypes.bool,           // whether to perform case-insensitive filtering
+		inputProps: PropTypes.object,         // custom attributes for the Input
+		inputRenderer: PropTypes.func,        // returns a custom input component
+		instanceId: PropTypes.string,         // set the components instanceId
+		isLoading: PropTypes.bool,            // whether the Select is loading externally or not (such as options being loaded)
+		joinValues: PropTypes.bool,           // joins multiple values into a single form field with the delimiter (legacy mode)
+		labelKey: PropTypes.string,           // path of the label value in option objects
+		matchPos: PropTypes.string,           // (any|start) match the start or entire string when filtering
+		matchProp: PropTypes.string,          // (any|label|value) which option property to filter on
+		menuBuffer: PropTypes.number,         // optional buffer (in px) between the bottom of the viewport and the bottom of the menu
+		menuContainerStyle: PropTypes.object, // optional style to apply to the menu container
+		menuRenderer: PropTypes.func,         // renders a custom menu with options
+		menuStyle: PropTypes.object,          // optional style to apply to the menu
+		multi: PropTypes.bool,                // multi-value input
+		name: PropTypes.string,               // generates a hidden <input /> tag with this field name for html forms
+		noResultsText: stringOrNode,          // placeholder displayed when there are no matching search results
+		onBlur: PropTypes.func,               // onBlur handler: function (event) {}
+		onBlurResetsInput: PropTypes.bool,    // whether input is cleared on blur
+		onChange: PropTypes.func,             // onChange handler: function (newValue) {}
+		onClose: PropTypes.func,              // fires when the menu is closed
+		onCloseResetsInput: PropTypes.bool,   // whether input is cleared when menu is closed through the arrow
+		onFocus: PropTypes.func,              // onFocus handler: function (event) {}
+		onInputChange: PropTypes.func,        // onInputChange handler: function (inputValue) {}
+		onInputKeyDown: PropTypes.func,       // input keyDown handler: function (event) {}
+		onMenuScrollToBottom: PropTypes.func, // fires when the menu is scrolled to the bottom; can be used to paginate options
+		onOpen: PropTypes.func,               // fires when the menu is opened
+		onSelectResetsInput: PropTypes.bool,  // whether input is cleared on select (works only for multiselect)
+		onValueClick: PropTypes.func,         // onClick handler for value labels: function (value, event) {}
+		openOnClick: PropTypes.bool,          // boolean to control opening the menu when the control is clicked
+		openOnFocus: PropTypes.bool,          // always open options menu on focus
+		optionClassName: PropTypes.string,    // additional class(es) to apply to the <Option /> elements
+		optionComponent: PropTypes.func,      // option component to render in dropdown
+		optionRenderer: PropTypes.func,       // optionRenderer: function (option) {}
+		options: PropTypes.array,             // array of options
+		pageSize: PropTypes.number,           // number of entries to page when using page up/down keys
+		placeholder: stringOrNode,            // field placeholder, displayed when there's no value
+		required: PropTypes.bool,             // applies HTML5 required attribute when needed
+		resetValue: PropTypes.any,            // value to use when you clear the control
+		scrollMenuIntoView: PropTypes.bool,   // boolean to enable the viewport to shift so that the full menu fully visible when engaged
+		searchable: PropTypes.bool,           // whether to enable searching feature or not
+		simpleValue: PropTypes.bool,          // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
+		style: PropTypes.object,              // optional style to apply to the control
+		tabIndex: PropTypes.string,           // optional tab index of the control
+		tabSelectsValue: PropTypes.bool,      // whether to treat tabbing out while focused to be value selection
+		value: PropTypes.any,                 // initial field value
+		valueComponent: PropTypes.func,       // value component to render
+		valueKey: PropTypes.string,           // path of the label value in option objects
+		valueRenderer: PropTypes.func,        // valueRenderer: function (option) {}
+		wrapperStyle: PropTypes.object,       // optional style to apply to the component wrapper
+	};
+}
 Select.defaultProps = {
 	addLabelText: 'Add "{label}"?',
 	arrowRenderer: defaultArrowRenderer,