Ember CLI PropTypes

This addon makes the prop-typeslibrary available for React style props validation in your Ember application. Theaddon itself is very simple, it includes:

1. AMD compatible import of prop-types library (prod optimized import weight ofonly 0.12KB gzipped).
2. Ember Component reopen in dev builds to call checkPropTypes, see thecomponent-prop-typesinitializer (Component reopen stripped for production builds).

Props validations and the validators themselves are all provided by theprop-types library.

Install

ember install ember-cli-prop-types

Props Validation

Import PropTypes into your component JS files and define a propTypes property toperform validation on passed props:

// your-component.js
import Component from 'ember-component';
import PropTypes from 'prop-types';

export default Component.extend({
  // Define prop types for your passed properties here
  propTypes: {
    title: PropTypes.string.isRequired,
    pages: PropTypes.number,
    isLatest: PropTypes.bool
  }
});

The prop-types library will validate that any props passed into your componentmatch the type specified in propTypes. See theprop-types Documentation for details ondefining propTypes for your components.

Validating Ember-Specific Classes/Concepts

You can validate the majority of Ember classes or other Ember-specific conceptsvia the instanceOf type checker. We have added specific support for Ember.Arrayand will continue to add support for Ember classes that cannot be validated usingthe library as-is.

import Component from 'ember-component';
import EmberObject from 'ember-object';
import DS from 'ember-data';
import PropTypes from 'prop-types';
const { PromiseArray } = DS;

export default Component.extend({
  propTypes: {
    post: PropTypes.instanceOf(EmberObject),
    relatedPosts: PropTypes.instanceOf(PromiseArray),
    authors: PropTypes.emberArray.isRequired,
    comments: PropTypes.emberArray,
    leaveCommentClosureAction: PropTypes.func
  }
});

Ember-Specific Checkers:

• PropTypes.emberArray

Destructured Imports

Destructuring imports is also supported:

import Component from 'ember-component';
import { string, number, bool, func } from 'prop-types';

export default Component.extend({
  propTypes: {
    title: string.isRequired,
    pages: number,
    isLatest: bool,
    someAction: func
  }
});

Props Default Values

This addon adds the ability to set a default value for passed props through a getDefaultPropsmethod. This method should return an object with the default props values:

import Component from 'ember-component';
import { string, number, bool } from 'prop-types';

export default Component.extend({
  propTypes: {
    title: string.isRequired,
    pages: number,
    isLatest: bool
  },
  getDefaultProps() {
    return {
      title: 'Ambitious Props',
      pages: 1,
      isLatest: false
    };
  }
});

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 whenworking 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 didReceiveAttrsand init lifecycle hooks. Per the Ember.js docs, if you need to define additional behavior inthese hooks you must call this._super(...arguments):

export default Component.extend({
  propTypes: {
    someString: PropTypes.string
  },
  getDefaultProps() {
    return {
      someString: 'Default Value'
    }
  },

  init() {
    this._super(...arguments);
    // your component code
  },
  didReceiveAttrs() {
    this._super(...arguments);
    // your component code
  }
})

In Production

Although props validation is only run in development builds, this addon must beincluded for production builds as well. During production builds the prop-typeslibrary is not imported. Instead a set of shims is imported for the props validatorsso that the import statements do not throw errors. Prod weight for the addon is0.29 KB (0.12 KB gzipped).

The call to PropTypes.checkPropTypes is automatically stripped in production buildsas well using UglifyJS's compress configurations. If you would like to disable thisadditional stripping you can configure the addon to skip it in yourember-cli-build.js configs (Note that even if you disable the code stripping propsvalidations will still only be run in dev builds).

The getDefaultProps method is run during component init in production builds. Ifyou would prefer not to enable this method, you can configure the addon to strip itout:

// ember-cli-build.js
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    emberCliPropTypes: {
      compress: false, // Setting to false will disable code stripping
      getDefaultProps: false // Setting to false will strip `getDefaultProps` feature
    }
  });

  return app.toTree();
};

Contributing

If you'd like to contribute, please read our contributionguidelines and then get cracking!

Please report bugs using the issues tab.