{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/7482","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/7482/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/7482/comments","events_url":"https://api.github.com/repos/angular/angular/issues/7482/events","html_url":"https://github.com/angular/angular/issues/7482","id":139183385,"number":7482,"title":"Tracking: Language services provide intellisense for Angular 2 templates","user":{"login":"mhevery","id":111951,"avatar_url":"https://avatars.githubusercontent.com/u/111951?v=3","gravatar_id":"","url":"https://api.github.com/users/mhevery","html_url":"https://github.com/mhevery","followers_url":"https://api.github.com/users/mhevery/followers","following_url":"https://api.github.com/users/mhevery/following{/other_user}","gists_url":"https://api.github.com/users/mhevery/gists{/gist_id}","starred_url":"https://api.github.com/users/mhevery/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mhevery/subscriptions","organizations_url":"https://api.github.com/users/mhevery/orgs","repos_url":"https://api.github.com/users/mhevery/repos","events_url":"https://api.github.com/users/mhevery/events{/privacy}","received_events_url":"https://api.github.com/users/mhevery/received_events","type":"User","site_admin":false},"labels":[{"id":346386781,"url":"https://api.github.com/repos/angular/angular/labels/hotlist:%20angular-core-team","name":"hotlist: angular-core-team","color":"d4c5f9","default":false}],"state":"open","locked":false,"assignee":{"login":"chuckjaz","id":372013,"avatar_url":"https://avatars.githubusercontent.com/u/372013?v=3","gravatar_id":"","url":"https://api.github.com/users/chuckjaz","html_url":"https://github.com/chuckjaz","followers_url":"https://api.github.com/users/chuckjaz/followers","following_url":"https://api.github.com/users/chuckjaz/following{/other_user}","gists_url":"https://api.github.com/users/chuckjaz/gists{/gist_id}","starred_url":"https://api.github.com/users/chuckjaz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chuckjaz/subscriptions","organizations_url":"https://api.github.com/users/chuckjaz/orgs","repos_url":"https://api.github.com/users/chuckjaz/repos","events_url":"https://api.github.com/users/chuckjaz/events{/privacy}","received_events_url":"https://api.github.com/users/chuckjaz/received_events","type":"User","site_admin":false},"assignees":[{"login":"chuckjaz","id":372013,"avatar_url":"https://avatars.githubusercontent.com/u/372013?v=3","gravatar_id":"","url":"https://api.github.com/users/chuckjaz","html_url":"https://github.com/chuckjaz","followers_url":"https://api.github.com/users/chuckjaz/followers","following_url":"https://api.github.com/users/chuckjaz/following{/other_user}","gists_url":"https://api.github.com/users/chuckjaz/gists{/gist_id}","starred_url":"https://api.github.com/users/chuckjaz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chuckjaz/subscriptions","organizations_url":"https://api.github.com/users/chuckjaz/orgs","repos_url":"https://api.github.com/users/chuckjaz/repos","events_url":"https://api.github.com/users/chuckjaz/events{/privacy}","received_events_url":"https://api.github.com/users/chuckjaz/received_events","type":"User","site_admin":false}],"milestone":null,"comments":14,"created_at":"2016-03-08T05:10:25Z","updated_at":"2016-11-16T12:25:57Z","closed_at":null,"body":"We plan to use the extension API tracked by [TypeScript issue #6508](https://github.com/microsoft/typescript/issues/6508) to provide language services inside template strings of a `@Component` decorator as well as reuse these services in loose HTML files.\n## Features\n\nThe features we plan to support are,\n- Syntax and semantic code highlighting\n- Syntactic and semantic error reporting\n- Completion lists for HTML built-in elements and referenced directives\n- Completion list for data-binding expression\n- Parameter lists for data-binding function calls\n- Go-to definition on attributes, elements and binding expressions\n\nA prototype of these features was already implemented by Microsoft as part of the work to validate the [their extensibility](https://github.com/microsoft/typescript/issues/6508) and the referenced issue has an animated GIF that shows the prototype in action.\n\nThis work is to use the Angular 2's template parser, instead of a custom parser, as well as using the Angular 2 offline-compiler metadata to describe the components allowing libraries (such as Material) to be self-describing.\n\nAdditional features (probably post-final):\n- Source formatting and indentation support\n- Rename of directive and attributes\n- Quick fix to add missing directives `Component` decorator\n## Editor support\n\nEditors that support configuring TypeScript extensions will be able to use the Angular 2 extensions for template strings with no additional changes.\n\nEditors will need to be modified to integrate the Angular 2 language service for loose HTML files similar to how TypeScript is integrated for use in .ts, .d.ts and .tsx.\n\nThis work will extend the TypeScript node server and VS Code to support both the Angular 2 extension and loose HTML files. \n## Milestones\n### Initial release\n#### Extending TypeScript\n\n**Tasks**:\n- [ ] Contribute to [TS#6508](https://github.com/microsoft/typescript/issues/6508) to help it land in TypeScript.\n- [x] Modify `tsserver` to load _TypeScript Extensions_. (see https://github.com/Microsoft/TypeScript/pull/9038)\n- [x] Contribute to VS Code to enable it to load _TypeScript Extensions_. (https://github.com/Microsoft/TypeScript/pull/9038, no VS Code changes needed)\n- [ ] Assist other editors in supporting _TypeScript Extensions_ in general and Angular 2's extension in particular.\n\n**Problem**: Angular 2 templates can be specified using a string literal or string template inside a TypeScript file. Providing language services for these strings requires TypeScript's language service to delegate calls to `LanguageService` to the Angular 2 language service.\n\n**Soltuion**: Use the proposed extensibility interface provided by [TypeScript](https://github.com/microsoft/typescript/issues/6508). Help evangelize the extension API to editors that support TypeScript.\n#### Syntax Highlighting\n\n**Tasks**:\n- [ ] <s>Augment the result of `getEncodedSemanticClassifications` with Angular 2 classifications using `HtmlLexer`.</s> Using .tmLanguage instead.\n\n**Problem**: Produce `ClassifiedSpan[]` for ranges that intersect with a Angular 2 template. This requires determining if the span is in a template string which itself requires a semantic analysis of the TypeScript module to determine if the string is in a `@Component` decorator.\n\n**Solution**: Only return Angular 2 syntactic classification in `getEncodedSemanticClassifications` because the semantic analysis of the TypeScript module is already available. To produce the spans, scan the `ClassifiedSpan`s returned by TypeScript and determine if any strings contained in the result are candidates. Use `HtmlLexer` to produce lexical tokens from the string and generate `ClassifiedSpan`s from the tokens.\n#### Semantic Highlighting\n\n**Tasks**:\n- [ ] <s>Augment the result from _Syntax Highlighting_ with semantic information from the `TemplateParser` AST.</s> Using tmLanguage file instead.\n\n**Problem**: Allow highlighting directives with a different color from built in HTML elements and attributes.\n\n**Solution**: Use Angular 2's `TemplateParser` to produce a template AST and augment the classifications produce during Syntax Highlighting using information from this AST.\n#### Diagnostic Messages\n\n**Tasks**:\n- [x] Invoke the `TemplateParser` on template strings and augment the result of `getSemanticDiagnostics()`.\n- [x] Generate the template code for the template AST and augment with the diagnostics from the generated modules.\n\n**Problem**: Produce error and warning messages for Angular 2 templates in `.ts`.\n\n**Solution**: Invoke the Angular 2 `TemplateParser` on template strings in TypeScript modules and augment the result of `getSemanticDiagnostics()` with the result. Even syntax errors are delayed until `getSemanticDiagnostics()` because determining if a string is a Angular 2 template requires TypeScript semantic analysis.\n\n**Problem**: Produce errors produced by code generated from a template. \n\n**Solution**: Invoke the offline compiler to produce the corresponding TypeScript for a template. Produce a secondary `LanguageService` for a project that now includes the generated code and augment the result diagnostics from the generated module.\n\n**Alternative**: The proposed solution might take significant time and resources because it requires instantiating an additional TypeScript language service which potentially could double the memory and time to respond to language service calls. Alternately the expression AST could be typed directly against the TypeScript symbols and error messages produced without invoking a secondary language service. The current proposal is simpler but the alternative should be considered if performance and memory are an issue for the proposed solution.\n#### Template Completions\n\n**Tasks**:\n- [x] Produce completion lists for element names.\n- [x] Produce completion lists for attribute names.\n- [x] Produce completion lists for attribute values from attribute type.\n- [ ] Produce completion lists for binding expressions.\n- [x] Produce completion lists for interpolation expressions.\n- [ ] Produce parameter help for data-binding function calls.\n\n**Notes**: All solutions begin by producing a `TemplateParser` AST and determine where in the AST the position requested corresponds to. All built-in HTML elements and attributes are treated as a built-in list of directives to avoid special casing HTML.\n\n**Problem**: Produce completions lists for element names.\n\n**Solution**: If the position is where an element is expected produce a list of available element selectors from the referenced directives.\n\n**Problem**: Produce a list of attributes names.\n\n**Solution**:  If the position is where an attribute name is expected produce the list of available attribute selectors that could match the current element. \n\n**Problem**: Produce list for attribute values from attribute type.\n\n**Solution**: If the position is where an attribute value is expected determine the type of the attribute by requesting the type from TypeScript, produce the completion list from the types member symbols.\n\n**Problem**: Produce completion lists for binding expressions.\n\n**Solution**: If the position is where a binding expression is expected generate the corresponding template code and request a completion list from the corresponding location in the generated code from an internal TypeScript language service.  _See Alternatives in **Diagnostic Messages** for an alternative to the code generation approach and conditions for pursuing the alternative._\n\n**Problem**: Produce completion lists for interpolation expressions.\n\n**Solution**: If the position is where an interpolation expression is expected treat it like a _binding expression_ above.\n\n**Problem**: Produce parameter help for data-binding function calls.\n\n**Solution**: If the position is where a binding expression or interpolation expression is expected use the technique in _binding expressions_ above but requires a parameter list instead of a completion list from the language service.\n#### Go to definition\n- [ ] Go to definition of an element name.\n- [ ] Go to definition of an attribute name.\n- [ ] Go to definition of an attribute value.\n- [ ] Go to definition of an binding expression.\n- [ ] Go to definition of an interpolation expression.\n\n**Problem**: Determine location that defines a template element.\n\n**Solution**: Use the same technique as is used in _Template Completions_ for the corresponding request but request references from TypeScript instead generating a completion list.\n#### Sharable metadata\n\n**Tasks**:\n- [x] Persist `@Component` and `@Pipe` decorator information not available in `.d.ts` files. (#7763)\n- [x] Create a shareable metadata reader for extracting information from a TypeScript AST and/or persistent data. (#7763)\n- [x] Create a static reflector that allows the parser to use the persistent metadata. (#7813)\n\n**Problem**:  Parsing an Angular 2 template relies on information provided using decorators. These decorators, however, are discarded when TypeScript produces a `.d.ts` file. The language services need a way to retrieve this information for modules for which it only has `.d.ts` files.\n\n**Solution**: Write the decorator information discarded by TypeScript into a `.metadata.json` file that can be read by the language services. This is will be produced for Angular by the Angular build and for other libraries, such as Angular Material, by the Angular CLI when packaging the module for deployment.\n\n**Alternative**: The metadata could be derived by loading the referenced modules. However this requires executing the modules thus requiring the language service to execute arbitrary third-party code directly. In many contexts, this would be an unacceptable risk. Also, some modules might have dependencies that could not be loaded in all contexts the language service must run such as modules with a browser dependency running in the tsserver. The proposed solution does not rely on executing third-party code so does not expose the language service to running potentially unready, incompatible, and/or unreliable code with unintended side-effects just to extract metadata information. Also, `.metadata.json` files can be written by a system that does load the modules and extracts the metadata information allowing the module to be loaded in a controlled environment outside the language service.\n"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/260934012","html_url":"https://github.com/angular/angular/issues/7482#issuecomment-260934012","issue_url":"https://api.github.com/repos/angular/angular/issues/7482","id":260934012,"user":{"login":"fxck","id":1303561,"avatar_url":"https://avatars.githubusercontent.com/u/1303561?v=3","gravatar_id":"","url":"https://api.github.com/users/fxck","html_url":"https://github.com/fxck","followers_url":"https://api.github.com/users/fxck/followers","following_url":"https://api.github.com/users/fxck/following{/other_user}","gists_url":"https://api.github.com/users/fxck/gists{/gist_id}","starred_url":"https://api.github.com/users/fxck/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fxck/subscriptions","organizations_url":"https://api.github.com/users/fxck/orgs","repos_url":"https://api.github.com/users/fxck/repos","events_url":"https://api.github.com/users/fxck/events{/privacy}","received_events_url":"https://api.github.com/users/fxck/received_events","type":"User","site_admin":false},"created_at":"2016-11-16T12:25:56Z","updated_at":"2016-11-16T12:25:56Z","body":"There was a little demo about this on ng-europe, and I remember someone on the team panel saying it's basically ready, any news?"}}
{"actor":{"display_login":"fxck"}}