fix(compile-sfc): handle inline template source map in prod build

vuejs · Jan 13, 2025 · 29b4ab7 · 29b4ab7
1 parent 22dcbf3
commit 29b4ab7
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 10 deletions.
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
@@ -32,6 +32,7 @@ import { CSS_VARS_HELPER, genCssVarsCode } from './style/cssVars'
 import {
   type SFCTemplateCompileOptions,
   compileTemplate,
+  mergeSourceMaps,
 } from './compileTemplate'
 import { warnOnce } from './warn'
 import { transformDestructuredProps } from './script/definePropsDestructure'
@@ -817,6 +818,7 @@ export function compileScript(
     args += `, { ${destructureElements.join(', ')} }`
   }
 
+  let templateMap
   // 9. generate return statement
   let returned
   if (
@@ -866,7 +868,7 @@ export function compileScript(
       }
       // inline render function mode - we are going to compile the template and
       // inline it right here
-      const { code, ast, preamble, tips, errors } = compileTemplate({
+      const { code, ast, preamble, tips, errors, map } = compileTemplate({
         filename,
         ast: sfc.template.ast,
         source: sfc.template.content,
@@ -884,6 +886,7 @@ export function compileScript(
           bindingMetadata: ctx.bindingMetadata,
         },
       })
+      templateMap = map
       if (tips.length) {
         tips.forEach(warnOnce)
       }
@@ -1022,19 +1025,26 @@ export function compileScript(
     )
   }
 
+  const content = ctx.s.toString()
+  let map =
+    options.sourceMap !== false
+      ? (ctx.s.generateMap({
+          source: filename,
+          hires: true,
+          includeContent: true,
+        }) as unknown as RawSourceMap)
+      : undefined
+  if (map && templateMap) {
+    const offset = content.indexOf(returned)
+    const lineOffset = content.slice(0, offset).split(/\r?\n/).length - 1
+    map = mergeSourceMaps(map, templateMap, lineOffset)
+  }
   return {
     ...scriptSetup,
     bindings: ctx.bindingMetadata,
     imports: ctx.userImports,
-    content: ctx.s.toString(),
-    map:
-      options.sourceMap !== false
-        ? (ctx.s.generateMap({
-            source: filename,
-            hires: true,
-            includeContent: true,
-          }) as unknown as RawSourceMap)
-        : undefined,
+    content,
+    map,
     scriptAst: scriptAst?.body,
     scriptSetupAst: scriptSetupAst?.body,
     deps: ctx.deps ? [...ctx.deps] : undefined,

diff --git a/packages/compiler-sfc/src/compileTemplate.ts b/packages/compiler-sfc/src/compileTemplate.ts
@@ -327,6 +327,51 @@ function mapLines(oldMap: RawSourceMap, newMap: RawSourceMap): RawSourceMap {
   return generator.toJSON()
 }
 
+export function mergeSourceMaps(
+  scriptMap: RawSourceMap,
+  templateMap: RawSourceMap,
+  templateLineOffset: number,
+): RawSourceMap {
+  if (!templateMap) return scriptMap
+  if (!scriptMap) return templateMap
+
+  const mergedMapGenerator = new SourceMapGenerator() as any
+  const scriptConsumer = new SourceMapConsumer(scriptMap)
+  scriptConsumer.eachMapping(mapping => {
+    if (mapping.originalLine == null) return
+    mergedMapGenerator.addMapping({
+      generated: {
+        line: mapping.generatedLine,
+        column: mapping.generatedColumn,
+      },
+      original: {
+        line: mapping.originalLine,
+        column: mapping.originalColumn,
+      },
+      source: mapping.source,
+      name: mapping.name,
+    })
+  })
+
+  const templateConsumer = new SourceMapConsumer(templateMap)
+  templateConsumer.eachMapping(mapping => {
+    if (mapping.originalLine == null) return
+    mergedMapGenerator.addMapping({
+      generated: {
+        line: mapping.generatedLine + templateLineOffset,
+        column: mapping.generatedColumn,
+      },
+      original: {
+        line: mapping.originalLine,
+        column: mapping.originalColumn,
+      },
+      source: mapping.source,
+      name: mapping.name,
+    })
+  })
+  return mergedMapGenerator.toJSON()
+}
+
 function patchErrors(
   errors: CompilerError[],
   source: string,