From b166bc3ddf25a3db1e54275d11273946147c6456 Mon Sep 17 00:00:00 2001
From: likui <2218301630@qq.com>
Date: Wed, 29 Jul 2020 15:44:54 +0800
Subject: [PATCH] fix: support options for template block preprocessor render

fix #634
---
 playground/TestPreprocessors.vue   |  2 +-
 src/node/build/index.ts            |  4 +++-
 src/node/config.ts                 | 12 ++++++++++++
 src/node/server/serverPluginVue.ts | 19 +++++++++++++++++--
 test/test.js                       |  4 ++++
 5 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/playground/TestPreprocessors.vue b/playground/TestPreprocessors.vue
index b8b5d6fba628e5..64255fef70f07e 100644
--- a/playground/TestPreprocessors.vue
+++ b/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
diff --git a/src/node/build/index.ts b/src/node/build/index.ts
index 7a4125577b1e2f..9a8c7519c9c4f8 100644
--- a/src/node/build/index.ts
+++ b/src/node/build/index.ts
@@ -185,7 +185,8 @@ async function createVuePlugin(
     cssPreprocessOptions,
     cssModuleOptions,
     vueCompilerOptions,
-    vueTransformAssetUrls = {}
+    vueTransformAssetUrls = {},
+    vueTemplatePreprocessOptions = {}
   }: BuildConfig
 ) {
   const {
@@ -202,6 +203,7 @@ async function createVuePlugin(
 
   return require('rollup-plugin-vue')({
     ...rollupPluginVueOptions,
+    templatePreprocessOptions: vueTemplatePreprocessOptions,
     transformAssetUrls: vueTransformAssetUrls,
     postcssOptions,
     postcssPlugins,
diff --git a/src/node/config.ts b/src/node/config.ts
index 98bba60a9fb851..443c45ccad5e93 100644
--- a/src/node/config.ts
+++ b/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.
    *
@@ -316,6 +323,7 @@ export interface Plugin
     | 'configureServer'
     | 'vueCompilerOptions'
     | 'vueTransformAssetUrls'
+    | 'vueTemplatePreprocessOptions'
     | 'vueCustomBlockTransforms'
     | 'rollupInputOptions'
     | 'rollupOutputOptions'
@@ -484,6 +492,10 @@ function resolvePlugin(config: UserConfig, plugin: Plugin): UserConfig {
       config.vueTransformAssetUrls,
       plugin.vueTransformAssetUrls
     ),
+    vueTemplatePreprocessOptions: {
+      ...config.vueTemplatePreprocessOptions,
+      ...plugin.vueTemplatePreprocessOptions
+    },
     vueCustomBlockTransforms: {
       ...config.vueCustomBlockTransforms,
       ...plugin.vueCustomBlockTransforms
diff --git a/src/node/server/serverPluginVue.ts b/src/node/server/serverPluginVue.ts
index e4d76d23bef278..5e3a5291d2b01c 100644
--- a/src/node/server/serverPluginVue.ts
+++ b/src/node/server/serverPluginVue.ts
@@ -540,7 +540,11 @@ function compileSFCTemplate(
   publicPath: string,
   scoped: boolean,
   bindingMetadata: BindingMetadata | undefined,
-  { vueCompilerOptions, vueTransformAssetUrls = {} }: ServerConfig
+  {
+    vueCompilerOptions,
+    vueTransformAssetUrls = {},
+    vueTemplatePreprocessOptions = {}
+  }: ServerConfig
 ): ResultWithMap {
   let cached = vueCache.get(filePath)
   if (cached && cached.template) {
@@ -556,6 +560,16 @@ function compileSFCTemplate(
       ...vueTransformAssetUrls
     }
   }
+  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,
@@ -571,7 +585,8 @@ function compileSFCTemplate(
           '/@modules/vue.js'
         : '/@modules/vue'
     },
-    preprocessLang: template.lang,
+    preprocessLang,
+    preprocessOptions,
     preprocessCustomRequire: (id: string) => require(resolveFrom(root, id))
   })
 
diff --git a/test/test.js b/test/test.js
index 3c065a5a809380..d7431d5d2ccf5b 100644
--- a/test/test.js
+++ b/test/test.js
@@ -480,6 +480,10 @@ describe('vite', () => {
 
     test('pre-processors', async () => {
       expect(await getText('.pug')).toMatch('template lang="pug"')
+      // pug compiler with `html` option
+      expect(
+        (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) =>