Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Nov 2, 2021
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/playground/vue/Main.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<AsyncComponent />
</Suspense>
<RefTransform />
<SetupImportTemplate />
</template>

<script setup lang="ts">
Expand All @@ -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'

Expand Down
8 changes: 8 additions & 0 deletions packages/playground/vue/__tests__/vue.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template src="./template.html"></template>
<script setup>
let count = $ref(0)
const inc = () => count++
</script>
2 changes: 2 additions & 0 deletions packages/playground/vue/setup-import-template/template.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<h2>Setup Import Template</h2>
<button class="setup-import-template" @click="inc">{{ count }}</button>
11 changes: 2 additions & 9 deletions packages/plugin-vue/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand Down
13 changes: 12 additions & 1 deletion packages/plugin-vue/src/script.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 && descriptor.template.src)
Shinigami92 marked this conversation as resolved.
Show resolved Hide resolved
)
}

export function resolveScript(
descriptor: SFCDescriptor,
options: ResolvedOptions,
Expand All @@ -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
Expand Down