feat: add prettify option (#1461)

* fix: fix duplicate object key in package.json * chore: update deps * feat: add `prettify` option closes #1426
vuejs · Jan 4, 2019 · 62a9155 · 62a9155
1 parent 4e90784
commit 62a9155
Show file tree

Hide file tree

Showing 7 changed files with 460 additions and 907 deletions.
diff --git a/docs/options.md b/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.
diff --git a/docs/zh/options.md b/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)，你可以通过禁用这个选项来绕开。
diff --git a/lib/loaders/templateLoader.js b/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)

diff --git a/package.json b/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"
   }
 }
diff --git a/test/fixtures/prettier-bug.vue b/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>
diff --git a/test/template.spec.js b/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()
+  })
+})