feat: distinguish message color for checkers

fi3ework · Feb 6, 2022 · 7aa5674 · 7aa5674
1 parent 2cfa98e
commit 7aa5674
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 33 deletions.
diff --git a/packages/runtime/src/App.svelte b/packages/runtime/src/App.svelte
@@ -57,10 +57,13 @@
   .tip {
     font-size: 12px;
     color: #999;
-    border-top: 1px dotted #999;
     padding-top: 13px;
   }
 
+  code {
+    color: var(--yellow);
+  }
+
   @media (min-width: 640px) {
     main {
       max-width: none;

diff --git a/packages/runtime/src/components/Diagnostic.svelte b/packages/runtime/src/components/Diagnostic.svelte
@@ -1,6 +1,13 @@
 <script>
   export let diagnostic
 
+  const checkerColorMap = {
+    TypeScript: '#3178c6',
+    ESLint: '#7b7fe3',
+    VLS: '#64b587',
+    'vue-tsc': '#64b587',
+  }
+
   const fileRE = /(?:[a-zA-Z]:\\|\/).*?:\d+:\d+/g
   const codeframeRE = /^(?:>?\s+\d+\s+\|.*|\s+\|\s*\^.*)\r?\n/gm
   codeframeRE.lastIndex = 0
@@ -38,7 +45,9 @@
 
 <li class="message-item">
   <pre class="message">
-    <span class="plugin">{`[${diagnostic.plugin}] `}</span>
+    <span class="plugin" style="color: {checkerColorMap[diagnostic.plugin]}"
+      >{`[${diagnostic.plugin}] `}</span
+    >
     <span class="message-body">{message}</span>
   </pre>
   <pre class="file">
@@ -54,7 +63,7 @@
   </pre>
   {#if hasFrame}
     <pre class="frame">
-      <code>
+      <code class="frame-code">
          {diagnostic.frame}
       </code>
     </pre>
@@ -86,12 +95,18 @@
   }
 
   .frame {
+    margin: 1em 0;
     padding: 6px 8px;
     background: #16181d;
-    margin-top: 4px;
+    margin-top: 8px;
     border-radius: 8px;
   }
 
+  .frame-code {
+    color: var(--yellow);
+    font-family: var(--monospace);
+  }
+
   pre::-webkit-scrollbar {
     display: none;
   }
@@ -100,22 +115,13 @@
     color: var(--red);
   }
 
-  .plugin {
-    color: var(--purple);
-  }
-
   .file {
     color: var(--cyan);
     margin-bottom: 0;
     white-space: pre-wrap;
     word-break: break-all;
   }
 
-  .frame {
-    margin: 1em 0;
-    color: var(--yellow);
-  }
-
   .stack {
     font-size: 13px;
     color: var(--dim);

diff --git a/packages/vite-plugin-checker/src/logger.ts b/packages/vite-plugin-checker/src/logger.ts
@@ -105,6 +105,7 @@ export function diagnosticToViteError(
         typeof d.stack === 'string' ? d.stack : Array.isArray(d.stack) ? d.stack.join(os.EOL) : '',
       id: d.id,
       frame: d.stripedCodeFrame,
+      // TODO: do not use Vite's error payload
       plugin: d.checker,
       loc,
     }

diff --git a/playground/multiple-hmr/__tests__/test.spec.ts b/playground/multiple-hmr/__tests__/test.spec.ts
@@ -52,15 +52,15 @@ describe('multiple-hmr', () => {
         proxyConsole: () => proxyConsoleInTest(true),
       })
       await sleepForServerReady()
-      expect(stringify(errors)).toMatchSnapshot()
+      expect(stringify(errors.sort())).toMatchSnapshot()
       expect(stripedLog).toMatchSnapshot()
 
       console.log('-- edit with error --')
       errors = []
       resetReceivedLog()
       editFile('src/App.tsx', (code) => code.replace('useState<string>(1)', 'useState<string>(2)'))
       await sleepForEdit()
-      expect(stringify(errors)).toMatchSnapshot()
+      expect(stringify(errors.sort())).toMatchSnapshot()
       expect(stripedLog).toMatchSnapshot()
 
       console.log('-- fix typescript error --')
@@ -70,15 +70,15 @@ describe('multiple-hmr', () => {
         code.replace('useState<string>(2)', `useState<string>('x')`)
       )
       await sleepForEdit()
-      expect(stringify(errors)).toMatchSnapshot()
+      expect(stringify(errors.sort())).toMatchSnapshot()
       expect(stripedLog).toMatchSnapshot()
 
       console.log('-- fix eslint error --')
       errors = []
       resetReceivedLog()
       editFile('src/App.tsx', (code) => code.replace('var', 'const'))
       await sleepForEdit()
-      expect(stringify(errors)).toMatchSnapshot()
+      expect(stringify(errors.sort())).toMatchSnapshot()
       expect(stripedLog).toMatchSnapshot()
     })
   })

diff --git a/playground/multiple-reload/__tests__/__snapshots__/test.spec.ts.snap b/playground/multiple-reload/__tests__/__snapshots__/test.spec.ts.snap
@@ -1,52 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`multiple-reload serve get initial error and subsequent error 1`] = `"[{\\"frame\\":\\"    1 | import { text } from './text'/n    2 |/n  > 3 | var hello1: number = 'Hello1'/n      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^/n    4 | var hello2: boolean = 'Hello2'/n    5 |/n    6 | const rootDom = document.querySelector('#root')!\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":1,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":3},\\"message\\":\\"Unexpected var, use let or const instead.\\",\\"plugin\\":\\"ESLint\\",\\"stack\\":\\"\\"},{\\"frame\\":\\"    2 |/n    3 | var hello1: number = 'Hello1'/n  > 4 | var hello2: boolean = 'Hello2'/n      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^/n    5 |/n    6 | const rootDom = document.querySelector('#root')!/n    7 | rootDom.innerHTML = hello1 + text\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":1,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":4},\\"message\\":\\"Unexpected var, use let or const instead.\\",\\"plugin\\":\\"ESLint\\",\\"stack\\":\\"\\"},{\\"frame\\":\\"    1 | import { text } from './text'/n    2 |/n  > 3 | var hello1: number = 'Hello1'/n      |     ^^^^^^/n    4 | var hello2: boolean = 'Hello2'/n    5 |/n    6 | const rootDom = document.querySelector('#root')!\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":5,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":3},\\"message\\":\\"Type 'string' is not assignable to type 'number'.\\",\\"plugin\\":\\"TypeScript\\",\\"stack\\":\\"\\"},{\\"frame\\":\\"    2 |/n    3 | var hello1: number = 'Hello1'/n  > 4 | var hello2: boolean = 'Hello2'/n      |     ^^^^^^/n    5 |/n    6 | const rootDom = document.querySelector('#root')!/n    7 | rootDom.innerHTML = hello1 + text\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":5,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":4},\\"message\\":\\"Type 'string' is not assignable to type 'boolean'.\\",\\"plugin\\":\\"TypeScript\\",\\"stack\\":\\"\\"}]"`;
+exports[`multiple-reload serve get initial error and subsequent error 1`] = `"[{\\"frame\\":\\"    1 | import { text } from './text'/n    2 |/n  > 3 | var hello1: number = 'Hello1'/n      |     ^^^^^^/n    4 | var hello2: boolean = 'Hello2'/n    5 |/n    6 | const rootDom = document.querySelector('#root')!\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":5,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":3},\\"message\\":\\"Type 'string' is not assignable to type 'number'.\\",\\"plugin\\":\\"TypeScript\\",\\"stack\\":\\"\\"},{\\"frame\\":\\"    2 |/n    3 | var hello1: number = 'Hello1'/n  > 4 | var hello2: boolean = 'Hello2'/n      |     ^^^^^^/n    5 |/n    6 | const rootDom = document.querySelector('#root')!/n    7 | rootDom.innerHTML = hello1 + text\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":5,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":4},\\"message\\":\\"Type 'string' is not assignable to type 'boolean'.\\",\\"plugin\\":\\"TypeScript\\",\\"stack\\":\\"\\"},{\\"frame\\":\\"    1 | import { text } from './text'/n    2 |/n  > 3 | var hello1: number = 'Hello1'/n      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^/n    4 | var hello2: boolean = 'Hello2'/n    5 |/n    6 | const rootDom = document.querySelector('#root')!\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":1,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":3},\\"message\\":\\"Unexpected var, use let or const instead.\\",\\"plugin\\":\\"ESLint\\",\\"stack\\":\\"\\"},{\\"frame\\":\\"    2 |/n    3 | var hello1: number = 'Hello1'/n  > 4 | var hello2: boolean = 'Hello2'/n      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^/n    5 |/n    6 | const rootDom = document.querySelector('#root')!/n    7 | rootDom.innerHTML = hello1 + text\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":1,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":4},\\"message\\":\\"Unexpected var, use let or const instead.\\",\\"plugin\\":\\"ESLint\\",\\"stack\\":\\"\\"}]"`;
 
 exports[`multiple-reload serve get initial error and subsequent error 2`] = `
-" ERROR(ESLint)  Unexpected var, use let or const instead.
- FILE  <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:3:1
+"
+ ERROR(TypeScript)  Type 'string' is not assignable to type 'number'.
+ FILE  <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:3:5
 
     1 | import { text } from './text'
     2 |
   > 3 | var hello1: number = 'Hello1'
-      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+      |     ^^^^^^
     4 | var hello2: boolean = 'Hello2'
     5 |
     6 | const rootDom = document.querySelector('#root')!
- ERROR(ESLint)  Unexpected var, use let or const instead.
- FILE  <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:4:1
+
+ ERROR(TypeScript)  Type 'string' is not assignable to type 'boolean'.
+ FILE  <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:4:5
 
     2 |
     3 | var hello1: number = 'Hello1'
   > 4 | var hello2: boolean = 'Hello2'
-      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+      |     ^^^^^^
     5 |
     6 | const rootDom = document.querySelector('#root')!
     7 | rootDom.innerHTML = hello1 + text
 
- ERROR(TypeScript)  Type 'string' is not assignable to type 'number'.
- FILE  <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:3:5
+Found 2 errors. Watching for file changes. ERROR(ESLint)  Unexpected var, use let or const instead.
+ FILE  <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:3:1
 
     1 | import { text } from './text'
     2 |
   > 3 | var hello1: number = 'Hello1'
-      |     ^^^^^^
+      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     4 | var hello2: boolean = 'Hello2'
     5 |
     6 | const rootDom = document.querySelector('#root')!
-
- ERROR(TypeScript)  Type 'string' is not assignable to type 'boolean'.
- FILE  <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:4:5
+ ERROR(ESLint)  Unexpected var, use let or const instead.
+ FILE  <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:4:1
 
     2 |
     3 | var hello1: number = 'Hello1'
   > 4 | var hello2: boolean = 'Hello2'
-      |     ^^^^^^
+      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     5 |
     6 | const rootDom = document.querySelector('#root')!
     7 | rootDom.innerHTML = hello1 + text
-
-Found 2 errors. Watching for file changes."
+"
 `;
 
 exports[`multiple-reload serve get initial error and subsequent error 3`] = `"[{\\"frame\\":\\"    1 | import { text } from './text'/n    2 |/n  > 3 | var hello1: number = 'Hello1~'/n      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^/n    4 | var hello2: boolean = 'Hello2'/n    5 |/n    6 | const rootDom = document.querySelector('#root')!\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":1,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":3},\\"message\\":\\"Unexpected var, use let or const instead.\\",\\"plugin\\":\\"ESLint\\",\\"stack\\":\\"\\"},{\\"frame\\":\\"    2 |/n    3 | var hello1: number = 'Hello1~'/n  > 4 | var hello2: boolean = 'Hello2'/n      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^/n    5 |/n    6 | const rootDom = document.querySelector('#root')!/n    7 | rootDom.innerHTML = hello1 + text\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":1,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":4},\\"message\\":\\"Unexpected var, use let or const instead.\\",\\"plugin\\":\\"ESLint\\",\\"stack\\":\\"\\"},{\\"frame\\":\\"    1 | import { text } from './text'/n    2 |/n  > 3 | var hello1: number = 'Hello1~'/n      |     ^^^^^^/n    4 | var hello2: boolean = 'Hello2'/n    5 |/n    6 | const rootDom = document.querySelector('#root')!\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":5,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":3},\\"message\\":\\"Type 'string' is not assignable to type 'number'.\\",\\"plugin\\":\\"TypeScript\\",\\"stack\\":\\"\\"},{\\"frame\\":\\"    2 |/n    3 | var hello1: number = 'Hello1~'/n  > 4 | var hello2: boolean = 'Hello2'/n      |     ^^^^^^/n    5 |/n    6 | const rootDom = document.querySelector('#root')!/n    7 | rootDom.innerHTML = hello1 + text\\",\\"id\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"loc\\":{\\"column\\":5,\\"file\\":\\"<PROJECT_ROOT>/temp/multiple-reload/src/main.ts\\",\\"line\\":4},\\"message\\":\\"Type 'string' is not assignable to type 'boolean'.\\",\\"plugin\\":\\"TypeScript\\",\\"stack\\":\\"\\"}]"`;