From 518da447e573b6f6ec5e2b1ca837332e0e230c14 Mon Sep 17 00:00:00 2001
From: OneNail <31649110+OneNail@users.noreply.github.com>
Date: Tue, 2 Nov 2021 09:06:54 +0800
Subject: [PATCH] fix(plugin-vue): template src isn't working when script setup
 (#5418)

---
 packages/playground/vue/Main.vue                    |  2 ++
 packages/playground/vue/__tests__/vue.spec.ts       |  8 ++++++++
 .../setup-import-template/SetupImportTemplate.vue   |  5 +++++
 .../vue/setup-import-template/template.html         |  2 ++
 packages/plugin-vue/src/main.ts                     | 11 ++---------
 packages/plugin-vue/src/script.ts                   | 13 ++++++++++++-
 6 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 packages/playground/vue/setup-import-template/SetupImportTemplate.vue
 create mode 100644 packages/playground/vue/setup-import-template/template.html

diff --git a/packages/playground/vue/Main.vue b/packages/playground/vue/Main.vue
index bf491f9a71e9af..a65c9d7480920e 100644
--- a/packages/playground/vue/Main.vue
+++ b/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'
 
diff --git a/packages/playground/vue/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts
index 99cd923cf1f35c..11049e3b5ff76e 100644
--- a/packages/playground/vue/__tests__/vue.spec.ts
+++ b/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')
+  })
+})
diff --git a/packages/playground/vue/setup-import-template/SetupImportTemplate.vue b/packages/playground/vue/setup-import-template/SetupImportTemplate.vue
new file mode 100644
index 00000000000000..d7fb119e3cfdc0
--- /dev/null
+++ b/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>
diff --git a/packages/playground/vue/setup-import-template/template.html b/packages/playground/vue/setup-import-template/template.html
new file mode 100644
index 00000000000000..414069f2e9e929
--- /dev/null
+++ b/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>
diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index 9ddb73ea61c078..ef82b3a05551d2 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/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
diff --git a/packages/plugin-vue/src/script.ts b/packages/plugin-vue/src/script.ts
index f851327ff9c492..f1f1b18fa82d8a 100644
--- a/packages/plugin-vue/src/script.ts
+++ b/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