Skip to content

Commit 2fde8ec

Browse files
mizdramizdra
authored
Format diagnostics and system errors by TypeScript Compiler API (#159)
* feat: format diagnostics and system errors by TypeScript Compiler API * chore: add changelog * test: update snapshot
1 parent b8c8198 commit 2fde8ec

File tree

9 files changed

+156
-111
lines changed

9 files changed

+156
-111
lines changed

‎.changeset/mighty-cooks-rule.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@css-modules-kit/codegen': minor
3+
'@css-modules-kit/core': minor
4+
---
5+
6+
feat: format diagnostics and system errors by TypeScript Compiler API

‎packages/codegen/e2e/index.test.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,8 @@ test('reports system error', async () => {
9494
});
9595
expect(cmk.status).toBe(1);
9696
expect(cmk.stderr.toString()).toMatchInlineSnapshot(`
97-
"error TS_CONFIG_NOT_FOUND: No tsconfig.json found.
97+
"error: No tsconfig.json found.
98+
9899
"
99100
`);
100101
});

‎packages/codegen/src/logger/formatter.test.ts

+63-43
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,68 @@
1-
import { type Diagnostic, type DiagnosticWithLocation, SystemError } from '@css-modules-kit/core';
2-
import { describe, expect, test } from 'vitest';
3-
import { formatDiagnostic, formatSystemError } from './formatter';
1+
import dedent from 'dedent';
2+
import ts from 'typescript';
3+
import { describe, expect, it } from 'vitest';
4+
import { formatDiagnostics } from './formatter';
45

5-
const cwd = '/app';
6+
describe('formatDiagnostics', () => {
7+
const file = ts.createSourceFile(
8+
'/app/test.module.css',
9+
dedent`
10+
.a_1 { color: red; }
11+
.a_2 { color: red; }
12+
`,
13+
ts.ScriptTarget.JSON,
14+
undefined,
15+
ts.ScriptKind.Unknown,
16+
);
17+
const host: ts.FormatDiagnosticsHost = {
18+
getCurrentDirectory: () => '/app',
19+
getCanonicalFileName: (fileName) => fileName,
20+
getNewLine: () => '\n',
21+
};
22+
const diagnostics: ts.Diagnostic[] = [
23+
{
24+
file,
25+
start: 1,
26+
length: 3,
27+
messageText: '`a_1` is not allowed',
28+
category: ts.DiagnosticCategory.Error,
29+
code: 0,
30+
},
31+
{
32+
file,
33+
start: 22,
34+
length: 3,
35+
messageText: '`a_2` is not allowed',
36+
category: ts.DiagnosticCategory.Error,
37+
code: 0,
38+
},
39+
];
640

7-
describe('formatDiagnostic', () => {
8-
test('should format diagnostic without filename and start position', () => {
9-
const diagnostic: Diagnostic = { category: 'error', text: 'text' };
10-
const result = formatDiagnostic(diagnostic, cwd, false);
11-
expect(result).toMatchInlineSnapshot(`"error: text"`);
12-
});
13-
test('should format diagnostic with filename and start position', () => {
14-
const diagnostic: DiagnosticWithLocation = {
15-
file: { fileName: '/app/path/to/file.ts', text: 'abcdef' },
16-
start: { line: 1, column: 2 },
17-
length: 1,
18-
category: 'error',
19-
text: 'text',
20-
};
21-
const result = formatDiagnostic(diagnostic, cwd, false);
22-
expect(result).toMatchInlineSnapshot(`"path/to/file.ts:1:2 - error: text"`);
23-
});
24-
test('should format diagnostic with error category', () => {
25-
const diagnostic: Diagnostic = {
26-
category: 'error',
27-
text: 'error text',
28-
};
29-
const result = formatDiagnostic(diagnostic, cwd, false);
30-
expect(result).toMatchInlineSnapshot(`"error: error text"`);
31-
});
32-
test('should format diagnostic with warning category', () => {
33-
const diagnostic: Diagnostic = {
34-
category: 'warning',
35-
text: 'warning text',
36-
};
37-
const result = formatDiagnostic(diagnostic, cwd, false);
38-
expect(result).toMatchInlineSnapshot(`"warning: warning text"`);
41+
it('formats diagnostics with color and context when pretty is true', () => {
42+
const result = formatDiagnostics(diagnostics, host, true);
43+
expect(result).toMatchInlineSnapshot(`
44+
"test.module.css:1:2 - error: \`a_1\` is not allowed
45+
46+
1 .a_1 { color: red; }
47+
   ~~~
48+
49+
test.module.css:2:2 - error: \`a_2\` is not allowed
50+
51+
2 .a_2 { color: red; }
52+
   ~~~
53+
54+
"
55+
`);
3956
});
40-
});
4157

42-
test('formatSystemError', () => {
43-
expect(formatSystemError(new SystemError('CODE', 'message'), false)).toMatchInlineSnapshot(`"error CODE: message"`);
44-
const cause = new Error('msg2');
45-
expect(formatSystemError(new SystemError('CODE', 'msg1', cause), false)).toMatch(
46-
/error CODE: msg1\n {2}\[cause\]: Error: msg2\n {6}at .*/mu,
47-
);
58+
it('formats diagnostics without color and context when pretty is false', () => {
59+
const result = formatDiagnostics(diagnostics, host, false);
60+
expect(result).toMatchInlineSnapshot(`
61+
"test.module.css(1,2): error: \`a_1\` is not allowed
62+
63+
test.module.css(2,2): error: \`a_2\` is not allowed
64+
65+
"
66+
`);
67+
});
4868
});

‎packages/codegen/src/logger/formatter.ts

+10-56
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,14 @@
1-
import { inspect, styleText } from 'node:util';
2-
import {
3-
type Diagnostic,
4-
type DiagnosticCategory,
5-
type DiagnosticPosition,
6-
relative,
7-
type SystemError,
8-
} from '@css-modules-kit/core';
9-
10-
function color(color: Parameters<typeof styleText>[0], text: string, pretty: boolean): string {
11-
return pretty ? styleText(color, text) : text;
12-
}
13-
14-
export function formatDiagnostic(diagnostic: Diagnostic, cwd: string, pretty: boolean): string {
15-
let result = '';
16-
if ('file' in diagnostic) {
17-
result += `${formatLocation(diagnostic.file.fileName, diagnostic.start, cwd, pretty)} - `;
18-
}
19-
result += `${formatCategory(diagnostic.category, pretty)}: `;
20-
result += diagnostic.text;
21-
// TODO(#124): Add source code if diagnostics has a location
22-
return result;
23-
}
24-
25-
export function formatSystemError(error: SystemError, pretty: boolean): string {
1+
import ts from 'typescript';
2+
3+
export function formatDiagnostics(
4+
diagnostics: ts.Diagnostic[],
5+
host: ts.FormatDiagnosticsHost,
6+
pretty: boolean,
7+
): string {
8+
const format = pretty ? ts.formatDiagnosticsWithColorAndContext : ts.formatDiagnostics;
269
let result = '';
27-
result += `${formatCategory('error', pretty)}`;
28-
result += ' ';
29-
result += color('gray', error.code, pretty);
30-
result += ': ';
31-
result += error.message;
32-
if (error.cause !== undefined) {
33-
result += '\n';
34-
result += `[cause]: ${inspect(error.cause, { colors: pretty })}`.replace(/^/gmu, ' ');
10+
for (const diagnostic of diagnostics) {
11+
result += format([diagnostic], host).replace(` TS${diagnostic.code}`, '') + host.getNewLine();
3512
}
3613
return result;
3714
}
38-
39-
function formatLocation(fileName: string, start: DiagnosticPosition | undefined, cwd: string, pretty: boolean): string {
40-
let result = '';
41-
result += color('cyan', relative(cwd, fileName), pretty);
42-
if (start !== undefined) {
43-
result += ':';
44-
result += color('yellow', start.line.toString(), pretty);
45-
result += ':';
46-
result += color('yellow', start.column.toString(), pretty);
47-
}
48-
return result;
49-
}
50-
51-
function formatCategory(category: DiagnosticCategory, pretty: boolean): string {
52-
switch (category) {
53-
case 'error':
54-
return color('red', 'error', pretty);
55-
case 'warning':
56-
return color('yellow', 'warning', pretty);
57-
default:
58-
throw new Error(`Unknown diagnostic category: ${String(category)}`);
59-
}
60-
}

‎packages/codegen/src/logger/logger.test.ts

+31-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { stripVTControlCharacters } from 'node:util';
12
import { type Diagnostic, SystemError } from '@css-modules-kit/core';
23
import { describe, expect, test, vi } from 'vitest';
4+
import { ReadCSSModuleFileError } from '../error.js';
35
import { createLogger } from './logger.js';
46

57
const stdoutWriteSpy = vi.spyOn(process.stdout, 'write').mockImplementation(() => true);
@@ -13,14 +15,41 @@ describe('createLogger', () => {
1315
const diagnostics: Diagnostic[] = [
1416
{ text: 'text1', category: 'error' },
1517
{ text: 'text2', category: 'error' },
18+
{
19+
text: 'text3',
20+
category: 'error',
21+
file: { fileName: '/app/a.module.css', text: '.foo {}' },
22+
start: { line: 1, column: 2 },
23+
length: 3,
24+
},
1625
];
1726
logger.logDiagnostics(diagnostics);
18-
expect(stderrWriteSpy).toHaveBeenCalledWith('error: text1\n\nerror: text2\n\n');
27+
expect(stripVTControlCharacters(stderrWriteSpy.mock.lastCall![0] as string)).toMatchInlineSnapshot(`
28+
"error: text1
29+
30+
error: text2
31+
32+
a.module.css(1,2): error: text3
33+
34+
"
35+
`);
1936
});
2037
test('logSystemError', () => {
2138
const logger = createLogger(cwd, false);
2239
logger.logSystemError(new SystemError('CODE', 'message'));
23-
expect(stderrWriteSpy).toHaveBeenCalledWith('error CODE: message\n');
40+
expect(stripVTControlCharacters(stderrWriteSpy.mock.lastCall![0] as string)).toMatchInlineSnapshot(`
41+
"error: message
42+
43+
"
44+
`);
45+
logger.logSystemError(
46+
new ReadCSSModuleFileError('/app/a.module.css', new Error('EACCES: permission denied, open ...')),
47+
);
48+
expect(stripVTControlCharacters(stderrWriteSpy.mock.lastCall![0] as string)).toMatchInlineSnapshot(`
49+
"error: Failed to read CSS Module file /app/a.module.css.: EACCES: permission denied, open ...
50+
51+
"
52+
`);
2453
});
2554
test('logMessage', () => {
2655
const logger = createLogger(cwd, false);

‎packages/codegen/src/logger/logger.ts

+21-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import type { Diagnostic, SystemError } from '@css-modules-kit/core';
2-
import { formatDiagnostic, formatSystemError } from './formatter.js';
1+
import type { DiagnosticSourceFile } from '@css-modules-kit/core';
2+
import { convertDiagnostic, convertSystemError, type Diagnostic, type SystemError } from '@css-modules-kit/core';
3+
import ts from 'typescript';
4+
import { formatDiagnostics } from './formatter.js';
35

46
export interface Logger {
57
logDiagnostics(diagnostics: Diagnostic[]): void;
@@ -8,16 +10,28 @@ export interface Logger {
810
}
911

1012
export function createLogger(cwd: string, pretty: boolean): Logger {
13+
const host: ts.FormatDiagnosticsHost = {
14+
getCurrentDirectory: () => cwd,
15+
getCanonicalFileName: (fileName) => (ts.sys.useCaseSensitiveFileNames ? fileName : fileName.toLowerCase()),
16+
getNewLine: () => ts.sys.newLine,
17+
};
18+
19+
function getSourceFile(file: DiagnosticSourceFile): ts.SourceFile {
20+
return ts.createSourceFile(file.fileName, file.text, ts.ScriptTarget.JSON, undefined, ts.ScriptKind.Unknown);
21+
}
22+
1123
return {
1224
logDiagnostics(diagnostics: Diagnostic[]): void {
13-
let result = '';
14-
for (const diagnostic of diagnostics) {
15-
result += `${formatDiagnostic(diagnostic, cwd, pretty)}\n\n`;
16-
}
25+
const result = formatDiagnostics(
26+
diagnostics.map((d) => convertDiagnostic(d, getSourceFile)),
27+
host,
28+
pretty,
29+
);
1730
process.stderr.write(result);
1831
},
1932
logSystemError(error: SystemError): void {
20-
process.stderr.write(`${formatSystemError(error, pretty)}\n`);
33+
const result = formatDiagnostics([convertSystemError(error)], host, pretty);
34+
process.stderr.write(result);
2135
},
2236
logMessage(message: string): void {
2337
process.stdout.write(`${message}\n`);

‎packages/core/src/diagnostic.ts

+21
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import ts from 'typescript';
2+
import type { SystemError } from './error.js';
23
import type { Diagnostic, DiagnosticSourceFile, DiagnosticWithLocation } from './type.js';
34

45
/** The error code used by tsserver to display the css-modules-kit error in the editor. */
@@ -54,3 +55,23 @@ export function convertDiagnosticWithLocation(
5455
source: TS_ERROR_SOURCE,
5556
};
5657
}
58+
59+
export function convertSystemError(systemError: SystemError): ts.Diagnostic {
60+
let messageText = systemError.message;
61+
if (systemError.cause) {
62+
if (systemError.cause instanceof Error) {
63+
messageText += `: ${systemError.cause.message}`;
64+
} else {
65+
messageText += `: ${JSON.stringify(systemError.cause)}`;
66+
}
67+
}
68+
return {
69+
file: undefined,
70+
start: undefined,
71+
length: undefined,
72+
category: ts.DiagnosticCategory.Error,
73+
messageText,
74+
code: TS_ERROR_CODE,
75+
source: TS_ERROR_SOURCE,
76+
};
77+
}

‎packages/core/src/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export {
1515
type Resolver,
1616
type MatchesPattern,
1717
type ExportBuilder,
18+
type DiagnosticSourceFile,
1819
type Diagnostic,
1920
type DiagnosticWithLocation,
2021
type DiagnosticCategory,
@@ -36,4 +37,4 @@ export { checkCSSModule } from './checker.js';
3637
export { createExportBuilder } from './export-builder.js';
3738
export { join, resolve, relative, dirname, basename, parse, matchesGlob, isAbsolute } from './path.js';
3839
export { findUsedTokenNames } from './util.js';
39-
export { convertDiagnostic, convertDiagnosticWithLocation } from './diagnostic.js';
40+
export { convertDiagnostic, convertDiagnosticWithLocation, convertSystemError } from './diagnostic.js';

‎packages/core/src/type.ts

-1
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,6 @@ interface DiagnosticWithoutLocation {
166166
text: string;
167167
/** The category of the diagnostic message. */
168168
category: DiagnosticCategory;
169-
// TODO: Add error code
170169
}
171170

172171
export interface DiagnosticWithLocation extends DiagnosticWithoutLocation {

0 commit comments

Comments
 (0)