Ember CLI PropTypes
This addon makes the prop-types library available for React style props validation in your Ember application. The addon itself is very simple, it includes:
- AMD compatible import of
prop-types
library (prod optimized import weight of only 0.12KB gzipped). - Ember
Component
reopen in dev builds to callcheckPropTypes
, see the component-prop-types initializer (Component reopen stripped for production builds).
Props validations and the validators themselves are all provided by the prop-types library.
Install
ember install ember-cli-prop-types
Props Validation
Import PropTypes
into your component JS files and define a propTypes
property to
perform validation on passed props:
// your-component.js;; ;
The prop-types
library will validate that any props passed into your component
match the type specified in propTypes
. See the
prop-types Documentation for details on
defining propTypes
for your components.
Validating Ember-Specific Classes/Concepts
You can validate the majority of Ember classes or other Ember-specific concepts
via the instanceOf
type checker. We have added specific support for Ember.Array
and will continue to add support for Ember classes that cannot be validated using
the library as-is.
;;;;const PromiseArray = DS; ;
Ember-Specific Checkers:
PropTypes.emberArray
Destructured Imports
Destructuring imports is also supported:
;; ;
Props Default Values
This addon adds the ability to set a default value for passed props through a getDefaultProps
method. This method should return an object with the default props values:
;; ;
During component initialization, if a prop with a configured default is undefined
,
it will be set to the returned default value. This can be especially helpful when
working with dynamic values or the component helper.
The getDefaultProps
method is run during production builds.
Lifecycle Hook Super Calls
This addon calls props validation and default value assignments in the didReceiveAttrs
and init
lifecycle hooks. Per the Ember.js docs, if you need to define additional behavior in
these hooks you must call this._super(...arguments)
:
In Production
Although props validation is only run in development builds, this addon must be
included for production builds as well. During production builds the prop-types
library is not imported. Instead a set of shims is imported for the props validators
so that the import
statements do not throw errors. Prod weight for the addon is
0.29 KB (0.12 KB gzipped).
The call to PropTypes.checkPropTypes
is automatically stripped in production builds
as well using UglifyJS's compress
configurations. If you would like to disable this
additional stripping you can configure the addon to skip it in your
ember-cli-build.js
configs (Note that even if you disable the code stripping props
validations will still only be run in dev builds).
The getDefaultProps
method is run during component init
in production builds. If
you would prefer not to enable this method, you can configure the addon to strip it
out:
// ember-cli-build.jsmodule { let app = defaults emberCliPropTypes: compress: false // Setting to false will disable code stripping getDefaultProps: false // Setting to false will strip `getDefaultProps` feature ; return app;};
Contributing
If you'd like to contribute, please read our contribution guidelines and then get cracking!