feat: vue extractor error reporting

packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap

@@ -1,5 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`vue extractor should catch template errors 1`] = `
+[
+  [SyntaxError: Error parsing JavaScript expression: Unexpected token (1:3)],
+  [SyntaxError: v-model can only be used on <input>, <textarea> and <select> elements.],
+]
+`;
+
+exports[`vue extractor should catch warnings during parsing 1`] = `
+[
+  [SyntaxError: Single file component can contain only one <template> element],
+]
+`;
+
 exports[`vue extractor should extract message from functional component 1`] = `
 [
   {

packages/extractor-vue/src/extractor.test.ts

@@ -1,8 +1,8 @@
+import type { ExtractedMessage } from "@lingui/babel-plugin-extract-messages"
 import { makeConfig } from "@lingui/conf"
 import fs from "fs"
 import path from "path"
 import { vueExtractor } from "."
-import type { ExtractedMessage } from "@lingui/babel-plugin-extract-messages"
 
 function normalizePath(entries: ExtractedMessage[]): ExtractedMessage[] {
   return entries.map((entry) => {
@@ -83,4 +83,38 @@ describe("vue extractor", () => {
 
     expect(messages).toMatchSnapshot()
   })
+
+  it("should catch warnings during parsing", async () => {
+    // ref: https://github.com/vuejs/core/blob/main/packages/compiler-sfc/__tests__/parse.spec.ts
+    const source = `<template></template><template></template>`
+
+    let messages: ExtractedMessage[] = []
+
+    expect(
+      vueExtractor.extract("parse.vue", source, (res) => messages.push(res), {
+        linguiConfig,
+      })
+    ).rejects.toMatchSnapshot()
+
+    expect(messages).toHaveLength(0)
+  })
+
+  it("should catch template errors", async () => {
+    // ref: https://github.com/vuejs/core/blob/main/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
+    const source = `
+      <template lang="pug">
+        <div :bar="a[" v-model="baz"/>
+      </template>
+    `
+
+    let messages: ExtractedMessage[] = []
+
+    expect(
+      vueExtractor.extract("compile.vue", source, (res) => messages.push(res), {
+        linguiConfig,
+      })
+    ).rejects.toMatchSnapshot()
+
+    expect(messages).toHaveLength(0)
+  })
 })

packages/extractor-vue/src/vue-extractor.ts

@@ -1,6 +1,6 @@
-import { parse, compileTemplate, SFCBlock } from "@vue/compiler-sfc"
 import { extractor } from "@lingui/cli/api"
 import type { ExtractorCtx, ExtractorType } from "@lingui/conf"
+import { SFCBlock, compileTemplate, parse } from "@vue/compiler-sfc"
 
 export const vueExtractor: ExtractorType = {
   match(filename: string) {
@@ -12,12 +12,17 @@ export const vueExtractor: ExtractorType = {
     onMessageExtracted,
     ctx: ExtractorCtx
   ) {
-    const { descriptor } = parse(code, {
+    const { descriptor, errors: parsedErrors } = parse(code, {
       sourceMap: true,
       filename,
       ignoreEmpty: true,
     })
 
+    if (parsedErrors.length) {
+      console.error("Error while parsing:")
+      throw parsedErrors
+    }
+
     const isTsBlock = (block: SFCBlock) => block?.lang === "ts"
 
     const compiledTemplate =
@@ -33,6 +38,11 @@ export const vueExtractor: ExtractorType = {
         },
       })
 
+    if (compiledTemplate?.errors?.length) {
+      console.error("Error while template compilation:")
+      throw compiledTemplate.errors
+    }
+
     const targets = [
       [
         descriptor.script?.content,