fix: fix error lines (#112)

package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.10.2",
+    "@dword-design/functions": "^5.0.22",
     "@dword-design/suppress-babel-register-esm-warning": "^1.1.10",
     "@rollup/plugin-babel": "^6.0.3",
     "@vitejs/plugin-vue": "^5.0.3",
@@ -41,7 +42,6 @@
   "devDependencies": {
     "@babel/plugin-proposal-pipeline-operator": "^7.22.5",
     "@dword-design/base": "^11.0.2",
-    "@dword-design/functions": "^5.0.22",
     "@dword-design/puppeteer": "^7.0.0",
     "@dword-design/tester": "^2.0.19",
     "@dword-design/tester-plugin-puppeteer": "^3.0.0",
@@ -55,6 +55,7 @@
     "tree-kill-promise": "^3.0.14"
   },
   "peerDependencies": {
+    "@vue/compiler-dom": "*",
     "nuxi": "^3"
   },
   "engines": {

src/cli.spec.js

@@ -9,6 +9,7 @@ import fs from 'fs-extra'
 import { createRequire } from 'module'
 import nuxtDevReady from 'nuxt-dev-ready'
 import outputFiles from 'output-files'
+import P from 'path'
 import portReady from 'port-ready'
 import kill from 'tree-kill-promise'
 
@@ -68,7 +69,35 @@ export default tester(
         await kill(nuxt.pid)
       }
     },
-    'build errors': async () => {
+    'build error in Vue': async () => {
+      await fs.outputFile(
+        'pages/index.vue',
+        endent`
+          <template>
+            <div />
+          </template>
+
+          <script setup>
+          foo bar
+          </script>
+        `,
+      )
+      await expect(
+        execa(resolver.resolve('./cli.js'), ['build'], {
+          env: { NODE_ENV: '' },
+        }),
+      ).rejects.toThrow(endent`
+        [at position 6] [vue/compiler-sfc] ${P.resolve('pages', 'index.vue')}: Missing semicolon. (2:3)
+
+        ${P.resolve('pages', 'index.vue').replace(/\\/g, '/')}
+        4  |  
+        5  |  <script setup>
+        6  |  foo bar
+           |     ^
+        7  |  </script>
+      `)
+    },
+    'build error in module': async () => {
       await fs.outputFile('modules/foo/index.js', 'foo bar')
       await expect(
         execa(resolver.resolve('./cli.js'), ['build']),

src/index.js

@@ -1,6 +1,8 @@
 import { transform } from '@babel/core'
+import { endent } from '@dword-design/functions'
 import { babel as rollupPluginBabel } from '@rollup/plugin-babel'
 import { parseVueRequest } from '@vitejs/plugin-vue'
+import { generateCodeFrame } from '@vue/compiler-dom'
 import { parse } from '@vue/compiler-sfc'
 import { runCommand } from 'nuxi'
 import vitePluginBabel from 'vite-plugin-babel'
@@ -31,12 +33,27 @@ export default (command, args) =>
                     sfc.descriptor[section] &&
                     sfc.descriptor[section].lang === undefined
                   ) {
-                    sfc.descriptor[section].content = await transform(
-                      sfc.descriptor[section].content,
-                      {
-                        filename: query.filename,
-                      },
-                    ).code
+                    try {
+                      sfc.descriptor[section].content = (
+                        await transform(sfc.descriptor[section].content, {
+                          filename: query.filename,
+                        })
+                      ).code
+                    } catch (error) {
+                      error.message = endent`
+                        [vue/compiler-sfc] ${error.message.split('\n')[0]}
+
+                        ${query.filename}
+                        ${generateCodeFrame(
+                          sfc.descriptor.source,
+                          error.pos + sfc.descriptor[section].loc.start.offset,
+                          error.pos +
+                            sfc.descriptor[section].loc.start.offset +
+                            1,
+                        )}
+                      `
+                      throw error
+                    }
                   }
                 }