feat: add prettify option

docs/options.md

@@ -85,3 +85,10 @@ When both options are specified, enables file-system-based template compilation
 ::: tip
  Interaction between `vue-loader` and `cache-loader` uses [inline loader import syntax](https://webpack.js.org/concepts/loaders/#inline) under the hook, the `!` will be treated as the separator between different loaders, so please ensure `cacheDirectory` doesn't contain `!`.
 :::
+
+## prettify
+
+- type: `boolean`
+- default: `true`
+
+In development mode, we use [prettier](https://prettier.io/) to format the compiled render function for ease of debugging by default. However, if you encounter any obscure bug of prettier, such as [exponential compilation time for deeply nested functions](https://github.com/prettier/prettier/issues/4672), you can disable this option to circumvent it.

docs/zh/options.md

@@ -85,3 +85,10 @@ sidebar: auto
 ::: tip 注意
  在内部，`vue-loader` 和 `cache-loader` 之间的交互使用了 [loader 的内联 import 语法](https://webpack.js.org/concepts/loaders/#inline)，`!` 将会被认为是不同 loaders 之间的分隔符，所以请确保你的 `cacheDirectory` 路径中不包含 `!`。
 :::
+
+## prettify
+
+- 类型：`boolean`
+- 默认值：`true`
+
+在开发环境下，我们默认使用 [prettier](https://prettier.io/) 格式化编译后的模板渲染代码，以方便调试。然而，如果你开发时碰到了 prettier 的某些罕见 bug，比如[格式化多层嵌套的函数时运行时间过长](https://github.com/prettier/prettier/issues/4672)，你可以通过禁用这个选项来绕开。

lib/loaders/templateLoader.js

@@ -36,7 +36,8 @@ module.exports = function (source) {
  transformAssetUrls: options.transformAssetUrls || true,
  isProduction,
  isFunctional,
- optimizeSSR: isServer && options.optimizeSSR !== false
+ optimizeSSR: isServer && options.optimizeSSR !== false,
+ prettify: options.prettify
  }
 
  const compiled = compileTemplate(finalOptions)

package.json

@@ -33,10 +33,11 @@
  ]
  },
  "peerDependencies": {
- "css-loader": "*"
+ "css-loader": "*",
+ "webpack": "^4.1.0"
  },
  "dependencies": {
- "@vue/component-compiler-utils": "^2.0.0",
+ "@vue/component-compiler-utils": "^2.4.0",
  "hash-sum": "^1.0.2",
  "loader-utils": "^1.1.0",
  "vue-hot-reload-api": "^2.3.0",
@@ -80,12 +81,9 @@
  "vuepress": "^0.14.2",
  "vuepress-theme-vue": "^1.1.0",
  "webpack": "^4.1.0",
- "webpack-cli": "^2.0.10",
+ "webpack-cli": "^3.2.0",
  "webpack-dev-server": "^3.1.1",
  "webpack-merge": "^4.1.2",
  "yorkie": "^1.0.3"
- },
- "peerDependencies": {
- "webpack": "^4.1.0"
  }
 }

test/fixtures/prettier-bug.vue

@@ -0,0 +1,69 @@
+<template>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div>
+ <div></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "entry-view"
+};
+</script>

test/template.spec.js

@@ -292,3 +292,16 @@ test('separate loader configuration for template lang and js imports', done => {
  done()
  })
 })
+
+// #1426
+test('disable prettify', done => {
+ mockBundleAndRun({
+ entry: 'prettier-bug.vue',
+ vue: {
+ productionMode: false,
+ prettify: false
+ }
+ }, () => {
+ done()
+ })
+})