5.1.0 • Published 9 years ago

babel-plugin-angular2-annotations v5.1.0

Weekly downloads
1,037
License
ISC
Repository
github
Last release
9 years ago

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

5.1.0

9 years ago

5.0.0

10 years ago

4.0.0

10 years ago

3.1.0

10 years ago

3.0.4

10 years ago

3.0.3

10 years ago

3.0.2

10 years ago

3.0.1

10 years ago

3.0.0

10 years ago

2.0.1

10 years ago

2.0.0

10 years ago

1.1.0

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.2.0

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago