babel-plugin-angular2-annotations
An experimental babel transformer plugin for Angular 2 annotations
Last updated 4 years ago by shuhei .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install babel-plugin-angular2-annotations 
SYNC missed versions from official npm registry.

build status npm version npm downloads

babel-plugin-angular2-annotations

A babel transformer plugin for Angular 2 decorators and type annotations.

Use babel-plugin-transform-decorators-legacy to support decorators.

Make sure to load reflect-metadata for browser in order to polyfill Metadata Reflection API in your app.

Supported decorators/annotations

Even without this plugin (thanks to babel-plugin-transform-decorators-legacy)

  • Class decorators

    @Component({ selector: 'hello' })
    class HelloComponent {}
    
  • Class property decorators with initializers

    @Component({ /* ... */ })
    class HelloComponent {
      @Output() foo = new EventEmitter();`
    }
    

With this plugin

  • Type annotations for constructor parameters

    class Hello {
      constructor(foo: Foo, bar: Bar) {
        this.foo = foo;
        this.bar = bar;
      }
    }
    
    • Generic types are ignored as same as in TypeScript e.g. QueryList<RouterLink> is treated as QueryList
  • Class property decorators with no initializer

    @Component({ /* ... */ })
    class HelloComponent {
      @Input() bar;
    }
    
  • Decorators for constructor parameters

    @Component({ /* ... */ })
    class HelloComponent {
      constructor(@Attribute('name') name, @Optional() optional) {
        this.name = name;
        this.optional = optional;
      }
    }
    

Install

npm install --save-dev babel-plugin-angular2-annotations
npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties babel-plugin-transform-flow-strip-types babel-preset-es2015

.babelrc

{
  "plugins": [
    "angular2-annotations",
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-flow-strip-types"
  ],
  "presets": [
    "es2015"
  ]
}

Example

Before:

class HelloComponent {
  @Input() baz;
  constructor(foo: Foo, @Optional() bar: Bar) {
  }
}

After:

class HelloComponent {
  @Input() baz = this.baz;
}

Optional()(HelloComponent, null, 1);
Reflect.defineMetadata('design:paramtypes', [Foo, Bar]);

See babel-angular2-app or angular2-esnext-starter for more complete example.

License

ISC

Current Tags

  • 5.1.0                                ...           latest (4 years ago)

18 Versions

  • 5.1.0                                ...           4 years ago
  • 5.0.0                                ...           4 years ago
  • 4.0.0                                ...           4 years ago
  • 3.1.0                                ...           4 years ago
  • 3.0.4                                ...           4 years ago
  • 3.0.3                                ...           4 years ago
  • 3.0.2                                ...           4 years ago
  • 3.0.1                                ...           4 years ago
  • 3.0.0                                ...           4 years ago
  • 2.0.1                                ...           4 years ago
  • 2.0.0                                ...           4 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago

Copyright 2014 - 2016 © taobao.org |