https://github.com/shuhei/babel-plugin-angular2-annotations
A babel transformer plugin for Angular 2 annotations
https://github.com/shuhei/babel-plugin-angular2-annotations
Last synced: about 1 month ago
JSON representation
A babel transformer plugin for Angular 2 annotations
- Host: GitHub
- URL: https://github.com/shuhei/babel-plugin-angular2-annotations
- Owner: shuhei
- Created: 2015-04-05T03:29:43.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-12-31T10:56:15.000Z (almost 9 years ago)
- Last Synced: 2025-01-11T14:44:53.128Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 76.2 KB
- Stars: 80
- Watchers: 7
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular-components - babel-plugin-angular2-annotations - A babel transformer plugin for Angular 2 annotations. (Uncategorized / Uncategorized)
- awesome-angular-components - babel-plugin-angular2-annotations - A babel transformer plugin for Angular 2 annotations. (Uncategorized / Uncategorized)
README
[](https://travis-ci.org/shuhei/babel-plugin-angular2-annotations)
[](https://www.npmjs.org/package/babel-plugin-angular2-annotations)
[](https://www.npmjs.org/package/babel-plugin-angular2-annotations)
# babel-plugin-angular2-annotations
A babel transformer plugin for Angular 2 decorators and type annotations.
Use [babel-plugin-transform-decorators-legacy](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy) to support decorators.
## Supported decorators/annotations
### Even without this plugin (thanks to [babel-plugin-transform-decorators-legacy](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy))
- Class decorators
```js
@Component({ selector: 'hello' })
class HelloComponent {}
```
- Class property decorators with initializers
```js
@Component({ /* ... */ })
class HelloComponent {
@Output() foo = new EventEmitter();
}
```
### With this plugin
- Type annotations for constructor parameters
```js
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` is treated as `QueryList`
- Class property decorators with no initializer
```js
@Component({ /* ... */ })
class HelloComponent {
@Input() bar;
}
```
- Decorators for constructor parameters
```js
@Component({ /* ... */ })
class HelloComponent {
constructor(@Attribute('name') name, @Optional() optional) {
this.name = name;
this.optional = optional;
}
}
```
## Install
```sh
npm install --save-dev babel-plugin-angular2-annotations
```
```sh
npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties babel-plugin-transform-flow-strip-types babel-preset-es2015
```
.babelrc
```json
{
"plugins": [
"angular2-annotations",
"transform-decorators-legacy",
"transform-class-properties",
"transform-flow-strip-types"
],
"presets": [
"es2015"
]
}
```
## Example
Before:
```js
class HelloComponent {
@Input() baz;
constructor(foo: Foo, @Optional() bar: Bar) {
}
}
```
After:
```js
class HelloComponent {
@Input() baz = this.baz;
}
Optional()(HelloComponent, null, 1);
Reflect.defineMetadata('design:paramtypes', [Foo, Bar]);
```
See [babel-angular2-app](https://github.com/shuhei/babel-angular2-app) or [angular2-esnext-starter](https://github.com/blacksonic/angular2-esnext-starter) for more complete example.
## License
[ISC](https://opensource.org/licenses/ISC)