feat(plugin-vue): propagate multiRoot for template-only vapor components (#745)

Author: edison1105

packages/plugin-vue/__tests__/template-only-vapor.spec.ts

@@ -0,0 +1,128 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { SFCDescriptor } from 'vue/compiler-sfc'
+import type { ResolvedOptions } from '../src/index'
+import { resolveCompiler } from '../src/compiler'
+import { transformMain } from '../src/main'
+import { transformTemplateAsModule } from '../src/template'
+import { createDescriptor } from '../src/utils/descriptorCache'
+
+const compiler = resolveCompiler(process.cwd())
+
+function createOptions(): ResolvedOptions {
+  return {
+    root: '/root',
+    isProduction: false,
+    sourceMap: false,
+    cssDevSourcemap: false,
+    compiler,
+  } as ResolvedOptions
+}
+
+function parseDescriptor(
+  filename: string,
+  source: string,
+  options: ResolvedOptions,
+): SFCDescriptor {
+  const { descriptor, errors } = createDescriptor(filename, source, options)
+  if (errors.length) {
+    throw errors[0]
+  }
+  return descriptor
+}
+
+function createPluginContext() {
+  return {
+    warn: vi.fn(),
+    error: vi.fn((error: unknown) => {
+      throw error
+    }),
+  } as any
+}
+
+// TODO: remove todo in v3.6
+describe.todo('template-only vapor __multiRoot', () => {
+  it('attaches __multiRoot for inline multi-root templates', async () => {
+    const filename = '/root/Inline.vue'
+    const source = '<template vapor><div /><div /></template>'
+    const options = createOptions()
+
+    const result = await transformMain(
+      source,
+      filename,
+      options,
+      createPluginContext(),
+      false,
+      false,
+    )
+
+    expect(result?.code).toContain('const _sfc_main = { __vapor: true }')
+    expect(result?.code).toContain('_sfc_main.__multiRoot = true')
+  })
+
+  it('preserves false multiRoot values for inline single-root templates', async () => {
+    const filename = '/root/InlineSingle.vue'
+    const source = '<template vapor><div /></template>'
+    const options = createOptions()
+
+    const result = await transformMain(
+      source,
+      filename,
+      options,
+      createPluginContext(),
+      false,
+      false,
+    )
+
+    expect(result?.code).toContain('_sfc_main.__multiRoot = false')
+  })
+
+  it('re-exports and imports multiRoot for external template modules', async () => {
+    const filename = '/root/External.vue'
+    const source = '<template vapor lang="pug">div\ndiv</template>'
+    const options = createOptions()
+    const descriptor = parseDescriptor(filename, source, options)
+
+    const mainResult = await transformMain(
+      source,
+      filename,
+      options,
+      createPluginContext(),
+      false,
+      false,
+    )
+    const templateResult = await transformTemplateAsModule(
+      descriptor.template!.content,
+      filename,
+      descriptor,
+      options,
+      createPluginContext(),
+      false,
+      false,
+    )
+
+    expect(mainResult?.code).toContain(
+      'import { render as _sfc_render, multiRoot as _sfc_multiRoot }',
+    )
+    expect(mainResult?.code).toContain('_sfc_main.__multiRoot = _sfc_multiRoot')
+    expect(templateResult.code).toContain('export const multiRoot = true')
+  })
+
+  it('does not attach __multiRoot when the component has script', async () => {
+    const filename = '/root/WithScript.vue'
+    const source =
+      '<script>export default {}</script><template vapor lang="pug">div</template>'
+    const options = createOptions()
+
+    const result = await transformMain(
+      source,
+      filename,
+      options,
+      createPluginContext(),
+      false,
+      false,
+    )
+
+    expect(result?.code).not.toContain('__multiRoot')
+    expect(result?.code).not.toContain('multiRoot as _sfc_multiRoot')
+  })
+})

packages/plugin-vue/src/compiler.ts

@@ -3,6 +3,12 @@ declare module 'vue/compiler-sfc' {
   interface SFCDescriptor {
     id: string
   }
+
+  // TODO: remove once Vue 3.6 is officially released and stable compiler-sfc
+  // types include `multiRoot`.
+  interface SFCTemplateCompileResults {
+    multiRoot?: boolean
+  }
 }
 
 import { createRequire } from 'node:module'

packages/plugin-vue/src/main.ts

@@ -67,6 +67,9 @@ export async function transformMain(
   // feature information
   const attachedProps: [string, string][] = []
   const hasScoped = descriptor.styles.some((s) => s.scoped)
+  // @ts-expect-error TODO remove when 3.6 is out
+  const isTemplateOnlyVapor =
+    !descriptor.script && !descriptor.scriptSetup && descriptor.vapor
 
   // script
   const { code: scriptCode, map: scriptMap } = await genScriptCode(
@@ -80,11 +83,20 @@ export async function transformMain(
   // template
   const hasTemplateImport =
     descriptor.template && !isUseInlineTemplate(descriptor, options)
+  const isTemplateInlined =
+    !!descriptor.template &&
+    (!descriptor.template.lang || descriptor.template.lang === 'html') &&
+    !descriptor.template.src
 
   let templateCode = ''
   let templateMap: RawSourceMap | undefined = undefined
+  let templateMultiRoot: boolean | undefined
   if (hasTemplateImport) {
-    ;({ code: templateCode, map: templateMap } = await genTemplateCode(
+    ;({
+      code: templateCode,
+      map: templateMap,
+      multiRoot: templateMultiRoot,
+    } = await genTemplateCode(
       descriptor,
       options,
       pluginContext,
@@ -122,6 +134,11 @@ export async function transformMain(
   const output: string[] = [
     scriptCode,
     templateCode,
+    isTemplateOnlyVapor
+      ? `${scriptIdentifier}.__multiRoot = ${
+          isTemplateInlined ? templateMultiRoot : '_sfc_multiRoot'
+        }`
+      : '',
     stylesCode,
     customBlocksCode,
   ]
@@ -321,22 +338,33 @@ async function genTemplateCode(
   pluginContext: Rollup.PluginContext,
   ssr: boolean,
   customElement: boolean,
-) {
+): Promise<{
+  code: string
+  map?: RawSourceMap
+  multiRoot?: boolean
+}> {
   const template = descriptor.template!
   const hasScoped = descriptor.styles.some((style) => style.scoped)
+  // @ts-expect-error TODO remove when 3.6 is out
+  const needsMultiRoot =
+    !descriptor.script && !descriptor.scriptSetup && descriptor.vapor
 
   // If the template is not using pre-processor AND is not using external src,
   // compile and inline it directly in the main module. When served in vite this
   // saves an extra request per SFC which can improve load performance.
   if ((!template.lang || template.lang === 'html') && !template.src) {
-    return transformTemplateInMain(
+    const result = transformTemplateInMain(
       template.content,
       descriptor,
       options,
       pluginContext,
       ssr,
       customElement,
     )
+    return {
+      ...result,
+      multiRoot: needsMultiRoot ? result.multiRoot : undefined,
+    }
   } else {
     if (template.src) {
       await linkSrcToDescriptor(
@@ -358,7 +386,9 @@ async function genTemplateCode(
     const request = JSON.stringify(src + query)
     const renderFnName = ssr ? 'ssrRender' : 'render'
     return {
-      code: `import { ${renderFnName} as _sfc_${renderFnName} } from ${request}`,
+      code: `import { ${renderFnName} as _sfc_${renderFnName}${
+        needsMultiRoot ? ', multiRoot as _sfc_multiRoot' : ''
+      } } from ${request}`,
       map: undefined,
     }
   }

packages/plugin-vue/src/template.ts

@@ -34,6 +34,7 @@ export async function transformTemplateAsModule(
   )
 
   let returnCode = result.code
+  returnCode += `\nexport const multiRoot = ${JSON.stringify(result.multiRoot)}`
   if (
     options.devServer &&
     options.devServer.config.server.hmr !== false &&