feat(language-server): generate template virtual code

package.json

@@ -12,11 +12,14 @@
     "dev:compiler": "cross-env NODE_ENV=development pnpm --filter @vue-vine/compiler run dev",
     "dev:vite": "cross-env NODE_ENV=development pnpm --filter @vue-vine/vite-plugin run dev",
     "dev:main": "cross-env NODE_ENV=development pnpm --filter vue-vine run dev",
-    "dev:ls": "cross-env NODE_ENV=production pnpm --filter @vue-vine/language-server run dev",
+    "dev:lang-service": "cross-env NODE_ENV=development pnpm --filter @vue-vine/language-service run dev",
+    "dev:lang-server": "cross-env NODE_ENV=development pnpm --filter @vue-vine/language-server run dev",
     "dev:ext": "cross-env NODE_ENV=development esno scripts/ext-dev.js",
     "build:compiler": "cross-env NODE_ENV=production pnpm --filter @vue-vine/compiler run build",
     "build:vite": "cross-env NODE_ENV=production pnpm --filter @vue-vine/vite-plugin run build",
-    "build:ls": "cross-env NODE_ENV=production pnpm --filter @vue-vine/language-server run build",
+    "build:ls": "cross-env NODE_ENV=production pnpm build:lang-service && pnpm build:lang-server",
+    "build:lang-service": "cross-env NODE_ENV=production pnpm --filter @vue-vine/language-service run build",
+    "build:lang-server": "cross-env NODE_ENV=production pnpm --filter @vue-vine/language-server run build",
     "build:eslint-parser": "cross-env NODE_ENV=production pnpm --filter @vue-vine/eslint-parser run build",
     "build:main": "cross-env NODE_ENV=production pnpm --filter vue-vine run build",
     "build:ext": "cross-env NODE_ENV=production pnpm --filter vue-vine-extension run build",
@@ -60,6 +63,7 @@
   },
   "pnpm": {
     "overrides": {
+      "@volar/typescript": "2.1.5-patch.2",
       "vscode-uri": "^3.0.8"
     }
   },

packages/compiler/package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "@babel/parser": "^7.22.14",
     "@babel/types": "^7.22.11",
-    "@vue/compiler-dom": "^3.3.4",
+    "@vue/compiler-dom": "^3.4.21",
     "estree-walker": "^2.0.2",
     "hash-sum": "^2.0.0",
     "line-column": "^1.0.2",

packages/compiler/src/template/compose.ts

@@ -181,6 +181,7 @@ export function createSeparatedTemplateComposer(
       const compileResult = compileVineTemplate(
         templateSource,
         {
+          ...compilerHooks.getCompilerCtx()?.options?.vueCompilerOptions ?? {},
           scopeId: `data-v-${vineFnCompCtx.scopeId}`,
           bindingMetadata,
           inline: false,
@@ -332,6 +333,7 @@ export function createInlineTemplateComposer(
       const compileResult = compileVineTemplate(
         templateSource,
         {
+          ...compilerHooks.getCompilerCtx()?.options?.vueCompilerOptions ?? {},
           scopeId: `data-v-${vineCompFnCtx.scopeId}`,
           bindingMetadata,
           onError: (e) => {

packages/compiler/src/transform.ts

@@ -177,7 +177,7 @@ export function transformFile(
   compilerHooks: VineCompilerHooks,
   inline = true,
 ) {
-  const isDev = compilerHooks.getCompilerCtx().options.mode !== 'production'
+  const isDev = compilerHooks.getCompilerCtx().options.envMode !== 'production'
   const ms = vineFileCtx.fileMagicCode
 
   // Traverse file context's `styleDefine`, and generate import statements.

packages/compiler/src/types.ts

@@ -1,4 +1,5 @@
 import type {
+  CompilerOptions,
   RootNode,
   BindingTypes as VueBindingTypes,
 } from '@vue/compiler-dom'
@@ -56,7 +57,8 @@ export interface VineCompilerHooks {
 }
 
 export interface VineCompilerOptions {
-  mode?: string // 'development' | 'production'
+  envMode?: string // 'development' | 'production'
+  vueCompilerOptions?: CompilerOptions
   inlineTemplate?: boolean
   preprocessOptions?: Record<string, any>
   postcssOptions?: any

packages/compiler/tests/__snapshots__/analyze.spec.ts.snap

@@ -862,6 +862,7 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
           "children": [
             {
               "content": {
+                "ast": null,
                 "constType": 0,
                 "content": "__props.title",
                 "isStatic": false,
@@ -899,6 +900,7 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
           "codegenNode": {
             "children": {
               "content": {
+                "ast": null,
                 "constType": 0,
                 "content": "__props.title",
                 "isStatic": false,
@@ -955,7 +957,6 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
             "tag": ""h1"",
             "type": 13,
           },
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 27,
@@ -1025,6 +1026,7 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
             "children": [
               {
                 "content": {
+                  "ast": null,
                   "constType": 0,
                   "content": "__props.title",
                   "isStatic": false,
@@ -1062,6 +1064,7 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
             "codegenNode": {
               "children": {
                 "content": {
+                  "ast": null,
                   "constType": 0,
                   "content": "__props.title",
                   "isStatic": false,
@@ -1118,7 +1121,6 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
               "tag": ""h1"",
               "type": 13,
             },
-            "isSelfClosing": false,
             "loc": {
               "end": {
                 "column": 27,
@@ -1208,7 +1210,6 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
         "tag": ""div"",
         "type": 13,
       },
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 11,
@@ -1238,6 +1239,7 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
         "children": [
           {
             "content": {
+              "ast": null,
               "constType": 0,
               "content": "__props.title",
               "isStatic": false,
@@ -1275,6 +1277,7 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
         "codegenNode": {
           "children": {
             "content": {
+              "ast": null,
               "constType": 0,
               "content": "__props.title",
               "isStatic": false,
@@ -1331,7 +1334,6 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
           "tag": ""h1"",
           "type": 13,
         },
-        "isSelfClosing": false,
         "loc": {
           "end": {
             "column": 27,
@@ -1451,7 +1453,14 @@ exports[`test Vine compiler analyze > analyze vine template 1`] = `
       "offset": 0,
     },
   },
+  "source": "
+    <div>
+      <h1>{{ title }}</h1>
+      <slot />
+    </div>
+  ",
   "temps": 0,
+  "transformed": true,
   "type": 0,
 }
 `;
@@ -1542,7 +1551,6 @@ exports[`test Vine compiler analyze > analyze vine template 2`] = `
             },
             "type": 4,
           },
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 36,
@@ -1713,7 +1721,6 @@ exports[`test Vine compiler analyze > analyze vine template 2`] = `
                       },
                       "type": 4,
                     },
-                    "isSelfClosing": false,
                     "loc": {
                       "end": {
                         "column": 36,
@@ -1892,7 +1899,6 @@ exports[`test Vine compiler analyze > analyze vine template 2`] = `
         "tag": "MyBox",
         "type": 13,
       },
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 13,
@@ -1925,6 +1931,19 @@ exports[`test Vine compiler analyze > analyze vine template 2`] = `
             },
           },
           "name": "title",
+          "nameLoc": {
+            "end": {
+              "column": 17,
+              "line": 2,
+              "offset": 17,
+            },
+            "source": "title",
+            "start": {
+              "column": 12,
+              "line": 2,
+              "offset": 12,
+            },
+          },
           "type": 6,
           "value": {
             "content": "Test template",
@@ -2100,7 +2119,6 @@ exports[`test Vine compiler analyze > analyze vine template 2`] = `
                   },
                   "type": 4,
                 },
-                "isSelfClosing": false,
                 "loc": {
                   "end": {
                     "column": 36,
@@ -2351,7 +2369,13 @@ exports[`test Vine compiler analyze > analyze vine template 2`] = `
       "offset": 0,
     },
   },
+  "source": "
+    <MyBox title="Test template">
+      <div>Test inner content</div>
+    </MyBox>
+  ",
   "temps": 0,
+  "transformed": true,
   "type": 0,
 }
 `;

packages/compiler/tests/transform.spec.ts

@@ -100,7 +100,7 @@ describe('test transform', () => {
 
   it('not output HMR content in non-dev mode', async () => {
     const { mockCompilerCtx, mockCompilerHooks } = createMockTransformCtx({
-      mode: 'production',
+      envMode: 'production',
     })
     compileVineTypeScriptFile(testContent, 'testNoHMRContentOnProduction', mockCompilerHooks)
     expect(mockCompilerCtx.vineCompileErrors.length).toBe(0)

packages/language-server/package.json

@@ -36,16 +36,17 @@
     "prepublishOnly": "pnpm run build"
   },
   "dependencies": {
-    "@volar/language-core": "~2.1.2",
-    "@volar/language-server": "~2.1.2",
-    "@volar/language-service": "~2.1.2",
-    "@vue-vine/compiler": "^0.0.1",
+    "@volar/language-core": "~2.1.5",
+    "@volar/language-server": "~2.1.5",
+    "@volar/language-service": "~2.1.5",
+    "@vue-vine/compiler": "workspace:*",
+    "@vue-vine/language-service": "workspace:*",
     "@vue/language-core": "^2.0.6",
     "@vue/language-service": "^2.0.6",
-    "volar-service-css": "0.0.31",
-    "volar-service-emmet": "0.0.31",
-    "volar-service-html": "0.0.31",
-    "volar-service-typescript": "0.0.31-patch.1"
+    "volar-service-css": "0.0.34",
+    "volar-service-emmet": "0.0.34",
+    "volar-service-html": "0.0.34",
+    "volar-service-typescript": "0.0.34"
   },
   "devDependencies": {
     "@types/node": "^20.11.25"

packages/language-server/src/index.ts

@@ -1,47 +1,74 @@
 import {
   createConnection,
   createServer,
+  createSimpleProjectProviderFactory,
   createTypeScriptProjectProviderFactory,
   loadTsdkByPath,
 } from '@volar/language-server/node'
+import type * as ts from 'typescript'
 import { create as createCssService } from 'volar-service-css'
 import { create as createEmmetService } from 'volar-service-emmet'
 import { create as createHtmlService } from 'volar-service-html'
-import { create as createTypeScriptService } from 'volar-service-typescript'
+import { create as createTypeScriptServices } from 'volar-service-typescript'
 
-import { createVueVineLanguagePlugin } from './language-service'
+import type { VueCompilerOptions } from '@vue/language-core'
+import { createParsedCommandLine, resolveVueCompilerOptions } from '@vue/language-core'
+import { createVueVineLanguagePlugin } from '@vue-vine/language-service'
+
+const debug = false
 
 const connection = createConnection()
 const server = createServer(connection)
 
 connection.listen()
 
-connection.onInitialize((params) => {
+connection.onInitialize(async (params) => {
   const tsdk = loadTsdkByPath(
     params.initializationOptions.typescript.tsdk,
     params.locale,
   )
 
-  return server.initialize(
+  const result = await server.initialize(
     params,
-    createTypeScriptProjectProviderFactory(
-      tsdk.typescript,
-      tsdk.diagnosticMessages,
-    ),
+    debug
+      ? createTypeScriptProjectProviderFactory(
+        tsdk.typescript,
+        tsdk.diagnosticMessages,
+      )
+      : createSimpleProjectProviderFactory(),
     {
-      getLanguagePlugins() {
-        return [createVueVineLanguagePlugin(tsdk.typescript)]
+      getLanguagePlugins(env, projectContext) {
+        let compilerOptions: ts.CompilerOptions = {}
+        let vueCompilerOptions: VueCompilerOptions
+        if (projectContext.typescript?.configFileName) {
+          const { vueOptions, options } = createParsedCommandLine(tsdk.typescript, tsdk.typescript.sys, projectContext.typescript.configFileName)
+          vueCompilerOptions = resolveVueCompilerOptions(vueOptions)
+          compilerOptions = options
+        }
+        else {
+          vueCompilerOptions = resolveVueCompilerOptions({})
+        }
+        return [createVueVineLanguagePlugin(tsdk.typescript, compilerOptions, vueCompilerOptions)]
       },
       getServicePlugins() {
-        return [
+        const plugins = [
           createHtmlService(),
           createCssService(),
           createEmmetService(),
-          createTypeScriptService(tsdk.typescript),
         ]
+        if (debug) {
+          plugins.push(...createTypeScriptServices(tsdk.typescript))
+        }
+        return plugins
       },
     },
   )
+
+  // tsserver already provides semantic tokens
+  // TODO: handle in upstream instead of here
+  result.capabilities.semanticTokensProvider = undefined
+
+  return result
 })
 
 connection.onInitialized(server.initialized)