feat: propagate multiRoot for template-only vapor components

Author: sxzz

eslint.config.js

@@ -1,3 +1,7 @@
 import { sxzz } from '@sxzz/eslint-config'
 
-export default sxzz().removeRules('unicorn/filename-case')
+export default sxzz({
+  baseline: {
+    ignoreFeatures: ['top-level-await'],
+  },
+}).removeRules('unicorn/filename-case')

src/core/main.ts

@@ -69,6 +69,8 @@ export async function transformMain(
   // feature information
   const attachedProps: [string, string][] = []
   const hasScoped = descriptor.styles.some((s) => s.scoped)
+  const isTemplateOnlyVapor =
+    !descriptor.script && !descriptor.scriptSetup && descriptor.vapor
 
   // script
   const { code: scriptCode, map: scriptMap } = await genScriptCode(
@@ -81,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
+  let templateMultiRoot: boolean | undefined
   if (hasTemplateImport) {
-    ;({ code: templateCode, map: templateMap } = await genTemplateCode(
+    ;({
+      code: templateCode,
+      map: templateMap,
+      multiRoot: templateMultiRoot,
+    } = await genTemplateCode(
       descriptor,
       options,
       pluginContext,
@@ -120,6 +131,11 @@ export async function transformMain(
   const output: string[] = [
     scriptCode,
     templateCode,
+    isTemplateOnlyVapor
+      ? `${scriptIdentifier}.__multiRoot = ${
+          isTemplateInlined ? templateMultiRoot : '_sfc_multiRoot'
+        }`
+      : '',
     stylesCode,
     customBlocksCode,
   ]
@@ -295,21 +311,31 @@ async function genTemplateCode(
   options: ResolvedOptions,
   pluginContext: Context,
   customElement: boolean,
-) {
+): Promise<{
+  code: string
+  map?: RawSourceMap
+  multiRoot?: boolean
+}> {
   const template = descriptor.template!
   const hasScoped = descriptor.styles.some((style) => style.scoped)
+  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,
       customElement,
     )
+    return {
+      ...result,
+      multiRoot: needsMultiRoot ? result.multiRoot : undefined,
+    }
   } else {
     if (template.src) {
       await linkSrcToDescriptor(
@@ -331,7 +357,9 @@ async function genTemplateCode(
     const request = JSON.stringify(src + query)
     const renderFnName = options.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,
     }
   }

src/core/template.ts

@@ -35,6 +35,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 &&

tests/__snapshots__/rollup.test.ts.snap

@@ -318,6 +318,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 		/* TEXT */
 	)]);
 }
+const multiRoot = undefined;
 
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -356,6 +357,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 		/* TEXT */
 	)]);
 }
+const multiRoot = undefined;
 
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;