fix: support options for template block preprocessor render

package.json

@@ -93,7 +93,7 @@
     "rollup": "^2.20.0",
     "rollup-plugin-dynamic-import-variables": "^1.0.1",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-vue": "^6.0.0-beta.9",
+    "rollup-plugin-vue": "^6.0.0-beta.10",
     "rollup-plugin-web-worker-loader": "^1.3.0",
     "rollup-pluginutils": "^2.8.2",
     "selfsigned": "^1.10.7",

playground/TestPreprocessors.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 h2 Pre-Processors
-p.pug
+p(id).pug
   | This is rendered from &lt;template lang="pug"&gt;
   | and styled with &lt;style lang="sass"&gt;. It should be megenta.
 p.pug-less

src/node/build/index.ts

@@ -188,7 +188,8 @@ async function createVuePlugin(
     cssPreprocessOptions,
     cssModuleOptions,
     vueCompilerOptions,
-    vueTransformAssetUrls = {}
+    vueTransformAssetUrls = {},
+    vueTemplatePreprocessOptions = {}
   }: BuildConfig
 ) {
   const {
@@ -205,6 +206,13 @@ async function createVuePlugin(
 
   return require('rollup-plugin-vue')({
     ...rollupPluginVueOptions,
+    templatePreprocessOptions: {
+      ...vueTemplatePreprocessOptions,
+      pug: {
+        doctype: 'html',
+        ...(vueTemplatePreprocessOptions && vueTemplatePreprocessOptions.pug)
+      }
+    },
     transformAssetUrls: vueTransformAssetUrls,
     postcssOptions,
     postcssPlugins,

src/node/config.ts

@@ -103,6 +103,13 @@ export interface SharedConfig {
    * or disable the transform altogether with `false`.
    */
   vueTransformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
+  /**
+   * The options for template block preprocessor render.
+   */
+  vueTemplatePreprocessOptions?: Record<
+    string,
+    SFCTemplateCompileOptions['preprocessOptions']
+  >
   /**
    * Transform functions for Vue custom blocks.
    *
@@ -323,6 +330,7 @@ export interface Plugin
     | 'configureServer'
     | 'vueCompilerOptions'
     | 'vueTransformAssetUrls'
+    | 'vueTemplatePreprocessOptions'
     | 'vueCustomBlockTransforms'
     | 'rollupInputOptions'
     | 'rollupOutputOptions'
@@ -491,6 +499,10 @@ function resolvePlugin(config: UserConfig, plugin: Plugin): UserConfig {
       config.vueTransformAssetUrls,
       plugin.vueTransformAssetUrls
     ),
+    vueTemplatePreprocessOptions: {
+      ...config.vueTemplatePreprocessOptions,
+      ...plugin.vueTemplatePreprocessOptions
+    },
     vueCustomBlockTransforms: {
       ...config.vueCustomBlockTransforms,
       ...plugin.vueCustomBlockTransforms

src/node/server/serverPluginVue.ts

@@ -534,7 +534,11 @@ function compileSFCTemplate(
   scoped: boolean,
   bindingMetadata: BindingMetadata | undefined,
   vueSpecifier: string,
-  { vueCompilerOptions, vueTransformAssetUrls = {} }: ServerConfig
+  {
+    vueCompilerOptions,
+    vueTransformAssetUrls = {},
+    vueTemplatePreprocessOptions = {}
+  }: ServerConfig
 ): ResultWithMap {
   let cached = vueCache.get(filePath)
   if (cached && cached.template) {
@@ -551,6 +555,16 @@ function compileSFCTemplate(
     }
   }
 
+  const preprocessLang = template.lang
+  let preprocessOptions =
+    preprocessLang && vueTemplatePreprocessOptions[preprocessLang]
+  if (preprocessLang === 'pug') {
+    preprocessOptions = {
+      doctype: 'html',
+      ...preprocessOptions
+    }
+  }
+
   const { code, map, errors } = compileTemplate({
     source: template.content,
     filename: filePath,
@@ -562,7 +576,8 @@ function compileSFCTemplate(
       bindingMetadata,
       runtimeModuleName: vueSpecifier
     },
-    preprocessLang: template.lang,
+    preprocessLang,
+    preprocessOptions,
     preprocessCustomRequire: (id: string) => require(resolveFrom(root, id))
   })
 

test/test.js

@@ -495,6 +495,10 @@ describe('vite', () => {
 
     test('pre-processors', async () => {
       expect(await getText('.pug')).toMatch('template lang="pug"')
+      // pug compiler with `html` option
+      expect(
+        await (await getEl('.pug')).evaluate((el) => el.getAttribute('id'))
+      ).toMatch('')
       expect(await getComputedColor('.pug')).toBe('rgb(255, 0, 255)')
       if (!isBuild) {
         await updateFile('TestPreprocessors.vue', (c) =>

yarn.lock

@@ -5843,10 +5843,10 @@ rollup-plugin-terser@^5.3.0:
     serialize-javascript "^2.1.2"
     terser "^4.6.2"
 
-rollup-plugin-vue@^6.0.0-beta.9:
-  version "6.0.0-beta.9"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.9.tgz#88d3381bb25c0d9bc534c50cc7eb4b0c3715862a"
-  integrity sha512-VlSbALaec9WHWiEIeLsoNdBQ24iSr/qaBvekewGzHcxphgy2o4Qz1/kbpuH1zHU1DsY8mn96qTprW9KhbuYaaA==
+rollup-plugin-vue@^6.0.0-beta.10:
+  version "6.0.0-beta.10"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.10.tgz#66d9b9a8dd2d085267d1cc398ea0113360879ac1"
+  integrity sha512-8TZJmROiSRjWoHRR6id0/ktOBOUGuI302xDBq4YBiA/tnnXdoY3oFGtvRWzT5ldX0jTJ8QX40rrJOw2SvcWwxQ==
   dependencies:
     debug "^4.1.1"
     hash-sum "^2.0.0"