Support two slash queries (#298)

* update vscode version

* support twoslash-queries

Same as https://github.com/orta/vscode-twoslash-queries but in *.vue files

Author: znck

extensions/vscode-vue-language-features/package.json

@@ -54,7 +54,7 @@
   "author": "Rahul Kadyan <[email protected]> (https://znck.me/)",
   "license": "MIT",
   "engines": {
-    "vscode": "^1.63.0"
+    "vscode": "^1.67.0"
   },
   "categories": [
     "Programming Languages"
@@ -329,7 +329,7 @@
   },
   "devDependencies": {
     "@types/node": "^10.12.0",
-    "@types/vscode": "^1.63.0",
+    "@types/vscode": "^1.67.0",
     "typescript": "^4.6.3",
     "vsce": "2.6.7"
   },

extensions/vscode-vue-language-features/src/index.ts

@@ -11,6 +11,7 @@ import { VueVirtualDocumentProvider } from './scheme/vue'
 import { PluginCommunicationService } from './services/PluginCommunicationService'
 import { StyleLanguageProxy } from './services/StyleLanguageProxy'
 import { TemplateLanguageProxy } from './services/TemplateLanguageProxy'
+import { TwoSlashService } from './services/TwoSlashService'
 import { VirtualFileSwitcher } from './services/VirtualFileSwitcher'
 
 let client: LanguageClient | undefined
@@ -34,6 +35,7 @@ export async function activate(
     container.get(OpenVirtualFileCommand).install(),
     container.get(SelectVirtualFileCommand).install(),
     container.get(VirtualFileSwitcher).install(),
+    container.get(TwoSlashService).install(),
     new vscode.Disposable(() => container.unbindAll()),
   )
   const ts = vscode.extensions.getExtension(

extensions/vscode-vue-language-features/src/services/TwoSlashService.ts

@@ -0,0 +1,79 @@
+import { injectable } from 'inversify'
+import vscode, { Disposable, InlayHint, InlayHintsProvider } from 'vscode'
+import { Installable } from '../utils/installable'
+
+@injectable()
+export class TwoSlashService
+  extends Installable
+  implements InlayHintsProvider<InlayHint>
+{
+  public install(): Disposable {
+    super.install()
+
+    return vscode.languages.registerInlayHintsProvider(
+      { language: 'vue' },
+      this,
+    )
+  }
+
+  async provideInlayHints(
+    document: vscode.TextDocument,
+    range: vscode.Range,
+    token: vscode.CancellationToken,
+  ): Promise<InlayHint[]> {
+    const source = document.getText(range)
+    const matches = source.matchAll(/^\s*(\/\/|<!--|\/\*)\s*\^\?/gm)
+
+    const offset = document.offsetAt(range.start)
+    const file =
+      document.uri.scheme === 'file'
+        ? document.uri.fsPath
+        : `^/${document.uri.scheme}/${
+            document.uri.authority ?? 'ts-nul-authority'
+          }/${document.uri.path.replace(/^\//, '')}`
+    const hints: InlayHint[] = []
+    for (const match of matches) {
+      if (match.index == null) continue
+      if (match[0] == null) continue
+
+      if (token.isCancellationRequested) return []
+
+      const end = match.index + match[0].length - 1
+      const position = document.positionAt(offset + end)
+      const inspectionPosition = new vscode.Position(
+        position.line - 1,
+        position.character,
+      )
+      const hint: any = await vscode.commands.executeCommand(
+        'typescript.tsserverRequest',
+        'quickinfo',
+        {
+          _: '%%%',
+          file,
+          line: inspectionPosition.line + 1,
+          offset: inspectionPosition.character,
+        },
+      )
+
+      if (hint == null || hint.body == null) continue
+      let label: string = hint.body.displayString
+        .replace(/\\n/g, ' ')
+        .replace(/\/n/g, ' ')
+        .replace(/ {2}/g, ' ')
+        // eslint-disable-next-line no-control-regex
+        .replace(/[\u0000-\u001F\u007F-\u009F]/g, '')
+      if (label.length > 120) {
+        label = `${label.slice(0, 119)}...`
+      }
+
+      hints.push({
+        kind: 0,
+        position: new vscode.Position(position.line, position.character + 1),
+        label,
+        paddingLeft: true,
+      })
+    }
+
+    return hints
+  }
+}

pnpm-lock.yaml

@@ -23,12 +23,11 @@
     "strictNullChecks": true,
     "strictPropertyInitialization": true,
 
-
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
 
     "resolveJsonModule": true,
 
-    "lib": ["ES2019"]
+    "lib": ["ES2020"]
   }
 }