mhegazy
commented
9 years ago //cc:@billti @billti is looking into the extensiblity portion, so i will let him comment on that. one thing to note, the connection should go both ways. i.e. the template LS worker needs to know about the TS files, but the TS LS worker needs to know about it also to be able to handle things like rename, and find all references.
for your other question about extracting decorator information, here is a sample:
function visit(sourceFile: ts.SourceFile) {
visitNode(sourceFile);
function visitNode(node: ts.Node) {
if (node.kind === ts.SyntaxKind.ClassDeclaration) {
// only look in classes
if (node.decorators) {
node.decorators.forEach(decorator => {
if (decorator.expression.kind === ts.SyntaxKind.CallExpression) {
// decorators of the form doc({...})
let callExpression = <ts.CallExpression>decorator.expression;
if (callExpression.expression.getFullText() === "Component") {
// found a component
if (callExpression.arguments && callExpression.arguments.length >= 1) {
let firstArg = callExpression.arguments[0];
if (firstArg.kind === ts.SyntaxKind.ObjectLiteralExpression) {
let object = <ts.ObjectLiteralExpression>firstArg;
object.properties.forEach(p => {
if (p.kind === ts.SyntaxKind.PropertyAssignment) {
// key is selector
if ((<ts.PropertyAssignment>p).name.getText() === "selector") {
// found it!
console.log((<ts.PropertyAssignment>p).initializer.getText());
}
}
});
}
}
}
}
});
}
}
ts.forEachChild(node, visitNode);
}
}
// Parse
let sourceFile = ts.createSourceFile("test.ts", `
import {Component} from 'angular2/angular2';
@Component({
selector: 'my-app'
})
class AppComponent { }
`, ts.ScriptTarget.ES6, /*setParentNodes */ true);
visit(sourceFile);
angelozerr
billti
mihailik
At first I explain you what I would like to do with tsserver. @dbaeumer I think you could be interested with this issue for VSCode and Angular2 support.
Take the sample https://angular.io/docs/ts/latest/quickstart.html with Angular2 & TypeScript. There is a ts file:
And the HTML:
The HTML contains
<my-app>which is binded with decorator @Component/selector property. My goal is to provide completion, navigation inside HTML (Eclipse) editor for<my-app>. In other words, I need to collect the whole @Component/selector node of the project to use it in a HTML editor. I tell me how I could do that:With ternjs it's possible to write a tern plugin which is able to do that (collect @Component/selector) because:
tsserver could do the same thing by searching inside node_modules with a pattern name like
tsserver-xxxxto provide a custom command. After that any editor will be able to consume it just by installing with `npm installl tsserver-angular2'Hope you will understand my issue.