fix: support options for template block preprocessor render (#641)

fix #634 Co-authored-by: Evan You <[email protected]>
vitejs · Jul 30, 2020 · 540ae24 · 540ae24
1 parent dd92f4f
commit 540ae24
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 9 deletions.
diff --git a/package.json b/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",

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
@@ -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,

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.
  *
@@ -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

diff --git a/src/node/server/serverPluginVue.ts b/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))
  })
 

diff --git a/test/test.js b/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) =>

diff --git a/yarn.lock b/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"