fix(eslint): do not flush existing errors on changing file (#55)

fi3ework · Jul 25, 2021 · 4f7abbe · 4f7abbe
1 parent 9e46176
commit 4f7abbe
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,6 @@
     "@types/babel__code-frame": "^7.0.2",
     "@types/debug": "^4.1.5",
     "@types/fs-extra": "^9.0.11",
-    "@types/glob": "^7.1.3",
     "@types/jest": "^26.0.23",
     "@types/node": "^14.14.31",
     "@types/prompts": "^2.0.13",

diff --git a/packages/vite-plugin-checker/src/Checker.ts b/packages/vite-plugin-checker/src/Checker.ts
@@ -24,7 +24,6 @@ export interface CheckerMeta<T extends BuildInCheckerNames> {
 export abstract class Checker<T extends BuildInCheckerNames> implements CheckerMeta<T> {
   public static watcher: chokidar.FSWatcher = chokidar.watch([], {
     ignored: (path: string) => path.includes('node_modules'),
-    ignoreInitial: false,
   })
 
   public name: string

diff --git a/packages/vite-plugin-checker/src/checkers/eslint/main.ts b/packages/vite-plugin-checker/src/checkers/eslint/main.ts
@@ -18,7 +18,6 @@ import type { ErrorPayload } from 'vite'
 
 const createDiagnostic: CreateDiagnostic<'eslint'> = (pluginConfig) => {
   let overlay = true // Vite defaults to true
-  let currErr: ErrorPayload['err'] | null = null
 
   return {
     config: async ({ hmr }) => {
@@ -32,6 +31,7 @@ const createDiagnostic: CreateDiagnostic<'eslint'> = (pluginConfig) => {
 
       const extensions = pluginConfig.eslint.extensions ?? ['.js']
       const eslint = new ESLint({
+        cwd: root,
         extensions,
       })
       invariant(pluginConfig.eslint, 'config.eslint should not be `false`')
@@ -45,21 +45,14 @@ const createDiagnostic: CreateDiagnostic<'eslint'> = (pluginConfig) => {
           ? [pluginConfig.eslint.files]
           : pluginConfig.eslint.files
 
-      const diagnosticsCache: Record<string, NormalizedDiagnostic[]> = {}
+      let diagnosticsCache: NormalizedDiagnostic[] = []
 
-      Checker.watcher.add(paths)
-      Checker.watcher.on('all', async (event, filePath) => {
-        if (!['add', 'change'].includes(event)) return
-        if (!extensions.includes(path.extname(filePath))) return
-
-        const diagnostics = await eslint.lintFiles(filePath)
-        const normalized = diagnostics.map((p) => normalizeEslintDiagnostic(p)).flat(1)
-        normalized.forEach((n) => {
+      const dispatchDiagnostics = () => {
+        diagnosticsCache.forEach((n) => {
           console.log(diagnosticToTerminalLog(n, 'ESLint'))
         })
-        diagnosticsCache[filePath] = normalized
 
-        const lastErr = normalized[0]
+        const lastErr = diagnosticsCache[0]
 
         if (!lastErr) return
 
@@ -72,6 +65,38 @@ const createDiagnostic: CreateDiagnostic<'eslint'> = (pluginConfig) => {
             },
           })
         }
+      }
+
+      const handleFileChange = async (filePath: string, type: 'change' | 'unlink') => {
+        if (!extensions.includes(path.extname(filePath))) return
+
+        if (type === 'unlink') {
+          const absPath = path.resolve(root, filePath)
+          diagnosticsCache = diagnosticsCache.filter((d) => d.id !== absPath)
+        } else if (type === 'change') {
+          const diagnosticsOfChangedFile = await eslint.lintFiles(filePath)
+          const newDiagnostics = diagnosticsOfChangedFile
+            .map((d) => normalizeEslintDiagnostic(d))
+            .flat(1)
+          const absPath = diagnosticsOfChangedFile[0].filePath
+          diagnosticsCache = diagnosticsCache.filter((d) => d.id !== absPath).concat(newDiagnostics)
+        }
+
+        dispatchDiagnostics()
+      }
+
+      // initial lint
+      const diagnostics = await eslint.lintFiles(paths)
+      diagnosticsCache = diagnostics.map((p) => normalizeEslintDiagnostic(p)).flat(1)
+      dispatchDiagnostics()
+
+      // watch lint
+      Checker.watcher.add(paths)
+      Checker.watcher.on('change', async (filePath) => {
+        handleFileChange(filePath, 'change')
+      })
+      Checker.watcher.on('unlink', async (filePath) => {
+        handleFileChange(filePath, 'unlink')
       })
     },
   }
@@ -104,7 +129,6 @@ export class EslintChecker extends Checker<'eslint'> {
   public init() {
     const createServeAndBuild = super.initMainThread()
     module.exports.createServeAndBuild = createServeAndBuild
-
     super.initWorkerThread()
   }
 }

diff --git a/playground/vanilla-ts/__tests__/__snapshots__/test.spec.ts.snap b/playground/vanilla-ts/__tests__/__snapshots__/test.spec.ts.snap
@@ -53,6 +53,22 @@ exports[`eslint serve get initial error and subsequent error 5`] = `
 "
 `;
 
+exports[`eslint serve get initial error and subsequent error 6`] = `
+"HH:MM:SS AM [vite] page reload src/text.ts
+ ERROR(ESLint)  Unexpected var, use let or const instead.
+ FILE  <PROJECT_ROOT>/temp/vanilla-ts/src/main.ts:3:1
+
+    1 | import { text } from './text'
+    2 |
+  > 3 | var hello = 'Hello~'
+      | ^^^^^^^^^^^^^^^^^^^^
+    4 |
+    5 | const rootDom = document.querySelector('#root')!
+    6 | rootDom.innerHTML = hello + text
+
+"
+`;
+
 exports[`eslint serve overlay: false 1`] = `
 "
   vite v2.3.8 dev server running at:

diff --git a/playground/vanilla-ts/__tests__/test.spec.ts b/playground/vanilla-ts/__tests__/test.spec.ts
@@ -47,11 +47,16 @@ describe('eslint', () => {
       expect(frame1).toMatchSnapshot()
       expect(stripedLog).toMatchSnapshot()
 
-      console.log('-- edit file --')
+      console.log('-- edit error file --')
       resetTerminalLog()
       editFile('src/main.ts', (code) => code.replace(`'Hello'`, `'Hello~'`))
       await sleep(process.env.CI ? 5000 : 2000)
-      await pollingUntil(getHmrOverlay, (dom) => !!dom)
+      expect(stripedLog).toMatchSnapshot()
+
+      console.log('-- edit non error file --')
+      resetTerminalLog()
+      editFile('src/text.ts', (code) => code.replace(`Vanilla`, `vanilla`))
+      await sleep(process.env.CI ? 5000 : 2000)
       expect(stripedLog).toMatchSnapshot()
     })
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml