ELS – The Ember Language Server

Transcript

1. ELS the Ember Language Server
2. Turbo87 TobiasBieniek
3. simplabs based in Munich consulting all over ! * Stickers available after the talk
4. Disclaimer this talk contains simplified code examples! the real code is available at 
 https://github.com/emberwatch/ember-language-server
5. What text editor do you use? " # $ % $ & ' ( ) * " *
7. Goto Class
8. Goto Definition
9. IntelliJ-only
10. vim Emacs VS Code IntelliJ JavaScript ❓ ❓ ❓ ❓ CSS ❓ ❓ ❓ ❓ Ember.js ❓ ❓ ❓ ❓ Rust ❓ ❓ ❓ ❓
11. JavaScript ✅ CSS ✅ Ember.js ✅ Rust ✅ vim ✅ Emacs ✅ VS Code ✅ IntelliJ ✅
12. JavaScript javascript- typescript- langserver CSS vscode-css- languageserver Ember.js ember-language- server Rust rust-language- server vim vim-lsp Emacs emacs-lsp VS Code builtin! IntelliJ
13. HTTP JSON API
14. ELS JSON-RPC Language Server Protocol HTTP JSON API
15. JSON-RPC 2.0 Request {
 "jsonrpc": "2.0",
 "id": 42,
 "method": "add",
 "params": {
 "a": 1,
 "b": 2,
 },
 } Response {
 "jsonrpc": "2.0",
 "id": 42,
 "result": 3,
 "error": null,
 }
16. vscode-languageserver
17. Syntax Highlighting
18. Syntax Highlighting (sorry, not responsible for that...) https://github.com/Microsoft/language-server-protocol/issues/33#issuecomment-231883169
19. Autocomplete
20. Request {
 "method": "textDocument/completion",
 "params": {
 "textDocument": {
 "uri": "file: ///Users/tbieniek/Code/crates.io/app/templates/index.hbs",
 },
 "position": {
 "line": 5,
 "character": 18,
 },
 },
 }
21. import URI from 'vscode-uri';
 let uri = URI.parse(
 'file: ///Users/tbieniek/Code/crates.io/app/templates/index.hbs'
 ) let path = uri.fsPath; // -> /Users/tbieniek/Code/crates.io/app/templates/index.hbs
22. import fs from 'fs'; let content = fs.readFileSync( '/Users/tbieniek/Code/crates.io/app/templates/index.hbs', { encoding: 'utf-8' }, ); let lines = content.split('\n'); let line = line[5]; let character = line[18]; // -> a
23. import fs from 'fs'; import { preprocess } from '@glimmer/syntax'; let content = fs.readFileSync( '/Users/tbieniek/Code/crates.io/app/templates/index.hbs', { encoding: 'utf-8' }, ); let ast = preprocess(content); // -> Abstract Syntax T ree
24. {{button onclick=(a)}} Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression
25. {{button onclick=(a)}} Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression
26. {{button onclick=(a)}} Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression
27. {{button onclick=(a)}} Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression
28. {{button onclick=(a)}} Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression
29. {{button onclick=(a)}} Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression
30. {{button onclick=(a)}} Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression
31. AST Explorer https://astexplorer.net
32. {{button onclick=(a)}} Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression Cursor
33. path: { type: 'PathExpression', original: 'a', this: false, parts: [ 'a', ], data: false, loc: { start: { line: 5, column: 18, }, end: { line: 5, column: 19, }, }, } Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression
34. path: { type: 'PathExpression', original: 'a', this: false, parts: [ 'a', ], data: false, loc: { start: { line: 5, column: 18, }, end: { line: 5, column: 19, }, }, } position: {
 line: 5,
 character: 18,
 } Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression
35. let node = findNodeAtPosition(ast, position); let isSubExpressionPath = ( node.type === 'PathExpression' && node.parent.type === 'SubExpression' ); if (isSubExpressionPath) { return SUB_EXPRESSION_HELPERS; }
36. const SUB_EXPRESSION_HELPER_NAMES = [ 'action', 'component', 'concat', 'get', 'if', 'unless', ]; const SUB_EXPRESSION_HELPERS = SUB_EXPRESSION_HELPER_NAMES
 .map(name => ({ label: name, kind: CompletionItemKind.Function, }));
37. Autocomplete ✅
38. Autocomplete #2
39. import path from 'path'; import findUp from 'find-up'; let projectRoot = findUp.sync('ember-cli-build.js', { cwd: path.dirname( '/Users/tbieniek/Code/crates.io/app/templates/index.hbs' ), }); // -> /Users/tbieniek/Code/crates.io
40. import glob from 'fast-glob'; let components = glob.sync(['**/*.js'], {
 cwd: `${projectRoot}/app/components`,
 }); let templates = glob.sync(['**/*.hbs'], {
 cwd: `${projectRoot}/app/templates/components`,
 });
41. import glob from 'fast-glob'; let components = glob.sync(['**/*.js'], {
 cwd: `${projectRoot}/app/components`,
 }); let templates = glob.sync(['**/*.hbs'], {
 cwd: `${projectRoot}/app/templates/components`,
 }); let names = components .concat(templates) .map(filePath => stripExtension(filePath));
42. import glob from 'fast-glob'; let components = glob.sync(['**/*.js'], {
 cwd: `${projectRoot}/app/components`,
 }); let templates = glob.sync(['**/*.hbs'], {
 cwd: `${projectRoot}/app/templates/components`,
 }); let names = components .concat(templates) .map(filePath => stripExtension(filePath)); let uniqueNames = Array.from(new Set(names));
43. let names = components .concat(templates) .map(filePath => stripExtension(filePath)); let uniqueNames = Array.from(new Set(names)); return uniqueNames.map(name => ({ label: name, kind: CompletionItemKind.Class, }));
44. Autocomplete #2 ✅
45. Goto Definition
46. Request {
 "method": "textDocument/definition",
 "params": {
 "textDocument": {
 "uri": "file: ///Users/tbieniek/Code/crates.io/app/templates/crate.hbs",
 },
 "position": {
 "line": 92,
 "character": 14,
 },
 },
 }
47. {{crate-readme
 rendered=crate.readme}} Program -> MustacheStatement -> PathExpression -> Hash -> HashPair -> SubExpression -> PathExpression
48. let node = findNodeAtPosition(ast, position); let isMustacheStatementPath = ( node.type === 'PathExpression' && node.parent.type === 'MustacheStatement' ); if (!isMustacheStatementPath) { return; }
49. import path from 'path'; import findUp from 'find-up'; let projectRoot = findUp.sync('ember-cli-build.js', { cwd: path.dirname( '/Users/tbieniek/Code/crates.io/app/templates/crate.hbs' ), }); // -> /Users/tbieniek/Code/crates.io
50. import URI from 'vscode-uri'; let componentPath = `${projectRoot}/app/components/${node.original}.js`; if (fs.existsSync(componentPath)) { results.push({ uri: URI.file(componentPath), range: { start: ..., end: ... }, }); }
51. What else can
 we build with this?
52. {{#link-to "index"}}Home{{/link-to}} • app/controllers/index.js • app/routes/index.js • app/templates/index.hbs
53. import DS from 'ember-data'; export default DS.Model.extend({ crates: DS.hasMany('crate'), }); • app/adapters/crate.js • app/models/crate.js • app/serializers/crate.js
54. import Component from '@ember/component'; import { inject as service } from '@ember/service'; export default Component.extend({ session: service('session'), }); • app/services/session.js
55. {{t "my-name-is"}} • translations/de.json • translations/en.json • translations/fr.json • translations/nl.json
56. Caveats (roadblocks and deviations)
57. Compiler vs. Editor
58. Compiler > must produce 100% correct output > expects 100% valid input
59. Editor > is allowed to produce incomplete output > should handle incomplete/invalid input
60. @glimmer/syntax > written for the template compiler > can not handle incomplete/invalid input {{#link-to "|
61. ELS Editor Support
62. ELS Editor Support > VSCode ... done (vscode-ember extension) > Atom ... done (ide-ember package) > emacs ... work-in-progress > vim ... )
63. Wishlist (not yet supported by LSP)
64. File Type Icons
65. Goto Related File from the crates controller
66. Goto Related File > cycle through controller, route, template > or component and template > or model, adapter, serializer > or to the related test file
67. Inline Translations
68. emberwatch/ember-language-server #topic-editors
69. ELS the Ember Language Server Thanks!