My name is pronounced like "shoe hey" ๐ ๐.
shuhei / babel-plugin-angular2-annotations Goto Github PK
View Code? Open in Web Editor NEWA babel transformer plugin for Angular 2 annotations
A babel transformer plugin for Angular 2 annotations
My name is pronounced like "shoe hey" ๐ ๐.
Upgrade angular dependencies from 2.1.1 to latest
hi
Is there a way to use this plugin with webpack ?
best regards
dennis
Hi!
First of all, I just want to say thank you so much for this project. A lot of us want the ES goodness of decorators in Angular 2 without having to jump on the Typescript bandwagon. I was so excited to find your project!
Too bad you had to remove parameter decorators. FYI, not sure you saw but parameter decorators are now a stage 0 proposal with TC39. Maybe it's worth a Ping to the babel folks to see if they'll be willing to support parsing them now?
Hannah
This plugin transforms class properties with no initializer to ones with this.prop
initializers.
Remove it when the PR to the legacy decorators plugin is merged.
I think one of my favorite things in typescript is the ability to do something like:
@Component({ /* ... */ })
class HelloComponent {
constructor(private ngZone: NgZone) { }
}
and ngZone
be on the scope of the HelloComponent
. Any thoughts on this?
Type annotations for constructor parameters don't work because babylon cannot parse them. I get the following error:
SyntaxError: <file name>: Unexpected token, expected ,
This is because of babel/babel#3204.
README should be updated to clarify this change.
Hi,
I am trying to implement
import {Directive, Input, Query, QueryList} from 'angular2/core';
import {RouterLink} from 'angular2/router';
@Directive({
selector: '[linkActive]',
host: {
'[class.router-link-active]': 'isRouteActive'
}
})
export default class LinkActiveDirective {
@Input('linkActive') linkParams: any[];
routerLink: RouterLink;
constructor(@Query(RouterLink) routerLinks: QueryList<RouterLink>) {
routerLinks.changes.subscribe(() => {
this.routerLink = routerLinks.first;
});
}
get isRouteActive() {
return this.routerLink ? this.routerLink.isRouteActive : false;
}
}
without TypeScript. I managed to Constructor Decorators using this plugin but for this directive I get an error:
Uncaught TypeError: assert.genericType is not a function(anonymous function)
this refers to the following code line:
Reflect.defineMetadata('design:paramtypes', [assert.genericType(_core.QueryList, _router.RouterLink)], LinkActiveDirective);
Any idea what is causing this?
Using this plugin, I been getting an error saying that a token has to be defined. I am wondering if there anything to do about it.
As of alpha.22, parameters
class property was split into two metadata, parameters
and design:paramtypes
.
If you see the eslint error, it's caused because babel-eslint doesn't handle parameter decorators properly.
The babel team is going to forbid people from monkey-patching the parser.
@Attribute
: Not so necessary? Can we use @Input
instead of this?@Query
: Replaceable with @ContentChild
and @ContentChildren
?@ViewQuery
: Replaceable with @ViewChild
and @ContentChildren
?@Host
: The host directive's providers http://victorsavkin.com/post/126514197956/dependency-injection-in-angular-1-and-angular-2@Inject
: Probably be necessary for advanced developers?@Optional
: Probably necessary for advanced developers?@Self
: Not so necessary for app developers? The same element's providers http://victorsavkin.com/post/126514197956/dependency-injection-in-angular-1-and-angular-2@SkipSelf
: Not so necessary for app developers?Getting errors compiling when using @Inject
like documented here.
The error is vague but here is the code:
import { Component, Inject } from '@angular/core';
import { adapter } from 'app/adapter.js';
@Component({
selector: 'app',
providers: [ adapter.upgradeNg1Provider('$http') ],
})
export class App {
constructor(element: ElementRef, @Inject('$http') $http) {}
}
and error reads like:
Error: C:/dev/app.js: Unexpected token
my versions are:
"babel-core": "^6.8.0",
"babel-preset-angular2": "0.0.2",
"babel-preset-es2015": "^6.6.0",
"babel-preset-stage-0": "^6.5.0",
with the following babel config:
"babel": {
"sourceMaps": false,
"presets": [
"es2015",
"stage-0",
"angular2"
],
"moduleIds": false,
"comments": true,
"compact": false
}
Any plans to update this for Babel 7?
I forked the demo application and attempted to convert that over to Babel 6 for a good example. You can see the code here: https://github.com/jgodi/babel-angular2-app.
I am running into some issues when trying to build the application:
jgodi:babel-angular2-app jgodi$ gulp build
[08:18:19] Requiring external module babel-core/register
[08:18:19] Using gulpfile ~/github/babel-angular2-app/gulpfile.babel.js
[08:18:19] Starting 'copy'...
[08:18:19] Finished 'copy' after 18 ms
[08:18:19] Starting 'build'...
TypeError in plugin 'browserify'
Message:
/Users/jgodi/github/babel-angular2-app/src/app.js: Cannot convert undefined or null to object while parsing file: /Users/jgodi/github/babel-angular2-app/src/app.js
Details:
_babel: true
filename: /Users/jgodi/github/babel-angular2-app/src/app.js
stream: [object Object]
This is with the following dependencies added/updated:
"babel": "6.3.13",
"babel-core": "6.3.17",
"babel-eslint": "^5.0.0-beta6",
"babel-plugin-angular2-annotations": "^3.0.3",
"babel-plugin-transform-decorators-legacy": "^1.3.3",
"babel-plugin-transform-flow-strip-types": "^6.3.15",
"babel-preset-es2015": "^6.3.13",
"babelify": "^7.2.0",
"babylon": "6.3.20",
and a .babelrc
file that looks like this:
{
"presets": ["es2015"],
"plugins": [
"angular2-annotations",
"transform-decorators-legacy",
"transform-flow-strip-types"
]
}
Any thoughts? If you want you can pull down my fork and see for yourself too. It would be cool to get the sample application updated and running on this, then I will update it to Angular 2 Beta.0.
Thanks!
I just managed to convert all my TS to JS using your plugin, except for one @ViewChild line, which works for TS but seems to fail conversion. Normally this annotation can take either a class or a string parameter, but either seem to fail somehow.
My minimum reproducable case is like this:
import { Component, ViewChild } from 'angular2/core';
@Component({
selector: 'foo',
template: `<p #x>foo</p>`,
})
export class Foo {
@ViewChild('x') comp;
constructor() {}
}
I wonder if something is up on my side, or if something might be up with conversion. Your implementation seems general enough I wouldn't expect it to fail for specific cases like this -- I'm just confused that only this part failed for me. Does it work for you?
Error statement, with plugin info but otherwise non-descriptive:
Module parse failed: ...\node_modules\babel-loader\index.js?{"cacheDirectory":true,"plugins":["syntax-async-functions","transform-regenerator","transform-runtime","add-module-exports","transform-decorators-legacy","angular2-annotations","transform-class-properties","transform-flow-strip-types"],"presets":["es2015","stage-1","stage-0"]}!...\foo.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
|
| import _Object$defineProperty from 'babel-runtime/core-js/object/define-property';
|
| var _dec, _dec2, _class, _desc, _value, _class2, _descriptor;
Hi
I am creating a workflow using jspm 0.15.7, babel 5.4.7 and angular 2 (alpha 27).
I have the class decorators being processed correctly and now I am attempting to get the constructor parameters to be parsed when using angular 2 $Inject in constructor parameter lists.
so I have installed angular2-annotations and type-assertion using
jspm install XXXXXX -save-dev and my config.js looks like
System.config({
"baseURL": "./",
"transpiler": "babel",
"babelOptions": {
"optional": [
"runtime",
"es7.decorators"
],
"plugins": [
"angular2-annotations",
"type-assertion"
]
}, .........
but I am receiving the following error
Potentially unhandled rejection [3] ReferenceError: Error loading "sb/components/app" at http://localhost:3000/sb/components/app.js
Unknown plugin "angular2-annotations"
at PluginManager.subnormaliseString (http://localhost:3000/jspm_packages/npm/[email protected]/browser.js:9222:13)
at PluginManager.add (http://localhost:3000/jspm_packages/npm/[email protected]/browser.js:9259:27)
at File.buildTransformers (http://localhost:3000/jspm_packages/npm/[email protected]/browser.js:8366:21)
at new File (http://localhost:3000/jspm_packages/npm/[email protected]/browser.js:8233:10)
at TransformerPipeline.transform (http://localhost:3000/jspm_packages/npm/[email protected]/browser.js:12103:16)
at x.e (http://localhost:3000/jspm_packages/es6-module-loader.js:7:24001)
at http://localhost:3000/jspm_packages/es6-module-loader.js:7:24475
at O (http://localhost:3000/jspm_packages/es6-module-loader.js:7:7439)
at K (http://localhost:3000/jspm_packages/es6-module-loader.js:7:7071)
at y.7.y.when (http://localhost:3000/jspm_packages/es6-module-loader.js:7:10745)
any advice on how to set up my workflow would be appreciated.
Aidan
Hello @shuhei ,
I have the following code, but http is not recognized inside the constructor, it logs undefined:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { NgRedux } from 'ng2-redux';
import AppStore from 'app/common/components/store/js/store';
@Injectable()
export class UserActions {
constructor (http: Http) {
console.log(http);
}
I want to add that it works really well inside a component. I can't find the reason for that. Do you have any advices?
Many thanks,
Laurentiu
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.