feat: display code frame

fi3ework · Mar 29, 2021 · 9a9eca8 · 9a9eca8
1 parent 028c4ab
commit 9a9eca8
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 24 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "typescript": "3.x || 4.x"
   },
   "devDependencies": {
+    "@types/babel__code-frame": "^7.0.2",
     "@types/debug": "^4.1.5",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.31",
@@ -44,6 +45,7 @@
   },
   "homepage": "https://github.com/fi3ework/vite-plugin-fork-ts-checker#readme",
   "dependencies": {
+    "@babel/code-frame": "^7.12.13",
     "commander": "^7.1.0",
     "debug": "^4.3.1",
     "esbuild": "^0.8.52",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/apiMode.ts b/src/apiMode.ts
@@ -13,19 +13,24 @@ const formatHost: ts.FormatDiagnosticsHost = {
   getNewLine: () => ts.sys.newLine,
 }
 
-function toViteError(diagnostic: ts.Diagnostic): ErrorPayload['err'] {
+function toViteError(d: ts.Diagnostic): ErrorPayload['err'] {
+  const pos = d.start === undefined ? null : d.file?.getLineAndCharacterOfPosition(d.start)
+  let loc: ErrorPayload['err']['loc'] = undefined
+  if (pos) {
+    loc = {
+      file: d.file?.fileName,
+      line: pos.line + 1,
+      column: pos.character + 1,
+    }
+  }
+
   return {
-    message: 'string',
-    stack: 'a/b/c/d',
-    id: 'string',
-    frame: 'string',
-    plugin: 'string',
-    pluginCode: 'string',
-    // loc?: {
-    // file?: string
-    // line: number
-    // column: number
-    // }
+    // message: ts.flattenDiagnosticMessageText(d.messageText, formatHost.getNewLine()),
+    message: d.messageText.toString() + d.file?.getText(),
+    stack: '',
+    id: d.file?.fileName,
+    plugin: 'vite-plugin-fork-ts-checker',
+    loc,
   }
 }
 
@@ -63,14 +68,18 @@ export function createDiagnosis(userOptions: Partial<DiagnoseOptions> = {}) {
       }
 
       const reportDiagnostic = (diagnostic: ts.Diagnostic) => {
-        const { file } = diagnostic
         console.error(
           'Error',
           diagnostic.code,
           ':',
           ts.flattenDiagnosticMessageText(diagnostic.messageText, formatHost.getNewLine())
         )
-        return toViteError(diagnostic)
+        // return toViteError(diagnostic)
+
+        if (!currErr) {
+          console.log('🔥', diagnostic)
+          currErr = toViteError(diagnostic)
+        }
       }
 
       const reportWatchStatusChanged: ts.WatchStatusReporter = (
@@ -80,20 +89,18 @@ export function createDiagnosis(userOptions: Partial<DiagnoseOptions> = {}) {
         errorCount
       ) => {
         // https://github.com/microsoft/TypeScript/issues/32542
-        console.log(diagnostic)
         switch (diagnostic.code) {
           case 6031: // Initial build
           case 6032: // Incremental build
             // clear current error and use the newer error from compiler
             currErr = null
             break
           case 6193: // 1 Error
-            currErr = toViteError(diagnostic)
+          // currErr = toViteError(diagnostic)
           case 6194: // 0 errors or 2+ errors
-            if (errorCount === 0 || errorCount === undefined) {
-            } else {
-              if (!currErr) currErr = toViteError(diagnostic)
-            }
+            // if (errorCount !== 0 && !currErr) {
+            //   currErr = toViteError(diagnostic)
+            // }
 
             if (currErr) {
               server.ws.send({

diff --git a/src/codeFrame.ts b/src/codeFrame.ts
@@ -0,0 +1,14 @@
+import { codeFrameColumns } from '@babel/code-frame'
+
+const rawLines = `class Foo {
+  constructor() {
+    console.log("hello");
+  }
+}`
+const location = { start: { line: 2, column: 17 }, end: { line: 4, column: 3 } }
+
+const result = codeFrameColumns(rawLines, location, {
+  /* options */
+})
+
+console.log(result)