Use typescript info for interpolation completion

.vscode/launch.json

@@ -12,7 +12,10 @@
       "type": "extensionHost",
       "request": "launch",
       "runtimeExecutable": "${execPath}",
-      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--disable-extensions"
+      ],
       "internalConsoleOptions": "neverOpen",
       "sourceMaps": true,
       "outFiles": ["${workspaceFolder}/dist/**/*.js"],
@@ -39,6 +42,7 @@
       "args": [
         "--extensionDevelopmentPath=${workspaceFolder}",
         "--extensionTestsPath=${workspaceFolder}/dist/test/lsp",
+        "--user-data-dir=${workspaceFolder}/test/lsp/data-dir",
         "${workspaceFolder}/test/lsp/fixture"
       ],
       "stopOnEntry": false,
@@ -55,6 +59,7 @@
       "args": [
         "--extensionDevelopmentPath=${workspaceFolder}",
         "--extensionTestsPath=${workspaceFolder}/dist/test/interpolation",
+        "--user-data-dir=${workspaceFolder}/test/interpolation/data-dir",
         "${workspaceFolder}/test/interpolation/fixture"
       ],
       "stopOnEntry": false,
@@ -82,6 +87,7 @@
       "args": [
         "--extensionDevelopmentPath=${workspaceFolder}",
         "--extensionTestsPath=${workspaceFolder}/dist/test/grammar",
+        "--user-data-dir=${workspaceFolder}/test/grammar/data-dir",
         "${workspaceFolder}/test/grammar/fixture"
       ],
       "stopOnEntry": false,

package.json

@@ -503,6 +503,7 @@
     "@types/glob": "^7.1.1",
     "@types/js-yaml": "^3.12.2",
     "@types/lodash": "^4.14.149",
+    "@types/minimist": "^1.2.0",
     "@types/mocha": "^7.0.1",
     "@types/node": "^13.7.7",
     "@types/shelljs": "^0.8.6",
@@ -511,6 +512,7 @@
     "husky": "^3.1.0",
     "js-yaml": "^3.13.1",
     "lint-staged": "^10.0.8",
+    "minimist": "^1.2.0",
     "mocha": "^7.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",

server/package.json

@@ -26,7 +26,7 @@
     "buefy-helper-json": "^1.0.2",
     "element-helper-json": "^2.0.6",
     "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^6.0.1",
+    "eslint-plugin-vue": "^6.2.1",
     "gridsome-helper-json": "^1.0.3",
     "js-beautify": "^1.10.0",
     "lodash": "^4.17.4",

server/src/modes/script/javascript.ts

@@ -1,7 +1,6 @@
 import { LanguageModelCache, getLanguageModelCache } from '../../embeddedSupport/languageModelCache';
 import {
   SymbolInformation,
-  SymbolKind,
   CompletionItem,
   Location,
   SignatureHelp,
@@ -41,6 +40,7 @@ import { getComponentInfo } from './componentInfo';
 import { DependencyService, T_TypeScript, State } from '../../services/dependencyService';
 import { RefactorAction } from '../../types';
 import { IServiceHost } from '../../services/typescriptService/serviceHost';
+import { toCompletionItemKind, toSymbolKind } from '../../services/typescriptService/util';
 
 // Todo: After upgrading to LS server 4.0, use CompletionContext for filtering trigger chars
 // https://microsoft.github.io/language-server-protocol/specification#completion-request-leftwards_arrow_with_hook
@@ -163,7 +163,7 @@ export async function getJavascriptMode(
             label,
             detail,
             sortText: entry.sortText + index,
-            kind: convertKind(entry.kind),
+            kind: toCompletionItemKind(entry.kind),
             textEdit: range && TextEdit.replace(range, entry.name),
             data: {
               // data used for resolving item details (see 'doResolve')
@@ -339,7 +339,7 @@ export async function getJavascriptMode(
         if (item.kind !== 'script' && !existing[sig]) {
           const symbol: SymbolInformation = {
             name: item.text,
-            kind: convertSymbolKind(item.kind),
+            kind: toSymbolKind(item.kind),
             location: {
               uri: doc.uri,
               range: convertRange(scriptDoc, item.spans[0])
@@ -648,70 +648,6 @@ function convertRange(document: TextDocument, span: ts.TextSpan): Range {
   return Range.create(startPosition, endPosition);
 }
 
-function convertKind(kind: ts.ScriptElementKind): CompletionItemKind {
-  switch (kind) {
-    case 'primitive type':
-    case 'keyword':
-      return CompletionItemKind.Keyword;
-    case 'var':
-    case 'local var':
-      return CompletionItemKind.Variable;
-    case 'property':
-    case 'getter':
-    case 'setter':
-      return CompletionItemKind.Field;
-    case 'function':
-    case 'method':
-    case 'construct':
-    case 'call':
-    case 'index':
-      return CompletionItemKind.Function;
-    case 'enum':
-      return CompletionItemKind.Enum;
-    case 'module':
-      return CompletionItemKind.Module;
-    case 'class':
-      return CompletionItemKind.Class;
-    case 'interface':
-      return CompletionItemKind.Interface;
-    case 'warning':
-      return CompletionItemKind.File;
-    case 'script':
-      return CompletionItemKind.File;
-    case 'directory':
-      return CompletionItemKind.Folder;
-  }
-
-  return CompletionItemKind.Property;
-}
-
-function convertSymbolKind(kind: ts.ScriptElementKind): SymbolKind {
-  switch (kind) {
-    case 'var':
-    case 'local var':
-    case 'const':
-      return SymbolKind.Variable;
-    case 'function':
-    case 'local function':
-      return SymbolKind.Function;
-    case 'enum':
-      return SymbolKind.Enum;
-    case 'module':
-      return SymbolKind.Module;
-    case 'class':
-      return SymbolKind.Class;
-    case 'interface':
-      return SymbolKind.Interface;
-    case 'method':
-      return SymbolKind.Method;
-    case 'property':
-    case 'getter':
-    case 'setter':
-      return SymbolKind.Property;
-  }
-  return SymbolKind.Variable;
-}
-
 function convertOptions(
   formatSettings: ts.FormatCodeSettings,
   options: FormattingOptions,

server/src/modes/template/htmlMode.ts

@@ -11,7 +11,6 @@ import { findDocumentHighlights } from './services/htmlHighlighting';
 import { findDocumentLinks } from './services/htmlLinks';
 import { findDocumentSymbols } from './services/htmlSymbolsProvider';
 import { htmlFormat } from './services/htmlFormat';
-import { parseHTMLDocument } from './parser/htmlParser';
 import { doESLintValidation, createLintEngine } from './services/htmlValidation';
 import { findDefinition } from './services/htmlDefinition';
 import { getTagProviderSettings, IHTMLTagProvider, CompletionConfiguration } from './tagProviders';
@@ -25,7 +24,6 @@ export class HTMLMode implements LanguageMode {
   private tagProviderSettings: CompletionConfiguration;
   private enabledTagProviders: IHTMLTagProvider[];
   private embeddedDocuments: LanguageModelCache<TextDocument>;
-  private vueDocuments: LanguageModelCache<HTMLDocument>;
 
   private config: any = {};
 
@@ -34,14 +32,14 @@ export class HTMLMode implements LanguageMode {
   constructor(
     documentRegions: LanguageModelCache<VueDocumentRegions>,
     workspacePath: string | undefined,
+    private vueDocuments: LanguageModelCache<HTMLDocument>,
     private vueInfoService?: VueInfoService
   ) {
     this.tagProviderSettings = getTagProviderSettings(workspacePath);
     this.enabledTagProviders = getEnabledTagProviders(this.tagProviderSettings);
     this.embeddedDocuments = getLanguageModelCache<TextDocument>(10, 60, document =>
       documentRegions.refreshAndGet(document).getSingleLanguageDocument('vue-html')
     );
-    this.vueDocuments = getLanguageModelCache<HTMLDocument>(10, 60, document => parseHTMLDocument(document));
   }
 
   getId() {
@@ -66,14 +64,7 @@ export class HTMLMode implements LanguageMode {
       tagProviders.push(getComponentInfoTagProvider(info.componentInfo.childComponents));
     }
 
-    return doComplete(
-      embedded,
-      position,
-      this.vueDocuments.refreshAndGet(embedded),
-      tagProviders,
-      this.config.emmet,
-      info
-    );
+    return doComplete(embedded, position, this.vueDocuments.refreshAndGet(embedded), tagProviders, this.config.emmet);
   }
   doHover(document: TextDocument, position: Position) {
     const embedded = this.embeddedDocuments.refreshAndGet(document);

server/src/modes/template/index.ts

@@ -1,13 +1,22 @@
-import { FormattingOptions, Position, Range, TextDocument, Hover, Location } from 'vscode-languageserver-types';
+import {
+  FormattingOptions,
+  Position,
+  Range,
+  TextDocument,
+  Hover,
+  Location,
+  CompletionItem
+} from 'vscode-languageserver-types';
 import { VueDocumentRegions } from '../../embeddedSupport/embeddedSupport';
-import { LanguageModelCache } from '../../embeddedSupport/languageModelCache';
+import { LanguageModelCache, getLanguageModelCache } from '../../embeddedSupport/languageModelCache';
 import { LanguageMode } from '../../embeddedSupport/languageModes';
 import { VueInfoService } from '../../services/vueInfoService';
 import { DocumentContext } from '../../types';
 import { HTMLMode } from './htmlMode';
 import { VueInterpolationMode } from './interpolationMode';
 import { IServiceHost } from '../../services/typescriptService/serviceHost';
 import { T_TypeScript } from '../../services/dependencyService';
+import { HTMLDocument, parseHTMLDocument } from './parser/htmlParser';
 
 type DocumentRegionCache = LanguageModelCache<VueDocumentRegions>;
 
@@ -22,8 +31,9 @@ export class VueHTMLMode implements LanguageMode {
     workspacePath: string | undefined,
     vueInfoService?: VueInfoService
   ) {
-    this.htmlMode = new HTMLMode(documentRegions, workspacePath, vueInfoService);
-    this.vueInterpolationMode = new VueInterpolationMode(tsModule, serviceHost);
+    const vueDocuments = getLanguageModelCache<HTMLDocument>(10, 60, document => parseHTMLDocument(document));
+    this.htmlMode = new HTMLMode(documentRegions, workspacePath, vueDocuments, vueInfoService);
+    this.vueInterpolationMode = new VueInterpolationMode(tsModule, serviceHost, vueDocuments);
   }
   getId() {
     return 'vue-html';
@@ -39,7 +49,15 @@ export class VueHTMLMode implements LanguageMode {
     return this.htmlMode.doValidation(document).concat(this.vueInterpolationMode.doValidation(document));
   }
   doComplete(document: TextDocument, position: Position) {
-    return this.htmlMode.doComplete(document, position);
+    const htmlList = this.htmlMode.doComplete(document, position);
+    const intList = this.vueInterpolationMode.doComplete(document, position);
+    return {
+      isIncomplete: htmlList.isIncomplete || intList.isIncomplete,
+      items: htmlList.items.concat(intList.items)
+    };
+  }
+  doResolve(document: TextDocument, item: CompletionItem): CompletionItem {
+    return this.vueInterpolationMode.doResolve(document, item);
   }
   doHover(document: TextDocument, position: Position): Hover {
     const interpolationHover = this.vueInterpolationMode.doHover(document, position);