parse <template> in "vue" files

.github/workflows/test.yml

@@ -0,0 +1,48 @@
+name: 'test'
+
+on:
+  pull_request:
+    paths:
+      - '**/*.ts'
+      - '**/*.js'
+      - '**/*.po'
+      - '**/*.snap'
+      - '.github/workflows/test.yml'
+      - 'package.json'
+      - 'package-lock.json'
+  push:
+    paths:
+      - '**/*.ts'
+      - '**/*.js'
+      - '**/*.po'
+      - '**/*.snap'
+      - '.github/workflows/test.yml'
+      - 'package.json'
+      - 'package-lock.json'
+
+jobs:
+  install-build-test:
+    name: 'Check install, build, test'
+    runs-on: 'ubuntu-latest'
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+
+    steps:
+      - name: 'Checkout current revision'
+        uses: 'actions/checkout@v3'
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Build'
+        run: 'npm run build'
+
+      - name: 'Test'
+        run: 'npm run test'

src/lib/extract.ts

@@ -38,18 +38,33 @@ export async function extractAll(
             switch (extname(filepath)) {
                 case ".vue": {
                     const source = fs.readFileSync(filepath).toString();
+                    const template = parseComponent(source).template;
+                    let tr = "";
+                    let jsCodes: string[] = [];
                     const script = parseComponent(source).script;
                     if (script) {
                         const lineCount =
                             source.slice(0, script.start).split(/\r\n|\r|\n/)
                                 .length - 1;
-                        babel.transformSync(
-                            "\n".repeat(lineCount) + script.content,
-                            {
-                                filename: filepath,
-                                ...babelOptions
-                            }
-                        );
+                        tr += "\n".repeat(lineCount) + script.content;
+                    }
+                    // FIXME: Because we need to put imports first,
+                    // the extracted line numbers will be messed up.
+                    if (template) {
+                        const regex = /(?:{{\s*t\s*`(.*?)`\s*}}|{{\s*t\s*\(\s*'(.*?)'\s*\)\s*}})/g;
+                        let tmparr;
+                        while (
+                            (tmparr = regex.exec(template.content)) !== null
+                        ) {
+                            tr += `\n${tmparr[0]}`;
+                        }
+                    }
+                    if (tr) {
+                        jsCodes.push(tr);
+                        babel.transformSync(jsCodes.join("\n"), {
+                            filename: filepath,
+                            ...babelOptions
+                        });
                     }
                     break;
                 }

tests/commands/__snapshots__/test_extract.ts.snap

@@ -164,6 +164,10 @@ msgstr \\"\\"
 #: tests/fixtures/vueTest/testVueParse.vue:10
 msgid \\"test from vue file\\"
 msgstr \\"\\"
+
+#: tests/fixtures/vueTest/testVueParse.vue:15
+msgid \\"Hello World!\\"
+msgstr \\"\\"
 "
 `;
 

tests/fixtures/vueTest/testVueParse.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1>Hello World</h1>
+    <h1>{{ t`Hello World!` }}</h1>
 </template>
 <script>
 import { t } from "ttag";