Use embedded language services (#297)

* Use embedded language services * update snapshots * add tests
vuedx · Oct 12, 2022 · 1d281cc · 1d281cc
1 parent 5cd15e4
commit 1d281cc
Show file tree

Hide file tree

Showing 47 changed files with 2,342 additions and 476 deletions.
diff --git a/extensions/vscode-vue-language-features/package.json b/extensions/vscode-vue-language-features/package.json
@@ -318,12 +318,14 @@
   "dependencies": {
     "@vuedx/shared": "workspace:*",
     "@vuedx/typescript-plugin-vue": "workspace:*",
+    "@vuedx/vue-language-server": "workspace:*",
     "@vuedx/vue-virtual-textdocument": "workspace:*",
     "fast-glob": "^3.2.4",
     "inversify": "^5.0.1",
     "json5": "^2.1.3",
     "node-ipc": "10.1.0",
-    "reflect-metadata": "^0.1.13"
+    "reflect-metadata": "^0.1.13",
+    "vscode-languageclient": "^8.0.2"
   },
   "devDependencies": {
     "@types/node": "^10.12.0",

diff --git a/extensions/vscode-vue-language-features/src/client.ts b/extensions/vscode-vue-language-features/src/client.ts
@@ -0,0 +1,27 @@
+import { ExtensionContext } from 'vscode'
+import { LanguageClient, TransportKind } from 'vscode-languageclient/node'
+
+export function createClient(context: ExtensionContext): LanguageClient {
+  const serverModule = context.asAbsolutePath(
+    'node_modules/@vuedx/vue-language-server/lib/index.js',
+  )
+
+  return new LanguageClient(
+    'Vue Language Features',
+    {
+      run: {
+        module: serverModule,
+        transport: TransportKind.ipc,
+      },
+      debug: {
+        module: serverModule,
+        transport: TransportKind.ipc,
+        options: { execArgv: ['--nolazy', '--inspect=6009'] },
+      },
+    },
+    {
+      documentSelector: [{ language: 'vue' }],
+      markdown: { isTrusted: true, supportHtml: true },
+    },
+  )
+}
diff --git a/extensions/vscode-vue-language-features/src/index.ts b/extensions/vscode-vue-language-features/src/index.ts
@@ -3,6 +3,8 @@ import type { PluginConfig } from '@vuedx/typescript-plugin-vue'
 import { Container } from 'inversify'
 import 'reflect-metadata'
 import vscode from 'vscode'
+import { LanguageClient } from 'vscode-languageclient/node'
+import { createClient } from './client'
 import { OpenVirtualFileCommand } from './commands/openVirtualFile'
 import { SelectVirtualFileCommand } from './commands/selectVirtualFile'
 import { VueVirtualDocumentProvider } from './scheme/vue'
@@ -11,6 +13,8 @@ import { StyleLanguageProxy } from './services/StyleLanguageProxy'
 import { TemplateLanguageProxy } from './services/TemplateLanguageProxy'
 import { VirtualFileSwitcher } from './services/VirtualFileSwitcher'
 
+let client: LanguageClient | undefined
+
 export async function activate(
   context: vscode.ExtensionContext,
 ): Promise<void> {
@@ -19,6 +23,8 @@ export async function activate(
     defaultScope: 'Singleton',
   })
 
+  client = createClient(context)
+
   container.bind('context').toConstantValue(context)
   context.subscriptions.push(
     container.get(PluginCommunicationService).install(),
@@ -58,9 +64,14 @@ export async function activate(
     }
   }
 
+  await client.start()
   await checkForConflicts()
 }
 
+export async function deactivate(): Promise<void> {
+  await client?.stop()
+}
+
 function syncConfig(api: any, config: PluginConfig): void {
   api.configurePlugin('@vuedx/typescript-plugin-vue', config)
   void vscode.commands.executeCommand(
@@ -87,7 +98,12 @@ async function checkForConflicts(): Promise<void> {
     return
   }
 
-  const ids = ['johnsoncodehk.volar', 'octref.vetur']
+  const ids = [
+    'johnsoncodehk.volar',
+    'Vue.volar',
+    'Vue.vscode-typescript-vue-plugin',
+    'octref.vetur',
+  ]
   const extensions = ids
     .map((id) => vscode.extensions.getExtension(id))
     .filter(isNotNull)

diff --git a/packages/compiler-tsx/src/template/generate.ts b/packages/compiler-tsx/src/template/generate.ts
@@ -314,13 +314,7 @@ function genElementNode(node: ElementNode): void {
     ctx.write(node.tag, node.tagLoc, true).newLine()
     indent(() => {
       genProps(node)
-      ctx.write(
-        `${annotations.tsxCompletions}`,
-        createLoc(
-          node.startTagLoc,
-          node.tagLoc.end.offset - node.loc.start.offset,
-        ),
-      )
+      ctx.write(`${annotations.tsxCompletions}`)
     })
     ctx.newLine()
   }
@@ -399,13 +393,7 @@ function genComponentNode(node: ComponentNode): void {
   ctx.write(node.resolvedName ?? node.tag, node.tagLoc).newLine()
   indent(() => {
     genProps(node)
-    ctx.write(
-      `${annotations.tsxCompletions}`,
-      createLoc(
-        node.startTagLoc,
-        node.tagLoc.end.offset - node.loc.start.offset,
-      ),
-    )
+    ctx.write(`${annotations.tsxCompletions}`)
   })
 
   ctx.newLine()

diff --git a/packages/compiler-tsx/test/__snapshots__/baseline.js b/packages/compiler-tsx/test/__snapshots__/baseline.js
diff --git a/packages/compiler-tsx/test/__snapshots__/baseline.md b/packages/compiler-tsx/test/__snapshots__/baseline.md
diff --git a/packages/compiler-tsx/test/__snapshots__/vue-to-tsx.spec.ts.snap b/packages/compiler-tsx/test/__snapshots__/vue-to-tsx.spec.ts.snap
@@ -9,7 +9,8 @@ type __VueDX__GlobalComponents = import("vue").GlobalComponents;
 const __VueDX___Script_Component = __VueDX__defineComponent({});
 //#endregion
 //#region <script setup>
- ;const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
+
+const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
 const __VueDX___ScriptSetup_props = defineProps({});
 const __VueDX___ScriptSetup_emits = ({});
 const __VueDX___ScriptSetup_expose = {};
@@ -105,7 +106,8 @@ type __VueDX__GlobalComponents = import("vue").GlobalComponents;
 const __VueDX___Script_Component = __VueDX__defineComponent({});
 //#endregion
 //#region <script setup>
- ;const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
+
+const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
 const __VueDX___ScriptSetup_props = defineProps({});
 const __VueDX___ScriptSetup_emits = ({});
 const __VueDX___ScriptSetup_expose = {};
@@ -231,7 +233,8 @@ const __VueDX___Script_Component =  defineComponent({
 })
 //#endregion
 //#region <script setup>
- ;const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
+
+const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
 const __VueDX___ScriptSetup_props = defineProps({});
 const __VueDX___ScriptSetup_emits = ({});
 const __VueDX___ScriptSetup_expose = {};

diff --git a/packages/compiler-tsx/test/fixtures/if-else-if.tsx b/packages/compiler-tsx/test/fixtures/if-else-if.tsx
@@ -6,7 +6,8 @@ type __VueDX__GlobalComponents = import("vue").GlobalComponents;
 const __VueDX___Script_Component = __VueDX__defineComponent({});
 //#endregion
 //#region <script setup>
- ;const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
+
+const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
 const __VueDX___ScriptSetup_props = defineProps({});
 const __VueDX___ScriptSetup_emits = ({});
 const __VueDX___ScriptSetup_expose = {};

diff --git a/packages/compiler-tsx/test/fixtures/if-else-if.tsx.map b/packages/compiler-tsx/test/fixtures/if-else-if.tsx.map
diff --git a/packages/compiler-tsx/test/fixtures/nested-for-slot.tsx b/packages/compiler-tsx/test/fixtures/nested-for-slot.tsx
@@ -6,7 +6,8 @@ type __VueDX__GlobalComponents = import("vue").GlobalComponents;
 const __VueDX___Script_Component = __VueDX__defineComponent({});
 //#endregion
 //#region <script setup>
- ;const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
+
+const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
 const __VueDX___ScriptSetup_props = defineProps({});
 const __VueDX___ScriptSetup_emits = ({});
 const __VueDX___ScriptSetup_expose = {};

diff --git a/packages/compiler-tsx/test/fixtures/nested-for-slot.tsx.map b/packages/compiler-tsx/test/fixtures/nested-for-slot.tsx.map
diff --git a/packages/compiler-tsx/test/fixtures/ts-script-template.tsx b/packages/compiler-tsx/test/fixtures/ts-script-template.tsx
@@ -9,7 +9,8 @@ const __VueDX___Script_Component =  defineComponent({
 })
 //#endregion
 //#region <script setup>
- ;const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
+
+const __VueDX___ScriptSetup_scope = __VueDX__TypeCheck.internal.scope(async () => {
 const __VueDX___ScriptSetup_props = defineProps({});
 const __VueDX___ScriptSetup_emits = ({});
 const __VueDX___ScriptSetup_expose = {};

diff --git a/packages/compiler-tsx/test/fixtures/ts-script-template.tsx.map b/packages/compiler-tsx/test/fixtures/ts-script-template.tsx.map
diff --git a/packages/shared/src/reactivity/disposable.ts b/packages/shared/src/reactivity/disposable.ts
@@ -1,3 +1,3 @@
 export interface Disposable {
-  dispose(): void | Promise<void>
+  dispose(): void
 }
diff --git a/packages/shared/src/source.ts b/packages/shared/src/source.ts
@@ -74,7 +74,6 @@ class LineColumnMapper {
 export class SourceTransformer {
   private readonly source: string
   private readonly sourceMap: DecodedSourceMap
-  private sourceLineColumnMapper?: LineColumnMapper
 
   private code: string = ''
 
@@ -160,13 +159,19 @@ export class SourceTransformer {
     }
   }
 
+  private _sourceLineColumnMapper?: LineColumnMapper
+  public get sourceLineColumnMapper(): LineColumnMapper {
+    return (
+      this._sourceLineColumnMapper ??
+      (this._sourceLineColumnMapper = new LineColumnMapper(this.source))
+    )
+  }
+
   clone(start: number, end: number): void {
     if (start >= end) return
     const code = this.source.slice(start, end)
     if (code.length === 0) return
-    const mapper =
-      this.sourceLineColumnMapper ??
-      (this.sourceLineColumnMapper = new LineColumnMapper(this.source))
+    const mapper = this.sourceLineColumnMapper
     const { line, column } = mapper.positionAt(start)
     const lines = code.split('\n')
     const sourceMap: PartialDecodedSourceMap = {

diff --git a/packages/transforms/src/tsTransformScriptSetup.ts b/packages/transforms/src/tsTransformScriptSetup.ts
@@ -103,9 +103,13 @@ export function transformScriptSetup(
   } else {
     code.clone(0, offset)
   }
+  const { line } = code.sourceLineColumnMapper.positionAt(offset)
+
   // annotate range
+  code.append(`\n`, { mappings: [[[0, 0, line + 1, 0]]] })
   code.append(
-    ` ;const ${vars.scope} = ${options.typeIdentifier}.internal.scope(async () => {`,
+    `const ${vars.scope} = ${options.typeIdentifier}.internal.scope(async () => {`,
+    { mappings: [[[0, 0, line + 1, 0]]] },
   )
 
   if (exportedNodes.length > 0) {