feat(plugin-vue): add forced vapor mode option (#766)

Author: edison1105

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

@@ -3,6 +3,7 @@ import type { SFCDescriptor } from 'vue/compiler-sfc'
 import type { ResolvedOptions } from '../src/index'
 import { resolveCompiler } from '../src/compiler'
 import { transformMain } from '../src/main'
+import { clearScriptCache, resolveScript } from '../src/script'
 import { transformTemplateAsModule } from '../src/template'
 import { createDescriptor } from '../src/utils/descriptorCache'
 
@@ -18,6 +19,15 @@ function createOptions(): ResolvedOptions {
   } as ResolvedOptions
 }
 
+function createForcedVaporOptions(): ResolvedOptions {
+  return {
+    ...createOptions(),
+    features: {
+      vapor: true,
+    },
+  }
+}
+
 function parseDescriptor(
   filename: string,
   source: string,
@@ -126,3 +136,221 @@ describe.todo('template-only vapor __multiRoot', () => {
     expect(result?.code).not.toContain('multiRoot as _sfc_multiRoot')
   })
 })
+
+// TODO: remove todo in v3.6
+describe.todo('features.vapor', () => {
+  it('forces a template-only Vue SFC to compile in vapor mode', async () => {
+    const filename = '/root/Forced.vue'
+    const source = '<template><div /><div /></template>'
+    const options = createForcedVaporOptions()
+
+    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('forces external template modules to compile in vapor mode', async () => {
+    const filename = '/root/ForcedExternal.vue'
+    const source = '<template lang="pug">div\ndiv</template>'
+    const options = createForcedVaporOptions()
+    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('passes forced vapor mode to compileScript', () => {
+    const filename = '/root/ForcedScript.vue'
+    const options = createForcedVaporOptions()
+    const descriptor = parseDescriptor(
+      filename,
+      '<script setup>const msg = "hi"</script><template>{{ msg }}</template>',
+      options,
+    )
+    const compileScript = vi.fn(() => ({
+      ...descriptor.scriptSetup!,
+      content: 'const _sfc_main = {}',
+    }))
+
+    clearScriptCache()
+    resolveScript(
+      descriptor,
+      {
+        ...options,
+        compiler: {
+          ...compiler,
+          compileScript,
+        },
+      },
+      false,
+      false,
+    )
+
+    expect(compileScript).toHaveBeenCalledWith(
+      descriptor,
+      expect.objectContaining({
+        vapor: true,
+        templateOptions: expect.objectContaining({
+          vapor: true,
+        }),
+      }),
+    )
+  })
+
+  it('does not force normal script SFCs into vapor mode', async () => {
+    const filename = '/root/NormalScript.vue'
+    const source = `
+      <script>
+      export default {
+        props: {
+          href: String
+        }
+      }
+      </script>
+      <template><a :href="href"><slot /></a></template>
+    `
+    const options = createForcedVaporOptions()
+    const compileScript = vi.fn(compiler.compileScript)
+    const compileTemplate = vi.fn(compiler.compileTemplate)
+
+    const result = await transformMain(
+      source,
+      filename,
+      {
+        ...options,
+        compiler: {
+          ...compiler,
+          compileScript,
+          compileTemplate,
+        },
+      },
+      createPluginContext(),
+      false,
+      false,
+    )
+
+    expect(result?.code).not.toContain('__vapor: true')
+    expect(result?.code).not.toContain('template as _template')
+    expect(compileScript).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        vapor: false,
+        templateOptions: expect.objectContaining({
+          vapor: false,
+        }),
+      }),
+    )
+    expect(compileTemplate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        vapor: false,
+      }),
+    )
+  })
+
+  it('forces SFCs with both normal script and script setup into vapor mode', async () => {
+    const filename = '/root/ScriptAndSetup.vue'
+    const source = `
+      <script>
+      export default {
+        props: {
+          href: String
+        }
+      }
+      </script>
+      <script setup>
+      const msg = 'hi'
+      </script>
+      <template><a :href="href">{{ msg }}</a></template>
+    `
+    const options = createForcedVaporOptions()
+    const compileScript = vi.fn(compiler.compileScript)
+
+    await transformMain(
+      source,
+      filename,
+      {
+        ...options,
+        compiler: {
+          ...compiler,
+          compileScript,
+        },
+      },
+      createPluginContext(),
+      false,
+      false,
+    )
+
+    expect(compileScript).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        vapor: true,
+        templateOptions: expect.objectContaining({
+          vapor: true,
+        }),
+      }),
+    )
+  })
+
+  it('continues to force VitePress markdown SFCs into vapor mode', async () => {
+    const filename = '/root/index.md'
+    const source = `
+      <script >
+      export const __pageData = JSON.parse("{\\"title\\":\\"Hello\\",\\"description\\":\\"\\",\\"frontmatter\\":{},\\"headers\\":[],\\"relativePath\\":\\"index.md\\",\\"filePath\\":\\"index.md\\"}")
+      export default {name:"index.md",__vapor:true}
+      </script>
+      <template><div><h1 id="hello" tabindex="-1">Hello</h1></div></template>
+    `
+    const options = createForcedVaporOptions()
+    const compileTemplate = vi.fn(compiler.compileTemplate)
+
+    await transformMain(
+      source,
+      filename,
+      {
+        ...options,
+        compiler: {
+          ...compiler,
+          compileTemplate,
+        },
+      },
+      createPluginContext(),
+      false,
+      false,
+    )
+
+    expect(compileTemplate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        vapor: true,
+      }),
+    )
+  })
+})

packages/plugin-vue/src/index.ts

@@ -122,6 +122,14 @@ export interface Options {
      * - **default:** /\.ce\.vue$/
      */
     customElement?: boolean | string | RegExp | (string | RegExp)[]
+    /**
+     * Force all <script setup> Vue SFC (`.vue`) files to compile in Vapor mode.
+     * When enabled, this acts as a plugin-level fallback for SFCs without the
+     * per-file `vapor` marker.
+     * - Available in Vue 3.6 and later.
+     * - **default:** `false`
+     */
+    vapor?: boolean
     /**
      * Set to `false` to disable Options API support and allow related code in
      * Vue core to be dropped via dead-code elimination in production builds,

packages/plugin-vue/src/main.ts

@@ -24,6 +24,7 @@ import { transformTemplateInMain } from './template'
 import { isEqualBlock, isOnlyTemplateChanged } from './handleHotUpdate'
 import { createRollupError } from './utils/error'
 import { EXPORT_HELPER_ID } from './helper'
+import { isVaporMode } from './utils/vapor'
 import type { ResolvedOptions } from './index'
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -67,9 +68,10 @@ 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
+    !descriptor.script &&
+    !descriptor.scriptSetup &&
+    isVaporMode(descriptor, options)
 
   // script
   const { code: scriptCode, map: scriptMap } = await genScriptCode(
@@ -345,9 +347,10 @@ async function genTemplateCode(
 }> {
   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
+    !descriptor.script &&
+    !descriptor.scriptSetup &&
+    isVaporMode(descriptor, options)
 
   // 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
@@ -404,8 +407,7 @@ async function genScriptCode(
   code: string
   map: RawSourceMap | undefined
 }> {
-  // @ts-expect-error TODO remove when 3.6 is out
-  const vaporFlag = descriptor.vapor ? '__vapor: true' : ''
+  const vaporFlag = isVaporMode(descriptor, options) ? '__vapor: true' : ''
   let scriptCode = `const ${scriptIdentifier} = { ${vaporFlag} }`
   let map: RawSourceMap | undefined
 

packages/plugin-vue/src/script.ts

@@ -1,6 +1,7 @@
 import type { SFCDescriptor, SFCScriptBlock } from 'vue/compiler-sfc'
 import { resolveTemplateCompilerOptions } from './template'
 import { cache as descriptorCache } from './utils/descriptorCache'
+import { isVaporMode } from './utils/vapor'
 import type { ResolvedOptions } from './index'
 
 // ssr and non ssr builds would output different script content
@@ -85,6 +86,8 @@ export function resolveScript(
       ? scriptIdentifier
       : undefined,
     customElement,
+    // @ts-expect-error TODO remove when 3.6 is out
+    vapor: isVaporMode(descriptor, options),
     propsDestructure:
       options.features?.propsDestructure ?? options.script?.propsDestructure,
   })

packages/plugin-vue/src/template.ts

@@ -9,6 +9,7 @@ import type {
 import type { Rollup } from 'vite'
 import { getResolvedScript, resolveScript } from './script'
 import { createRollupError } from './utils/error'
+import { isVaporMode } from './utils/vapor'
 import type { ResolvedOptions } from './index'
 
 export async function transformTemplateAsModule(
@@ -193,7 +194,8 @@ export function resolveTemplateCompilerOptions(
   return {
     ...options.template,
     // @ts-expect-error TODO remove when 3.6 is out
-    vapor: descriptor.vapor,
+
+    vapor: isVaporMode(descriptor, options),
     id,
     ast: canReuseAST(options.compiler.version)
       ? descriptor.template?.ast

packages/plugin-vue/src/utils/vapor.ts

@@ -0,0 +1,46 @@
+import type { SFCDescriptor } from 'vue/compiler-sfc'
+
+interface VaporModeOptions {
+  features?: {
+    vapor?: boolean
+  }
+}
+
+/**
+ * Resolve the effective Vapor mode for an SFC handled by this plugin.
+ *
+ * `descriptor.vapor` is the per-file opt-in marker. `features.vapor` is the
+ * plugin-level force switch for SFCs that can be forced into Vapor mode.
+ */
+export function isVaporMode(
+  descriptor: SFCDescriptor,
+  options: VaporModeOptions,
+): boolean {
+  // @ts-expect-error TODO remove when 3.6 is out
+  if (descriptor.vapor) {
+    return true
+  }
+  if (options.features?.vapor) {
+    return canForceVaporMode(descriptor)
+  }
+  return false
+}
+
+/**
+ * `features.vapor` can force template-only SFCs, `<script setup>` SFCs, and
+ * non-`.vue` transformed SFCs into Vapor mode. It cannot force `.vue` SFCs
+ * with only a normal `<script>` because Vapor SFC support requires
+ * `<script setup>`.
+ */
+function canForceVaporMode(descriptor: SFCDescriptor): boolean {
+  if (descriptor.filename.endsWith('.vue')) {
+    if (descriptor.scriptSetup) {
+      return true
+    }
+    if (descriptor.script) {
+      return false
+    }
+  }
+
+  return true
+}