fix(plugin-vue): handle sourcemap with empty script code (#585)

Author: edison1105

packages/plugin-vue/src/main.ts

@@ -196,14 +196,23 @@ export async function transformMain(
 
   let resolvedMap: RawSourceMap | undefined = undefined
   if (options.sourceMap) {
-    if (scriptMap && templateMap) {
-      // if the template is inlined into the main module (indicated by the presence
-      // of templateMap), we need to concatenate the two source maps.
-
+    // the mappings of the source map for the inlined template should be moved
+    // because the position does not include the script tag part.
+    // we also concatenate the two source maps while doing that.
+    if (templateMap) {
+      const from = scriptMap ?? {
+        file: filename,
+        sourceRoot: '',
+        version: 3,
+        sources: [],
+        sourcesContent: [],
+        names: [],
+        mappings: '',
+      }
       const gen = fromMap(
         // version property of result.map is declared as string
         // but actually it is `3`
-        scriptMap as Omit<RawSourceMap, 'version'> as TraceEncodedSourceMap,
+        from as Omit<RawSourceMap, 'version'> as TraceEncodedSourceMap,
       )
       const tracer = new TraceMap(
         // same above
@@ -231,8 +240,7 @@ export async function transformMain(
       // of the main module compile result, which has outdated sourcesContent.
       resolvedMap.sourcesContent = templateMap.sourcesContent
     } else {
-      // if one of `scriptMap` and `templateMap` is empty, use the other one
-      resolvedMap = scriptMap ?? templateMap
+      resolvedMap = scriptMap
     }
   }
 

playground/vue-sourcemap/EmptyScript.vue

@@ -0,0 +1,4 @@
+<script setup></script>
+<template>
+  <p>&lt;empty-script&gt;</p>
+</template>

playground/vue-sourcemap/__tests__/__snapshots__/vue-sourcemap.spec.ts.snap

@@ -144,6 +144,24 @@ exports[`serve:vue-sourcemap > css scoped > serve-css-scoped 1`] = `
 }
 `;
 
+exports[`serve:vue-sourcemap > empty script > serve-empty-script 1`] = `
+{
+  "ignoreList": [],
+  "mappings": ";;;;wBAEE,oBAA2B,WAAxB,gBAAoB",
+  "sources": [
+    "EmptyScript.vue",
+  ],
+  "sourcesContent": [
+    "<script setup></script>
+<template>
+  <p>&lt;empty-script&gt;</p>
+</template>
+",
+  ],
+  "version": 3,
+}
+`;
+
 exports[`serve:vue-sourcemap > js > serve-js 1`] = `
 {
   "ignoreList": [],
@@ -194,7 +212,8 @@ exports[`serve:vue-sourcemap > less with additionalData > serve-less-with-additi
 
 exports[`serve:vue-sourcemap > no script > serve-no-script 1`] = `
 {
-  "mappings": ";;;wBACE,oBAAwB,WAArB,aAAiB",
+  "ignoreList": [],
+  "mappings": ";;;;wBACE,oBAAwB,WAArB,aAAiB",
   "sources": [
     "NoScript.vue",
   ],

playground/vue-sourcemap/__tests__/vue-sourcemap.spec.ts

@@ -100,6 +100,17 @@ describe.runIf(isServe)('serve:vue-sourcemap', () => {
     expect(formatSourcemapForSnapshot(map)).toMatchSnapshot('serve-no-script')
   })
 
+  test('empty script', async () => {
+    const res = await page.request.get(
+      new URL('./EmptyScript.vue', page.url()).href,
+    )
+    const js = await res.text()
+    const map = extractSourcemap(js)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot(
+      'serve-empty-script',
+    )
+  })
+
   test('no template', async () => {
     const res = await page.request.get(
       new URL('./NoTemplate.vue', page.url()).href,