Show codeframe with location of fluent parse errors (#25)

Author: Demivan

__tests__/frameworks/vite/errors.spec.ts

@@ -33,7 +33,18 @@ describe('Error checking', () => {
     await expect(code).rejects.toThrowErrorMatchingInlineSnapshot(`
       "Fluent parse errors:
           E0003: Expected token: \\"}\\" (2:31)
-          E0010: Expected one of the variants to be marked as default (*) (9:3)"
+      1 |  # Simple things are simple.
+      2 |  hello-user = Hello, {$userName!
+        |                                ^
+      3 |  
+      4 |  # Complex things are possible.
+          E0010: Expected one of the variants to be marked as default (*) (9:3)
+      7  |      [one] added one photo
+      8  |      [other] added {$photoCount} new photo
+      9  |    }to {$userGender ->
+         |    ^
+      10 |      [male] his stream
+      11 |      [female] her stream"
     `)
   })
 
@@ -53,7 +64,18 @@ describe('Error checking', () => {
     await expect(code).rejects.toThrowErrorMatchingInlineSnapshot(`
       "Fluent parse errors:
           E0003: Expected token: \\"}\\" (2:31)
-          E0010: Expected one of the variants to be marked as default (*) (9:3)"
+      1 |  # Simple things are simple.
+      2 |  hello-user = Hello, {$userName!
+        |                                ^
+      3 |  
+      4 |  # Complex things are possible.
+          E0010: Expected one of the variants to be marked as default (*) (9:3)
+      7  |      [one] added one photo
+      8  |      [other] added {$photoCount} new photo
+      9  |    }to {$userGender ->
+         |    ^
+      10 |      [male] his stream
+      11 |      [female] her stream"
     `)
   })
 })

src/plugins/ftl/parse.ts

@@ -1,15 +1,58 @@
 import type { Junk } from '@fluent/syntax'
 import { columnOffset, lineOffset, parse } from '@fluent/syntax'
 
-export function getSyntaxErrors(source: string): string | undefined {
+function padRight(str: string | number, len: number) {
+  return str + ' '.repeat(len - String(str).length)
+}
+
+const RANGE = 2
+
+/**
+ * Generate a string that highlights the position of the error in the source
+ * @param source The source string
+ * @param line The line number of the error (1-indexed)
+ * @param column The column number of the error (1-indexed)
+ * Example:
+ * |  proper-key = Value
+ * |  key-with-error = error  {->
+ * |                            ^
+ * |  continuation = Value
+ */
+export function generateCodeFrame(
+  source: string,
+  line: number,
+  column: number,
+): string {
+  const lines = source.split(/\r?\n/)
+  const start = Math.max(line - RANGE - 1, 0)
+  const end = Math.min(lines.length, line + RANGE)
+
+  const result = []
+
+  const lineNumberLength = String(end).length
+
+  for (let i = start; i < end; i++) {
+    result.push(`${padRight(i + 1, lineNumberLength)} |  ${lines[i]}`)
+
+    if (i + 1 === line)
+      result.push(`${padRight(' ', lineNumberLength)} |  ${' '.repeat(column - 1)}^`)
+  }
+
+  return result.join('\n')
+}
+
+export function getSyntaxErrors(
+  source: string,
+): string | undefined {
   const parsed = parse(source, { withSpans: true })
   const junks = parsed.body.filter(x => x.type === 'Junk') as Junk[]
   const errors = junks.map(x => x.annotations).flat()
   if (errors.length > 0) {
     const errorsText = errors.map((x) => {
       const line = lineOffset(source, x.span.start) + 1
       const column = columnOffset(source, x.span.start) + 1
-      return `    ${x.code}: ${x.message} (${line}:${column})`
+      return `    ${x.code}: ${x.message} (${line}:${column})
+${generateCodeFrame(source, line, column)}`
     }).join('\n')
 
     return `Fluent parse errors:\n${errorsText}`