fix: support options for template block preprocessor render

fix #634
vitejs · Jul 29, 2020 · b166bc3 · b166bc3
1 parent 59938bc
commit b166bc3
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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) =>