From 6306d340ef455d52131346fb1fcd0b13e207ecf8 Mon Sep 17 00:00:00 2001
From: Aseer KT <aseermiqdad@gmail.com>
Date: Fri, 26 Apr 2024 11:01:43 +0530
Subject: [PATCH 1/4] feat: vue extractor error reporting

---
 .../src/__snapshots__/extractor.test.ts.snap  | 13 +++++++
 packages/extractor-vue/src/extractor.test.ts  | 36 ++++++++++++++++++-
 packages/extractor-vue/src/vue-extractor.ts   | 14 ++++++--
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap b/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap
index 646453824..afaf4e040 100644
--- a/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap
+++ b/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`] = `
 [
   {
diff --git a/packages/extractor-vue/src/extractor.test.ts b/packages/extractor-vue/src/extractor.test.ts
index 4a0a37323..0da98bd14 100644
--- a/packages/extractor-vue/src/extractor.test.ts
+++ b/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)
+  })
 })
diff --git a/packages/extractor-vue/src/vue-extractor.ts b/packages/extractor-vue/src/vue-extractor.ts
index 155ec8d84..66014f60e 100644
--- a/packages/extractor-vue/src/vue-extractor.ts
+++ b/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,

From b343ec54a3125d981a8f888c20eecd2dd8131ed2 Mon Sep 17 00:00:00 2001
From: Aseer KT <aseermiqdad@gmail.com>
Date: Sun, 28 Apr 2024 14:32:20 +0530
Subject: [PATCH 2/4] test: vue extractor error reporting

---
 packages/extractor-vue/src/extractor.test.ts  | 41 +++++++++++--------
 .../src/fixtures/test-compile.vue             | 10 +++++
 .../extractor-vue/src/fixtures/test-parse.vue | 15 +++++++
 3 files changed, 50 insertions(+), 16 deletions(-)
 create mode 100644 packages/extractor-vue/src/fixtures/test-compile.vue
 create mode 100644 packages/extractor-vue/src/fixtures/test-parse.vue

diff --git a/packages/extractor-vue/src/extractor.test.ts b/packages/extractor-vue/src/extractor.test.ts
index 0da98bd14..d9dc21c16 100644
--- a/packages/extractor-vue/src/extractor.test.ts
+++ b/packages/extractor-vue/src/extractor.test.ts
@@ -16,6 +16,11 @@ function normalizePath(entries: ExtractedMessage[]): ExtractedMessage[] {
   })
 }
 
+function getFixtureCode(filename: string) {
+  const filePath = path.resolve(__dirname, "fixtures", filename)
+  return fs.readFileSync(filePath, "utf-8")
+}
+
 describe("vue extractor", () => {
   const linguiConfig = makeConfig({
     locales: ["en", "nb"],
@@ -41,8 +46,7 @@ describe("vue extractor", () => {
   })
 
   it("should extract message from vue file", async () => {
-    const filePath = path.resolve(__dirname, "fixtures/test.vue")
-    const code = fs.readFileSync(filePath, "utf-8")
+    const code = getFixtureCode("test.vue")
 
     let messages: ExtractedMessage[] = []
 
@@ -63,8 +67,7 @@ describe("vue extractor", () => {
   })
 
   it("should extract message from functional component", async () => {
-    const filePath = path.resolve(__dirname, "fixtures/functional.vue")
-    const code = fs.readFileSync(filePath, "utf-8")
+    const code = getFixtureCode("functional.vue")
 
     let messages: ExtractedMessage[] = []
 
@@ -86,14 +89,19 @@ describe("vue extractor", () => {
 
   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>`
+    const code = getFixtureCode("test-parse.vue")
 
     let messages: ExtractedMessage[] = []
 
     expect(
-      vueExtractor.extract("parse.vue", source, (res) => messages.push(res), {
-        linguiConfig,
-      })
+      vueExtractor.extract(
+        "test-parse.vue",
+        code,
+        (res) => messages.push(res),
+        {
+          linguiConfig,
+        }
+      )
     ).rejects.toMatchSnapshot()
 
     expect(messages).toHaveLength(0)
@@ -101,18 +109,19 @@ describe("vue extractor", () => {
 
   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>
-    `
+    const source = getFixtureCode("test-compile.vue")
 
     let messages: ExtractedMessage[] = []
 
     expect(
-      vueExtractor.extract("compile.vue", source, (res) => messages.push(res), {
-        linguiConfig,
-      })
+      vueExtractor.extract(
+        "test-compile.vue",
+        source,
+        (res) => messages.push(res),
+        {
+          linguiConfig,
+        }
+      )
     ).rejects.toMatchSnapshot()
 
     expect(messages).toHaveLength(0)
diff --git a/packages/extractor-vue/src/fixtures/test-compile.vue b/packages/extractor-vue/src/fixtures/test-compile.vue
new file mode 100644
index 000000000..d9e1930c2
--- /dev/null
+++ b/packages/extractor-vue/src/fixtures/test-compile.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { i18n } from '@lingui/core';
+
+let message = i18n._("Hello World")
+</script>
+
+<template lang="pug">
+  <div :bar="a[" v-model="baz"/>
+  {{ message }}
+</template>
\ No newline at end of file
diff --git a/packages/extractor-vue/src/fixtures/test-parse.vue b/packages/extractor-vue/src/fixtures/test-parse.vue
new file mode 100644
index 000000000..b9961efe0
--- /dev/null
+++ b/packages/extractor-vue/src/fixtures/test-parse.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { i18n } from "@lingui/core";
+
+let firstMessage = i18n._('Hello World')
+let secondMessage = i18n._('Goodbye Vue')
+</script>
+
+<template>
+  <p>1st template</p>
+  <small>{{ firstMessage }}</small>
+</template>
+<template>
+  <p>2nd template</p>
+  <small>{{ secondMessage }}</small>
+</template>
\ No newline at end of file

From 4566ac8a29e5fdfec6817654d09593c1a5378b1d Mon Sep 17 00:00:00 2001
From: Aseer KT <aseermiqdad@gmail.com>
Date: Mon, 29 Apr 2024 13:11:38 +0530
Subject: [PATCH 3/4] chore: update error logging for vue extractor

---
 packages/extractor-vue/src/vue-extractor.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/extractor-vue/src/vue-extractor.ts b/packages/extractor-vue/src/vue-extractor.ts
index 66014f60e..a8de61b50 100644
--- a/packages/extractor-vue/src/vue-extractor.ts
+++ b/packages/extractor-vue/src/vue-extractor.ts
@@ -1,6 +1,15 @@
 import { extractor } from "@lingui/cli/api"
 import type { ExtractorCtx, ExtractorType } from "@lingui/conf"
-import { SFCBlock, compileTemplate, parse } from "@vue/compiler-sfc"
+import {
+  CompilerError,
+  SFCBlock,
+  compileTemplate,
+  parse,
+} from "@vue/compiler-sfc"
+
+function handleErrors(errors: (string | CompilerError | SyntaxError)[]) {
+  errors.forEach(console.log)
+}
 
 export const vueExtractor: ExtractorType = {
   match(filename: string) {
@@ -19,8 +28,8 @@ export const vueExtractor: ExtractorType = {
     })
 
     if (parsedErrors.length) {
-      console.error("Error while parsing:")
-      throw parsedErrors
+      parsedErrors.forEach(console.log)
+      throw new Error("Vue parsing failed")
     }
 
     const isTsBlock = (block: SFCBlock) => block?.lang === "ts"
@@ -39,8 +48,8 @@ export const vueExtractor: ExtractorType = {
       })
 
     if (compiledTemplate?.errors?.length) {
-      console.error("Error while template compilation:")
-      throw compiledTemplate.errors
+      compiledTemplate.errors.forEach(console.log)
+      throw new Error("Vue template compilation failed")
     }
 
     const targets = [

From 9000961a239a3b422815cecd7b044834b3a92802 Mon Sep 17 00:00:00 2001
From: Aseer KT <aseermiqdad@gmail.com>
Date: Tue, 30 Apr 2024 13:48:20 +0530
Subject: [PATCH 4/4] chore: add verbose vue error logs

---
 .../src/__snapshots__/extractor.test.ts.snap        | 13 ++-----------
 packages/extractor-vue/src/vue-extractor.ts         | 11 +----------
 2 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap b/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap
index afaf4e040..ef0980c48 100644
--- a/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap
+++ b/packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap
@@ -1,17 +1,8 @@
 // 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 template errors 1`] = `[Error: Vue template compilation failed]`;
 
-exports[`vue extractor should catch warnings during parsing 1`] = `
-[
-  [SyntaxError: Single file component can contain only one <template> element],
-]
-`;
+exports[`vue extractor should catch warnings during parsing 1`] = `[Error: Vue parsing failed]`;
 
 exports[`vue extractor should extract message from functional component 1`] = `
 [
diff --git a/packages/extractor-vue/src/vue-extractor.ts b/packages/extractor-vue/src/vue-extractor.ts
index a8de61b50..c56b1c18a 100644
--- a/packages/extractor-vue/src/vue-extractor.ts
+++ b/packages/extractor-vue/src/vue-extractor.ts
@@ -1,15 +1,6 @@
 import { extractor } from "@lingui/cli/api"
 import type { ExtractorCtx, ExtractorType } from "@lingui/conf"
-import {
-  CompilerError,
-  SFCBlock,
-  compileTemplate,
-  parse,
-} from "@vue/compiler-sfc"
-
-function handleErrors(errors: (string | CompilerError | SyntaxError)[]) {
-  errors.forEach(console.log)
-}
+import { SFCBlock, compileTemplate, parse } from "@vue/compiler-sfc"
 
 export const vueExtractor: ExtractorType = {
   match(filename: string) {