feat: support VLS in dev mode

fi3ework · Jun 1, 2021 · 3e151cf · 3e151cf
1 parent d6e602d
commit 3e151cf
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 25 deletions.
diff --git a/examples/vue2-ts/src/components/HelloWorld.vue b/examples/vue2-ts/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="hello">
-    <h1>{{ msg1 }}</h1>
+    <h1>{{ msg12 }}</h1>
     <p>
       For a guide and recipes on how to configure / customize this project,<br />
       check out the

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/presets/vls/package.json b/presets/vls/package.json
@@ -30,6 +30,7 @@
   "bugs": "https://github.com/fi3ework/vite-plugin-ts-checker/issues",
   "homepage": "https://github.com/fi3ework/vite-plugin-ts-checker",
   "dependencies": {
+    "chokidar": "^3.5.1",
     "commander": "^7.2.0",
     "vls": "^0.7.2"
   },
@@ -38,15 +39,15 @@
     "vite-plugin-ts-checker": "^0.1.3"
   },
   "devDependencies": {
-    "typescript": "^4.2.2",
-    "vite-plugin-ts-checker": "^0.1.3",
-    "vite": "^2.1.3",
     "@babel/code-frame": "^7.12.13",
     "@types/babel__code-frame": "^7.0.2",
     "@types/glob": "^7.1.3",
     "chalk": "^4.1.1",
     "glob": "^7.1.7",
     "rollup": "^2.47.0",
+    "typescript": "^4.2.2",
+    "vite": "^2.1.3",
+    "vite-plugin-ts-checker": "^0.1.3",
     "vscode-languageclient": "^7.0.0",
     "vscode-languageserver": "^7.0.0",
     "vscode-languageserver-protocol": "^3.16.0",

diff --git a/presets/vls/src/cli.ts b/presets/vls/src/cli.ts
@@ -1,7 +1,9 @@
 import { Command, Option } from 'commander'
+
 import { diagnostics, LogLevel, logLevels } from './commands/diagnostics'
 
 function getVersion(): string {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const { version }: { version: string } = require('../package.json')
   return `v${version}`
 }
@@ -28,9 +30,11 @@ function validateLogLevel(logLevelInput: unknown): logLevelInput is LogLevel {
     )
     .action(async (workspace, options) => {
       const logLevelOption: unknown = options.logLevel
+
       if (!validateLogLevel(logLevelOption)) {
         throw new Error(`Invalid log level: ${logLevelOption}`)
       }
+
       await diagnostics(workspace, logLevelOption)
     })
 

diff --git a/presets/vls/src/commands/diagnostics.ts b/presets/vls/src/commands/diagnostics.ts
@@ -1,4 +1,5 @@
 import chalk from 'chalk'
+import chokidar from 'chokidar'
 import fs from 'fs'
 import glob from 'glob'
 import path from 'path'
@@ -11,6 +12,7 @@ import {
   Diagnostic,
   DiagnosticSeverity,
   DidOpenTextDocumentNotification,
+  DidChangeTextDocumentNotification,
   InitializeParams,
   InitializeRequest,
   InitializeResult,
@@ -34,7 +36,7 @@ const logLevel2Severity = {
   HINT: DiagnosticSeverity.Hint,
 }
 
-export async function diagnostics(workspace: string | null, logLevel: LogLevel) {
+export async function diagnostics(workspace: string | null, logLevel: LogLevel, watch = false) {
   console.log('====================================')
   console.log('Getting Vetur diagnostics')
   let workspaceUri
@@ -48,15 +50,19 @@ export async function diagnostics(workspace: string | null, logLevel: LogLevel)
     workspaceUri = URI.file(process.cwd())
   }
 
-  const errCount = await getDiagnostics(workspaceUri, logLevel2Severity[logLevel])
+  const errCount = await getDiagnostics(workspaceUri, logLevel2Severity[logLevel], watch)
   console.log('====================================')
 
   if (errCount === 0) {
     console.log(chalk.green(`VTI found no error`))
-    process.exit(0)
+    if (!watch) {
+      process.exit(0)
+    }
   } else {
     console.log(chalk.red(`VTI found ${errCount} ${errCount === 1 ? 'error' : 'errors'}`))
-    process.exit(1)
+    if (!watch) {
+      process.exit(1)
+    }
   }
 }
 
@@ -91,6 +97,13 @@ async function prepareClientConnection(workspaceUri: URI) {
     new StreamMessageReader(up),
     new StreamMessageWriter(down)
   )
+
+  // NOTE: hijack sendDiagnostics
+  serverConnection.sendDiagnostics = (diagnostic) => {
+    if (!diagnostic.diagnostics.length) return
+    console.log(chalk.red(JSON.stringify(diagnostic, null, 2)))
+  }
+
   const vls = new VLS(serverConnection as any)
 
   serverConnection.onInitialize(async (params: InitializeParams): Promise<InitializeResult> => {
@@ -127,7 +140,7 @@ function range2Location(range: Range): SourceLocation {
   }
 }
 
-async function getDiagnostics(workspaceUri: URI, severity: DiagnosticSeverity) {
+async function getDiagnostics(workspaceUri: URI, severity: DiagnosticSeverity, watch: boolean) {
   const clientConnection = await prepareClientConnection(workspaceUri)
 
   const files = glob.sync('**/*.vue', { cwd: workspaceUri.fsPath, ignore: ['node_modules/**'] })
@@ -144,6 +157,24 @@ async function getDiagnostics(workspaceUri: URI, severity: DiagnosticSeverity) {
 
   let errCount = 0
 
+  if (watch) {
+    chokidar
+      .watch(workspaceUri.fsPath, {
+        ignored: (path: string) => path.includes('node_modules'),
+        ignoreInitial: true,
+      })
+      .on('all', (event, path) => {
+        if (!path.endsWith('.vue')) return
+        clientConnection.sendNotification(DidChangeTextDocumentNotification.type, {
+          textDocument: {
+            uri: URI.file(path).toString(),
+            version: Date.now(),
+          },
+          contentChanges: [{ text: fs.readFileSync(path, 'utf-8') }],
+        })
+      })
+  }
+
   for (const absFilePath of absFilePaths) {
     const fileText = fs.readFileSync(absFilePath, 'utf-8')
     clientConnection.sendNotification(DidOpenTextDocumentNotification.type, {

diff --git a/presets/vls/src/initParams.ts b/presets/vls/src/initParams.ts
@@ -29,7 +29,7 @@ export function getInitParams(workspaceUri: URI): InitializeParams {
   return init
 }
 
-function getDefaultVLSConfig() {
+export function getDefaultVLSConfig() {
   return {
     vetur: {
       useWorkspaceDependencies: false,

diff --git a/presets/vls/src/main.ts b/presets/vls/src/main.ts
@@ -1,13 +1,22 @@
 import type { UserConfig, ViteDevServer } from 'vite'
 import { CheckerFactory, CreateDiagnostic, PluginOptions } from 'vite-plugin-ts-checker'
+import { diagnostics, logLevels } from './commands/diagnostics'
 
 export const createDiagnostic: CreateDiagnostic = (userOptions = {}) => {
+  let overlay = true // Vite defaults to true
+
   return {
     config: (config: UserConfig) => {
-      // TODO:
+      const hmr = config.server?.hmr
+      const viteOverlay = !(typeof hmr === 'object' && hmr.overlay === false)
+
+      if (userOptions.overlay === false || !viteOverlay) {
+        overlay = false
+      }
     },
-    configureServer(server: ViteDevServer) {
-      // TODO:
+    async configureServer(server: ViteDevServer) {
+      const workDir: string = userOptions.root ?? server.config.root
+      await diagnostics(workDir, 'WARN', true)
     },
   }
 }