Introduction.md

Introduction

As we said in README file, in order to use react-decoration you have to use babel 5 or this plugin for babel 6. This allows you to compile decorators in the right way, so you can use them. Note that this is not an official babel plugin but, as we can see here this is the only way to parse decorators at the moment:

Decorators are disabled in Babel v6, pending a proposal update – see babel/babel#2645.

Until Babel officially supports decorators again, you might want to try the third-party transform-decorators-legacy plugin, or use Babel v5.

Here is a quick installation guide from transform-decorators-legacy:

Installation & Usage

npm install --save-dev babel-plugin-transform-decorators-legacy

Add the following line to your .babelrc file:

{
  "plugins": ["transform-decorators-legacy"]
}

NOTE: Order of Plugins Matters!

If you are including your plugins manually and using transform-class-properties, make sure that transform-decorators-legacy comes before transform-class-properties.

/// WRONG

"plugins": [
  "transform-class-properties",
  "transform-decorators-legacy"
]

// RIGHT

"plugins": [
  "transform-decorators-legacy",
  "transform-class-properties"
]

Subsequently to this, you should read this specification. In this way you will be able to avoid a series of problems that can take a lot of time to resolve.

Please note that react-decoration does not include polyfill, so, if you want to support old browsers, you have to emulate Object.setPrototypeOf and Object.assign.

Consider also that decorators can be imported in 2 different ways:

// from the default object
import { throttle } from 'react-decoration';
// or directly from the single file: react-decoration/lib/decorators/{namespace}/{decorator}
import throttle from 'react-decoration/lib/decorators/functions/throttle';

Importing each decorator from its file is suggested, importing a single decorator from react-decoration, infact, causes the import of all modules, that increase the bundle size.