Language service extension support (vue-vine#42)

Co-authored-by: so1ve <[email protected]>
Co-authored-by: 沈青川 <[email protected]>

.eslintignore

@@ -5,3 +5,4 @@ pnpm-lock.yaml
 .eslintrc
 packages/docs/.vitepress/cache
 scripts/*.sh
+*.vls.vine-virtual.ts

.vscode/launch.json

@@ -16,11 +16,17 @@
       ],
       "outFiles": [
         "${workspaceFolder}/packages/vscode-ext/out/**/*.js"
-      ],
-      "preLaunchTask": {
-        "type": "npm",
-        "script": "ext:dev"
-      }
+      ]
+    },
+    {
+      "name": "Attach to Server",
+      "type": "node",
+      "request": "attach",
+      "port": 6009,
+      "restart": true,
+      "outFiles": [
+        "${workspaceRoot}/*/*/out/**/*.js"
+      ]
     }
   ]
 }

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "files.eol": "\n",
+  "prettier.enable": false
+}

README-CN.md

@@ -16,7 +16,7 @@
 
 ## 开始使用
 
-**注意:** 目前，Vue Vine仍处于密集开发阶段，请不要将其用于生产环境。
+**注意:** 目前，Vue Vine 仍处于密集开发阶段，请不要将其用于生产环境。
 
 你可以按照下面的步骤操作，启动示例项目来预览
 
@@ -33,5 +33,4 @@ pnpm run play
 ```
 
 1. 接下来可以在 `http://localhost:3333/` 中看到示例。
-2. 你可以在 URL 查询参数上添加 `?sfc` 来切换回 SFC 示例。
-3. 你可以在 `http://localhost:3333/__inspect/` 中查看源代码在 Vite 处理管道的转换过程。
+3. 你可以在 `http://localhost:3333/__inspect/` 中查看源代码在 Vite 处理管道的转换过程。

README.md

@@ -32,6 +32,5 @@ pnpm run dev
 pnpm run play
 ```
 
-1. You can see the demo in `http://localhost:3333/`. 
-2. You can add URL query `?sfc` to switch back to SFC style example.
+1. You can see the demo in `http://localhost:3333/`.
 3. You can inspect the transforming process in `http://localhost:3333/__inspect/`

nx.json

@@ -1,23 +1,23 @@
-{
-  "tasksRunnerOptions": {
-    "default": {
-      "runner": "nx/tasks-runners/default",
-      "options": {
-        "cacheableOperations": [
-          "build",
-          "lint"
-        ]
-      }
-    }
-  },
-  "targetDefaults": {
-    "build": {
-      "dependsOn": [
-        "^build"
-      ]
-    }
-  },
-  "affected": {
-    "defaultBase": "main"
-  }
-}
+{
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "nx/tasks-runners/default",
+      "options": {
+        "cacheableOperations": [
+          "build",
+          "lint"
+        ]
+      }
+    }
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": [
+        "^build"
+      ]
+    }
+  },
+  "affected": {
+    "defaultBase": "main"
+  }
+}

package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "play": "pnpm --filter @vue-vine/playground run dev",
     "dev": "cross-env NODE_ENV=development esno scripts/dev.js",
-    "ext:dev": "cross-env NODE_ENV=development pnpm --filter vue-vine-extension run dev",
-    "ext:build": "cross-env NODE_ENV=production pnpm --filter vue-vine-extension run build:esbuild",
+    "ext:dev": "cross-env NODE_ENV=development esno scripts/ext-dev.js dev",
+    "ext:build": "cross-env NODE_ENV=production esno scripts/ext-dev.js build",
     "test": "pnpm --filter @vue-vine/compiler run test",
     "test:e2e": "pnpm --filter @vue-vine/e2e-test run test",
     "lint": "eslint . --cache",

packages/compiler/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020-PRESENT ShenQingchuan
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020-PRESENT ShenQingchuan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/compiler/index.ts

@@ -1,10 +1,10 @@
 import MagicString from 'magic-string'
-import { parse as babelParse } from '@babel/parser'
 import type { VineCompilerCtx, VineCompilerHooks, VineCompilerOptions, VineFileCtx } from './src/types'
 import { findVineCompFnDecls } from './src/babel-helpers/ast'
 import { validateVine } from './src/validate'
 import { analyzeVine } from './src/analyze'
 import { transformFile } from './src/transform'
+import { babelParse } from './src/babel-helpers/parse'
 
 export {
   compileVineStyle,
@@ -45,6 +45,7 @@ export function compileVineTypeScriptFile(
   })
   // Using babel to validate vine declarations
   const root = babelParse(code, {
+    errorRecovery: true,
     sourceType: 'module',
     plugins: [
       'typescript',
@@ -67,10 +68,7 @@ export function compileVineTypeScriptFile(
   const isValidatePass = validateVine(compilerHooks, vineFileCtx, vineCompFnDecls)
   compilerHooks.onValidateEnd?.()
 
-  if (
-    !isValidatePass // Vine validation failed
-    // || vineCompFnDecls.length === 0 // No vine component function declarations found
-  ) {
+  if (!isValidatePass) {
     return vineFileCtx
   }
 

packages/compiler/package.json

@@ -34,6 +34,7 @@
     "@vue/compiler-dom": "^3.3.4",
     "estree-walker": "^2.0.2",
     "hash-sum": "^2.0.0",
+    "line-column": "^1.0.2",
     "magic-string": "^0.30.1",
     "merge-source-map": "^1.1.0",
     "postcss": "^8.4.26",
@@ -45,6 +46,7 @@
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-typescript": "^11.1.2",
     "@types/hash-sum": "^1.0.0",
+    "@types/line-column": "^1.0.0",
     "@vitest/coverage-v8": "^0.33.0",
     "prettier": "^3.0.0",
     "rollup": "^3.26.3",

packages/compiler/src/analyze.ts

@@ -1,5 +1,6 @@
 import hashId from 'hash-sum'
-import { parse, walkIdentifiers } from '@vue/compiler-dom'
+import type { BindingTypes } from '@vue/compiler-dom'
+import { walkIdentifiers } from '@vue/compiler-dom'
 import {
   isArrayPattern,
   isBlockStatement,
@@ -34,7 +35,6 @@ import type {
   VariableDeclaration,
   VariableDeclarator,
 } from '@babel/types'
-import { type BindingTypes } from '@vue/compiler-dom'
 import { VineBindingTypes } from './constants'
 import type {
   BabelFunctionNodeTypes,
@@ -677,7 +677,8 @@ function buildVineCompFnCtx(
     fnDeclNode,
   )
   const scopeId = hashId(`${vineFileCtx.fileId}:${fnName}`)
-  const templateSource = templateStringNode?.quasi.quasis[0].value.raw ?? ''
+  const templateStringQuasiNode = templateStringNode?.quasi.quasis[0]
+  const templateSource = templateStringQuasiNode?.value.raw ?? ''
   const vineCompFnCtx: VineCompFnCtx = {
     isExport: isExportDeclaration(fnDeclNode),
     isAsync: fnItselfNode?.async ?? false,
@@ -689,7 +690,6 @@ function buildVineCompFnCtx(
     templateStringNode,
     templateReturn,
     templateSource,
-    templateAst: parse(templateSource),
     propsAlias: 'props',
     emitsAlias: 'emits',
     props: {},