RFC: addon api about ember-language-server

[lifeart]

@knownasilya project addon api lookup added in [email protected] (now you don't need to plug addon into app to test els integration, langserver will check project's package.json for possible API's)

[chriskrycho]

@lifeart this proposal needs some fleshing out! I think I'm following it, but it could use (a) more text explaining the intent, and (b) explicit API definitions and contracts. (What I see looks good, to be clear, but it needs more detail on those fronts please!) Can you add some of those details and also perhaps add the expected TypeScript interfaces for these API hooks?

[lifeart]

published [email protected] with extended debug and ability to hotreload addons logic without langserver restart.

all you need is add debug: true in package.json section, related to els

example:

"ember-language-server": {
    "entry": "./lib/langserver",
    "version": 1,
    "debug" : true, // allow hot-reload addon logic without server restart
    "capabilities": {
      "definitionProvider": true,
      "referencesProvider": true,
      "completionProvider": true
    }
}

[lifeart]

tips: how to log some data?

[lifeart]

workspaces support: #27 [email protected]

[lifeart]

more addons:

https://github.com/lifeart/els-addon-typed-templates
https://github.com/lifeart/els-addon-docs

[lifeart]

simple autocomplete addon file structure

lib/langserver.js

function onComplete(root, { focusPath, textDocument, position, server, results, type }) { 

/* 

 root - project root file (absolute path), like C://users/user/documents/repos/repo/project
 focusPath - AST node, created by langserver
 textDocument - https://github.com/microsoft/vscode-languageserver-node/blob/master/textDocument/src/main.ts#L116
 position - https://github.com/microsoft/vscode-languageserver-node/blob/master/textDocument/src/main.ts#L22
 server -  language server instance
 results - data, resolved by langserver (you can patch it)
 type - "script" or "template"

*/

  // https://microsoft.github.io//language-server-protocol/specifications/specification-3-14/#textDocument_completion
  return [{label: "this.name"}];
}

module.exports.onComplete = onComplete;

package.json

{
  "name": "dummy-provider",
   "ember-language-server": {
      "entry": "./lib/langserver",
      "capabilities": {
        "completionProvider": true
      }
  }
}

[lifeart]

should we chain API calls and results like addon(addon(addon(results))) or merge like
[...addon(results), ...addon(results), ...addon(results)]?

existing implementation allow original results modification and following merge approach, all results (including original) will be merged.

I think chain structure is more maintainable, anyway we have only one runloop, don't think we get mutch benefits from merge-like approach, but it relatively safe (one addon can't broke anover).

[Baltazore]

@lifeart do we expect that some addon(results) call fail ? If so I think merging results would be more error prone, but it is only concern here...

[lifeart]

@Baltazore all addon calls wrapped into try / catch and in case of "catch" we can take next addon and pas existing results as argument.

[lifeart]

for chained calls we can use ember-addon filed and read before, after packages.
after we will be able to create ordered call chain, using https://github.com/krisselden/dag-map

[lifeart]

@chriskrycho addon API ref: 6209353

[lifeart]

[email protected] available for users who want to test this functionality

[knownasilya]

Seeing this with v0.2.44

[Error - 7:21:25 PM] Request textDocument/documentSymbol failed.
  Message: Request textDocument/documentSymbol failed with message: Cannot read property 'visit' of undefined
  Code: -32603 

I was testing in a dummy app though.. did test in the app folder as well, but no errors there just nothing happens.

[knownasilya]

Changed

"capabilities": {
      "completionProvider": {
        "resolveProvider": true
      }
    }

to

    "capabilities": {
      "completionProvider": true
    }

and got in app auto complete but saw this error:

[Error - 7:27:47 PM] Request completionItem/resolve failed.
Message: Unhandled method completionItem/resolve
Code: -32601

I define this method: module.exports.onComplete = onComplete; and the first line is a console.log

[lifeart]

@knownasilya is ast-types exists inside node_modules? (https://github.com/lifeart/ember-language-server/blob/component-context-info-origin/src/symbols/js-document-symbol-provider.ts#L16)

regarding Unhandled method completionItem/resolve - is it happens 2+ times or only once in first run?

[lifeart]

@knownasilya issues fixed in [email protected]

[knownasilya]

Thanks for fixing those! I don't see any errors, but the api still doesn't seem to be called, https://github.com/crashco/ember-template-component-import/blob/autocomplete/lib/langserver.js

[lifeart]

@knownasilya you going well!

try remove "type" and rename "name" -> "label"

completion Item structure:

// import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';

{
  kind?: CompletionItemKind.Class,
  label: 'ComponentName,
  detail?: 'my custom component'
};

possible kind's:

export interface CompletionItem {
    /**
     * The label of this completion item. By default
     * also the text that is inserted when selecting
     * this completion.
     */
    label: string;
    /**
     * The kind of this completion item. Based of the kind
     * an icon is chosen by the editor.
     */
    kind?: CompletionItemKind;
    /**
     * A human-readable string with additional information
     * about this item, like type or symbol information.
     */
    detail?: string;
    /**
     * A human-readable string that represents a doc-comment.
     */
    documentation?: string | MarkupContent;
    /**
     * Indicates if this item is deprecated.
     */
    deprecated?: boolean;
    /**
     * Select this item when showing.
     *
     * *Note* that only one completion item can be selected and that the
     * tool / client decides which item that is. The rule is that the *first*
     * item of those that match best is selected.
     */
    preselect?: boolean;
    /**
     * A string that should be used when comparing this item
     * with other items. When `falsy` the [label](#CompletionItem.label)
     * is used.
     */
    sortText?: string;
    /**
     * A string that should be used when filtering a set of
     * completion items. When `falsy` the [label](#CompletionItem.label)
     * is used.
     */
    filterText?: string;
    /**
     * A string that should be inserted into a document when selecting
     * this completion. When `falsy` the [label](#CompletionItem.label)
     * is used.
     *
     * The `insertText` is subject to interpretation by the client side.
     * Some tools might not take the string literally. For example
     * VS Code when code complete is requested in this example `con<cursor position>`
     * and a completion item with an `insertText` of `console` is provided it
     * will only insert `sole`. Therefore it is recommended to use `textEdit` instead
     * since it avoids additional client side interpretation.
     *
     * @deprecated Use textEdit instead.
     */
    insertText?: string;
    /**
     * The format of the insert text. The format applies to both the `insertText` property
     * and the `newText` property of a provided `textEdit`.
     */
    insertTextFormat?: InsertTextFormat;
    /**
     * An [edit](#TextEdit) which is applied to a document when selecting
     * this completion. When an edit is provided the value of
     * [insertText](#CompletionItem.insertText) is ignored.
     *
     * *Note:* The text edit's range must be a [single line] and it must contain the position
     * at which completion has been requested.
     */
    textEdit?: TextEdit;
    /**
     * An optional array of additional [text edits](#TextEdit) that are applied when
     * selecting this completion. Edits must not overlap (including the same insert position)
     * with the main [edit](#CompletionItem.textEdit) nor with themselves.
     *
     * Additional text edits should be used to change text unrelated to the current cursor position
     * (for example adding an import statement at the top of the file if the completion item will
     * insert an unqualified type).
     */
    additionalTextEdits?: TextEdit[];
    /**
     * An optional set of characters that when pressed while this completion is active will accept it first and
     * then type that character. *Note* that all commit characters should have `length=1` and that superfluous
     * characters will be ignored.
     */
    commitCharacters?: string[];
    /**
     * An optional [command](#Command) that is executed *after* inserting this completion. *Note* that
     * additional modifications to the current document should be described with the
     * [additionalTextEdits](#CompletionItem.additionalTextEdits)-property.
     */
    command?: Command;
    /**
     * An data entry field that is preserved on a completion item between
     * a [CompletionRequest](#CompletionRequest) and a [CompletionResolveRequest]
     * (#CompletionResolveRequest)
     */
    data?: any;
}

[knownasilya]

Sweet, thanks @lifeart

[lifeart]

extended debug: #26

[lifeart]

How to debug an els-addon?

There is few steps.

Register addon path globally (to skip addon installation step)

.vscode/settings.json

{
    "els.local.addons": ["C:\\Users\\ember\\els-addon-typed-templates"],
}

or

link UELS addon to project in package.json (just like any dependency)

---

Next steps

1. We need to run UELS in debug mode
2. We need to connect to UELS server (after it's initialization
3. Done! Now we can use breakpints!

---

To run UELS in debug mode, we need to get currently installed extension path.

Let's figure out extension path, for me it:

C:/Users/lifeart/.vscode/extensions/lifeart.vscode-ember-unstable-1.3.2,

and we need to write it to

.vscode/launch.json

{
   "version":"0.1.0",
   "configurations":[
      {
         "name":"Launch UELS Extension",
         "type":"extensionHost",
         "request":"launch",
         "runtimeExecutable":"${execPath}",
         "args":[
            "--extensionDevelopmentPath=C:/Users/lifeart/.vscode/extensions/lifeart.vscode-ember-unstable-1.3.2"
         ],
         "stopOnEntry":false,
         "sourceMaps":true,
         "outFiles":[
            "C:/Users/lifeart/.vscode/extensions/lifeart.vscode-ember-unstable-1.3.2/out/src/**/*.js"
         ]
      },
      {
         "name":"Attach to UELS Server",
         "type":"node",
         "request":"attach",
         "port":6004,
         "sourceMaps":true,
         "protocol":"inspector",
         "outFiles":[
            "C:/Users/lifeart/.vscode/extensions/lifeart.vscode-ember-unstable-1.3.2/node_modules/@lifeart/ember-language-server/lib/**/*.js"
         ],
         "restart":true,
         "smartStep":true
      }
   ]
}

Steps:

1. Run Launch UELS Extension
2. Select an Ember project (for debbuging)
3. Run Attach to UELS Server
4. Set debug point