babel-plugin-transform-decorators-legacy
A plugin for Babel 6 that (mostly) replicates the old decorator behavior from Babel 5.
Last updated a year ago by loganfsmyth .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install babel-plugin-transform-decorators-legacy 
SYNC missed versions from official npm registry.

Babel Legacy Decorator plugin

This is a plugin for Babel 6 that is meant to replicate the old decorator behavior from Babel 5 in order to allow people to more easily transition to Babel 6 without needing to be blocked on updates to the decorator proposal or for Babel to re-implement it.

Babel >= 7.x

This plugin is specifically for Babel 6.x. If you're using Babel 7, this plugin is not for you. Babel 7's @babel/plugin-proposal-decorators officially supports the same logic that this plugin has, but integrates better with Babel 7's other plugins. You can enable this with

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ]
}

in your Babel configuration. Note that legacy: true is specifically needed if you want to get the same behavior as transform-decorators-legacy because there are newer versions of the decorator specification coming out, and they do not behave the same way as this plugin does.

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"
]

Why "legacy"?

Decorators are still only a relatively new proposal, and they are (at least currently) still in flux. Many people have started to use them in their original form, where each decorator is essentially a function of the form

function(target, property, descriptor){}

This form is very likely to change moving forward, and Babel 6 did not wish to support the older form when it was known that it would change in the future. As such, I created this plugin to help people transition to Babel 6 without requiring them to drop their decorators or requiring them to wait for the new proposal update and then update all their code.

Best Effort

This plugin is a best effort to be compatible with Babel 5's transpiler output, but there are a few things that were difficult to reproduce, and a few things that were simply incorrect in Babel 5 with respect to the decorators proposal.

Two main things to mention as differences, though not things you are likely to encounter:

  1. Decorators expressions are evaluated top to bottom, and executed bottom to top. e.g.

    function dec(id){
        console.log('evaluated', id);
        return (target, property, descriptor) => console.log('executed', id);
    }
    
    class Example {
        @dec(1)
        @dec(2)
        method(){}
    }
    

    In Babel 5, this would output:

    evaluated 2
    evaluated 1
    executed 2
    executed 1
    

    With this plugin, it will result in:

    evaluated 1
    evaluated 2
    executed 2
    executed 1
    

    which is what the spec dictates as the correct behavior and was incorrect in Babel 5.

  2. Static class property initializers are evaluated once up front.

    If you decorate a static class property, you will get a descriptor with an initializer property. However whereas with Babel 5 this could be re-executed multiple times with potentially differing results, decorators-legacy will precompute the value and return an initializer that will return that value. e.g.

    function dec(target, prop, descriptor){
        let {initializer} = descriptor;
        delete descriptor.initializer;
        delete descriptor.writable;
    
        descriptor.get = function(){
            return initializer.call(this);
        };
    }
    
    var i = 0;
    
    class Example {
        @dec
        static prop = i++;
    }
    

    In Babel 5, every access to prop would increment i. In Babel 6, the very first value of i will be cached for future initializer calls.

    The spec is a little vague around how initializers work for repeat calls, and I'd consider calling an initializer multiple times to be a mistake in general, so hopefully this will not cause anyone trouble.

License

MIT (c) 2015

Current Tags

  • 1.3.5                                ...           latest (a year ago)

10 Versions

  • 1.3.5                                ...           a year ago
  • 1.3.4                                ...           3 years ago
  • 1.3.3                                ...           3 years ago
  • 1.3.2                                ...           3 years ago
  • 1.3.1                                ...           3 years ago
  • 1.3.0                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.0.0                                ...           3 years ago
Maintainers (2)
Downloads
Today 50
This Week 12,125
This Month 36,234
Last Day 579
Last Week 13,475
Last Month 55,154
Dependencies (3)
Dev Dependencies (6)
Dependents (1814)

Copyright 2014 - 2016 © taobao.org |