Skip to content

Commit 7aa5674

Browse files
fi3eworkfi3ework
committed
feat: distinguish message color for checkers
1 parent 2cfa98e commit 7aa5674

File tree

5 files changed

+43
-33
lines changed

5 files changed

+43
-33
lines changed

‎packages/runtime/src/App.svelte

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,13 @@
5757
.tip {
5858
font-size: 12px;
5959
color: #999;
60-
border-top: 1px dotted #999;
6160
padding-top: 13px;
6261
}
6362
63+
code {
64+
color: var(--yellow);
65+
}
66+
6467
@media (min-width: 640px) {
6568
main {
6669
max-width: none;

‎packages/runtime/src/components/Diagnostic.svelte

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
<script>
22
export let diagnostic
33
4+
const checkerColorMap = {
5+
TypeScript: '#3178c6',
6+
ESLint: '#7b7fe3',
7+
VLS: '#64b587',
8+
'vue-tsc': '#64b587',
9+
}
10+
411
const fileRE = /(?:[a-zA-Z]:\\|\/).*?:\d+:\d+/g
512
const codeframeRE = /^(?:>?\s+\d+\s+\|.*|\s+\|\s*\^.*)\r?\n/gm
613
codeframeRE.lastIndex = 0
@@ -38,7 +45,9 @@
3845
3946
<li class="message-item">
4047
<pre class="message">
41-
<span class="plugin">{`[${diagnostic.plugin}] `}</span>
48+
<span class="plugin" style="color: {checkerColorMap[diagnostic.plugin]}"
49+
>{`[${diagnostic.plugin}] `}</span
50+
>
4251
<span class="message-body">{message}</span>
4352
</pre>
4453
<pre class="file">
@@ -54,7 +63,7 @@
5463
</pre>
5564
{#if hasFrame}
5665
<pre class="frame">
57-
<code>
66+
<code class="frame-code">
5867
{diagnostic.frame}
5968
</code>
6069
</pre>
@@ -86,12 +95,18 @@
8695
}
8796
8897
.frame {
98+
margin: 1em 0;
8999
padding: 6px 8px;
90100
background: #16181d;
91-
margin-top: 4px;
101+
margin-top: 8px;
92102
border-radius: 8px;
93103
}
94104
105+
.frame-code {
106+
color: var(--yellow);
107+
font-family: var(--monospace);
108+
}
109+
95110
pre::-webkit-scrollbar {
96111
display: none;
97112
}
@@ -100,22 +115,13 @@
100115
color: var(--red);
101116
}
102117
103-
.plugin {
104-
color: var(--purple);
105-
}
106-
107118
.file {
108119
color: var(--cyan);
109120
margin-bottom: 0;
110121
white-space: pre-wrap;
111122
word-break: break-all;
112123
}
113124
114-
.frame {
115-
margin: 1em 0;
116-
color: var(--yellow);
117-
}
118-
119125
.stack {
120126
font-size: 13px;
121127
color: var(--dim);

‎packages/vite-plugin-checker/src/logger.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export function diagnosticToViteError(
105105
typeof d.stack === 'string' ? d.stack : Array.isArray(d.stack) ? d.stack.join(os.EOL) : '',
106106
id: d.id,
107107
frame: d.stripedCodeFrame,
108+
// TODO: do not use Vite's error payload
108109
plugin: d.checker,
109110
loc,
110111
}

‎playground/multiple-hmr/__tests__/test.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,15 @@ describe('multiple-hmr', () => {
5252
proxyConsole: () => proxyConsoleInTest(true),
5353
})
5454
await sleepForServerReady()
55-
expect(stringify(errors)).toMatchSnapshot()
55+
expect(stringify(errors.sort())).toMatchSnapshot()
5656
expect(stripedLog).toMatchSnapshot()
5757

5858
console.log('-- edit with error --')
5959
errors = []
6060
resetReceivedLog()
6161
editFile('src/App.tsx', (code) => code.replace('useState<string>(1)', 'useState<string>(2)'))
6262
await sleepForEdit()
63-
expect(stringify(errors)).toMatchSnapshot()
63+
expect(stringify(errors.sort())).toMatchSnapshot()
6464
expect(stripedLog).toMatchSnapshot()
6565

6666
console.log('-- fix typescript error --')
@@ -70,15 +70,15 @@ describe('multiple-hmr', () => {
7070
code.replace('useState<string>(2)', `useState<string>('x')`)
7171
)
7272
await sleepForEdit()
73-
expect(stringify(errors)).toMatchSnapshot()
73+
expect(stringify(errors.sort())).toMatchSnapshot()
7474
expect(stripedLog).toMatchSnapshot()
7575

7676
console.log('-- fix eslint error --')
7777
errors = []
7878
resetReceivedLog()
7979
editFile('src/App.tsx', (code) => code.replace('var', 'const'))
8080
await sleepForEdit()
81-
expect(stringify(errors)).toMatchSnapshot()
81+
expect(stringify(errors.sort())).toMatchSnapshot()
8282
expect(stripedLog).toMatchSnapshot()
8383
})
8484
})

‎playground/multiple-reload/__tests__/__snapshots__/test.spec.ts.snap

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,52 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
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\\":\\"\\"}]"`;
3+
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\\":\\"\\"}]"`;
44

55
exports[`multiple-reload serve get initial error and subsequent error 2`] = `
6-
" ERROR(ESLint) Unexpected var, use let or const instead.
7-
FILE <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:3:1
6+
"
7+
ERROR(TypeScript) Type 'string' is not assignable to type 'number'.
8+
FILE <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:3:5
89
910
1 | import { text } from './text'
1011
2 |
1112
> 3 | var hello1: number = 'Hello1'
12-
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13+
| ^^^^^^
1314
4 | var hello2: boolean = 'Hello2'
1415
5 |
1516
6 | const rootDom = document.querySelector('#root')!
16-
ERROR(ESLint) Unexpected var, use let or const instead.
17-
FILE <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:4:1
17+
18+
ERROR(TypeScript) Type 'string' is not assignable to type 'boolean'.
19+
FILE <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:4:5
1820
1921
2 |
2022
3 | var hello1: number = 'Hello1'
2123
> 4 | var hello2: boolean = 'Hello2'
22-
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
24+
| ^^^^^^
2325
5 |
2426
6 | const rootDom = document.querySelector('#root')!
2527
7 | rootDom.innerHTML = hello1 + text
2628
27-
ERROR(TypeScript) Type 'string' is not assignable to type 'number'.
28-
FILE <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:3:5
29+
Found 2 errors. Watching for file changes. ERROR(ESLint) Unexpected var, use let or const instead.
30+
FILE <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:3:1
2931
3032
1 | import { text } from './text'
3133
2 |
3234
> 3 | var hello1: number = 'Hello1'
33-
| ^^^^^^
35+
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3436
4 | var hello2: boolean = 'Hello2'
3537
5 |
3638
6 | const rootDom = document.querySelector('#root')!
37-
38-
ERROR(TypeScript) Type 'string' is not assignable to type 'boolean'.
39-
FILE <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:4:5
39+
ERROR(ESLint) Unexpected var, use let or const instead.
40+
FILE <PROJECT_ROOT>/temp/multiple-reload/src/main.ts:4:1
4041
4142
2 |
4243
3 | var hello1: number = 'Hello1'
4344
> 4 | var hello2: boolean = 'Hello2'
44-
| ^^^^^^
45+
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4546
5 |
4647
6 | const rootDom = document.querySelector('#root')!
4748
7 | rootDom.innerHTML = hello1 + text
48-
49-
Found 2 errors. Watching for file changes."
49+
"
5050
`;
5151
5252
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\\":\\"\\"}]"`;

0 commit comments

Comments
 (0)