feat: show formatted frame

fi3ework · Mar 29, 2021 · 4025c4f · 4025c4f
1 parent 9a9eca8
commit 4025c4f
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "commander": "^7.1.0",
     "debug": "^4.3.1",
     "esbuild": "^0.8.52",
-    "log-update": "^4.0.0"
+    "log-update": "^4.0.0",
+    "strip-ansi": "^6.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/apiMode.ts b/src/apiMode.ts
@@ -1,5 +1,8 @@
 import { ErrorPayload } from 'vite'
+import { createFrame } from './codeFrame'
 import ts from 'typescript'
+import os from 'os'
+import strip from 'strip-ansi'
 
 import type { UserConfig, ViteDevServer } from 'vite'
 interface DiagnoseOptions {
@@ -24,9 +27,29 @@ function toViteError(d: ts.Diagnostic): ErrorPayload['err'] {
     }
   }
 
+  // has detail message
+  if (d.file && typeof d.start === 'number' && typeof d.length === 'number') {
+    return {
+      message: strip(
+        ts.flattenDiagnosticMessageText(d.messageText, formatHost.getNewLine()) +
+          os.EOL +
+          os.EOL +
+          createFrame({
+            source: d.file!.text,
+            start: d.file?.getLineAndCharacterOfPosition(d.start),
+            end: d.file?.getLineAndCharacterOfPosition(d.start + d.length),
+          })
+      ),
+      stack: '',
+      id: d.file?.fileName,
+      plugin: 'vite-plugin-fork-ts-checker',
+      loc,
+    }
+  }
+
+  // no detail message
   return {
-    // message: ts.flattenDiagnosticMessageText(d.messageText, formatHost.getNewLine()),
-    message: d.messageText.toString() + d.file?.getText(),
+    message: ts.flattenDiagnosticMessageText(d.messageText, formatHost.getNewLine()),
     stack: '',
     id: d.file?.fileName,
     plugin: 'vite-plugin-fork-ts-checker',
@@ -38,7 +61,6 @@ function toViteError(d: ts.Diagnostic): ErrorPayload['err'] {
  * Prints a diagnostic every time the watch status changes.
  * This is mainly for messages like "Starting compilation" or "Compilation completed".
  */
-
 export function createDiagnosis(userOptions: Partial<DiagnoseOptions> = {}) {
   let overlay = true // Vite default to true
   let currErr: ErrorPayload['err'] | null = null
@@ -74,10 +96,8 @@ export function createDiagnosis(userOptions: Partial<DiagnoseOptions> = {}) {
           ':',
           ts.flattenDiagnosticMessageText(diagnostic.messageText, formatHost.getNewLine())
         )
-        // return toViteError(diagnostic)
 
         if (!currErr) {
-          console.log('🔥', diagnostic)
           currErr = toViteError(diagnostic)
         }
       }
@@ -96,12 +116,7 @@ export function createDiagnosis(userOptions: Partial<DiagnoseOptions> = {}) {
             currErr = null
             break
           case 6193: // 1 Error
-          // currErr = toViteError(diagnostic)
           case 6194: // 0 errors or 2+ errors
-            // if (errorCount !== 0 && !currErr) {
-            //   currErr = toViteError(diagnostic)
-            // }
-
             if (currErr) {
               server.ws.send({
                 type: 'error',

diff --git a/src/codeFrame.ts b/src/codeFrame.ts
@@ -1,14 +1,30 @@
-import { codeFrameColumns } from '@babel/code-frame'
+import os from 'os'
+import ts from 'typescript'
 
-const rawLines = `class Foo {
-  constructor() {
-    console.log("hello");
-  }
-}`
-const location = { start: { line: 2, column: 17 }, end: { line: 4, column: 3 } }
+import { codeFrameColumns } from '@babel/code-frame'
 
-const result = codeFrameColumns(rawLines, location, {
-  /* options */
-})
+export function createFrame({
+  source,
+  start,
+  end,
+}: {
+  source: string // file source code
+  start: ts.LineAndCharacter
+  end: ts.LineAndCharacter
+}) {
+  const frame = codeFrameColumns(
+    source,
+    {
+      start: { line: start.line + 1, column: start.character + 1 },
+      end: { line: end.line + 1, column: end.character + 1 },
+    },
+    {
+      highlightCode: true,
+    }
+  )
+    .split('\n')
+    .map((line) => '  ' + line)
+    .join(os.EOL)
 
-console.log(result)
+  return frame
+}