fix(plugin-vue): template src isn't working when script setup (#5418)

Author: y1d7ng

packages/playground/vue/Main.vue

@@ -19,6 +19,7 @@
     <AsyncComponent />
   </Suspense>
   <RefTransform />
+  <SetupImportTemplate />
 </template>
 
 <script setup lang="ts">
@@ -33,6 +34,7 @@ import Slotted from './Slotted.vue'
 import ScanDep from './ScanDep.vue'
 import AsyncComponent from './AsyncComponent.vue'
 import RefTransform from './RefTransform.vue'
+import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'
 
 import { ref } from 'vue'
 

packages/playground/vue/__tests__/vue.spec.ts

@@ -219,3 +219,11 @@ describe('custom element', () => {
     expect(await getColor('.custom-element')).toBe('green')
   })
 })
+
+describe('setup import template', () => {
+  test('should work', async () => {
+    expect(await page.textContent('.setup-import-template')).toMatch('0')
+    await page.click('.setup-import-template')
+    expect(await page.textContent('.setup-import-template')).toMatch('1')
+  })
+})

packages/playground/vue/setup-import-template/SetupImportTemplate.vue

@@ -0,0 +1,5 @@
+<template src="./template.html"></template>
+<script setup>
+let count = $ref(0)
+const inc = () => count++
+</script>

packages/playground/vue/setup-import-template/template.html

@@ -0,0 +1,2 @@
+<h2>Setup Import Template</h2>
+<button class="setup-import-template" @click="inc">{{ count }}</button>

packages/plugin-vue/src/main.ts

@@ -10,7 +10,7 @@ import {
 } from './utils/descriptorCache'
 import { PluginContext, SourceMap, TransformPluginContext } from 'rollup'
 import { normalizePath } from '@rollup/pluginutils'
-import { resolveScript } from './script'
+import { resolveScript, isUseInlineTemplate } from './script'
 import { transformTemplateInMain } from './template'
 import { isOnlyTemplateChanged, isEqualBlock } from './handleHotUpdate'
 import { RawSourceMap, SourceMapConsumer, SourceMapGenerator } from 'source-map'
@@ -53,14 +53,7 @@ export async function transformMain(
   )
 
   // template
-  // Check if we can use compile template as inlined render function
-  // inside <script setup>. This can only be done for build because
-  // inlined template cannot be individually hot updated.
-  const useInlineTemplate =
-    !devServer &&
-    descriptor.scriptSetup &&
-    !(descriptor.template && descriptor.template.src)
-  const hasTemplateImport = descriptor.template && !useInlineTemplate
+  const hasTemplateImport = descriptor.template && !isUseInlineTemplate(descriptor, !devServer)
 
   let templateCode = ''
   let templateMap: RawSourceMap | undefined

packages/plugin-vue/src/script.ts

@@ -22,6 +22,17 @@ export function setResolvedScript(
   ;(ssr ? ssrCache : clientCache).set(descriptor, script)
 }
 
+// Check if we can use compile template as inlined render function
+// inside <script setup>. This can only be done for build because
+// inlined template cannot be individually hot updated.
+export function isUseInlineTemplate(descriptor: SFCDescriptor, isProd: boolean): boolean {
+  return (
+    isProd &&
+    !!descriptor.scriptSetup &&
+    !descriptor.template?.src
+  )
+}
+
 export function resolveScript(
   descriptor: SFCDescriptor,
   options: ResolvedOptions,
@@ -43,7 +54,7 @@ export function resolveScript(
     ...options.script,
     id: descriptor.id,
     isProd: options.isProduction,
-    inlineTemplate: !options.devServer,
+    inlineTemplate: isUseInlineTemplate(descriptor, !options.devServer),
     refTransform: options.refTransform !== false,
     templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr),
     // @ts-ignore TODO remove ignore when we support this in @vue/compiler-sfc