fix: template src sourcemap source (#267)

Author: sapphi-red

packages/plugin-vue/src/index.ts

@@ -490,6 +490,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin<Api> {
           if (query.type === 'template') {
             return transformTemplateAsModule(
               code,
+              filename,
               descriptor,
               options.value,
               this,

packages/plugin-vue/src/script.ts

@@ -74,7 +74,12 @@ export function resolveScript(
     id: descriptor.id,
     isProd: options.isProduction,
     inlineTemplate: isUseInlineTemplate(descriptor, options),
-    templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr),
+    templateOptions: resolveTemplateCompilerOptions(
+      descriptor,
+      options,
+      descriptor.filename,
+      ssr,
+    ),
     sourceMap: options.sourceMap,
     genDefaultAs: canInlineMain(descriptor, options)
       ? scriptIdentifier

packages/plugin-vue/src/template.ts

@@ -13,6 +13,7 @@ import type { ResolvedOptions } from './index'
 
 export async function transformTemplateAsModule(
   code: string,
+  filename: string,
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
   pluginContext: Rollup.TransformPluginContext,
@@ -24,6 +25,7 @@ export async function transformTemplateAsModule(
 }> {
   const result = compile(
     code,
+    filename,
     descriptor,
     options,
     pluginContext,
@@ -62,6 +64,7 @@ export function transformTemplateInMain(
 ): SFCTemplateCompileResults {
   const result = compile(
     code,
+    descriptor.filename,
     descriptor,
     options,
     pluginContext,
@@ -80,16 +83,16 @@ export function transformTemplateInMain(
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function compile(
   code: string,
+  filename: string,
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
   pluginContext: Rollup.PluginContext,
   ssr: boolean,
   customElement: boolean,
 ) {
-  const filename = descriptor.filename
   resolveScript(descriptor, options, ssr, customElement)
   const result = options.compiler.compileTemplate({
-    ...resolveTemplateCompilerOptions(descriptor, options, ssr)!,
+    ...resolveTemplateCompilerOptions(descriptor, options, filename, ssr)!,
     source: code,
   })
 
@@ -118,6 +121,7 @@ export function compile(
 export function resolveTemplateCompilerOptions(
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
+  filename: string,
   ssr: boolean,
 ): Omit<SFCTemplateCompileOptions, 'source'> | undefined {
   const block = descriptor.template
@@ -126,7 +130,7 @@ export function resolveTemplateCompilerOptions(
   }
   const resolvedScript = getResolvedScript(descriptor, ssr)
   const hasScoped = descriptor.styles.some((s) => s.scoped)
-  const { id, filename, cssVars } = descriptor
+  const { id, cssVars } = descriptor
 
   let transformAssetUrls = options.template?.transformAssetUrls
   // compiler-sfc should export `AssetURLOptions`

playground/vue-sourcemap/Main.vue

@@ -7,6 +7,7 @@
   <SassWithImport />
   <Less />
   <SrcImport />
+  <SrcImportHtml />
   <NoScript />
   <NoTemplate />
 </template>
@@ -19,6 +20,7 @@ import Sass from './Sass.vue'
 import SassWithImport from './SassWithImport.vue'
 import Less from './Less.vue'
 import SrcImport from './src-import/SrcImport.vue'
+import SrcImportHtml from './src-import-html/SrcImportHtml.vue'
 import NoScript from './NoScript.vue'
 import NoTemplate from './NoTemplate.vue'
 </script>

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

@@ -315,6 +315,20 @@ exports[`serve:vue-sourcemap > src imported > serve-src-imported 1`] = `
 }
 `;
 
+exports[`serve:vue-sourcemap > src imported html > serve-html 1`] = `
+{
+  "mappings": ";;;wBAAA,oBAA8B,WAA3B,mBAAuB",
+  "sources": [
+    "src-import.html",
+  ],
+  "sourcesContent": [
+    "<p>&lt;src-import-html&gt;</p>
+",
+  ],
+  "version": 3,
+}
+`;
+
 exports[`serve:vue-sourcemap > src imported sass > serve-src-imported-sass 1`] = `
 {
   "ignoreList": [],

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

@@ -91,6 +91,18 @@ describe.runIf(isServe)('serve:vue-sourcemap', () => {
     )
   })
 
+  test('src imported html', async () => {
+    const res = await page.request.get(
+      new URL(
+        './src-import-html/src-import.html?import&vue&type=template&src=true&lang.js',
+        page.url(),
+      ).href,
+    )
+    const js = await res.text()
+    const map = extractSourcemap(js)
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot('serve-html')
+  })
+
   test('no script', async () => {
     const res = await page.request.get(
       new URL('./NoScript.vue', page.url()).href,

playground/vue-sourcemap/src-import-html/SrcImportHtml.vue

@@ -0,0 +1,5 @@
+<template src="./src-import.html" />
+
+<script setup lang="ts">
+console.log('src-import-html')
+</script>

playground/vue-sourcemap/src-import-html/src-import.html

@@ -0,0 +1 @@
+<p>&lt;src-import-html&gt;</p>