Skip to content

Commit 62a9155

Browse files
haoqunjianghaoqunjiang
authored
feat: add prettify option (#1461)
* fix: fix duplicate object key in package.json * chore: update deps * feat: add `prettify` option closes #1426
1 parent 4e90784 commit 62a9155

File tree

7 files changed

+460
-907
lines changed

7 files changed

+460
-907
lines changed

‎docs/options.md

+7
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,10 @@ When both options are specified, enables file-system-based template compilation
8585
::: tip
8686
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 `!`.
8787
:::
88+
89+
## prettify
90+
91+
- type: `boolean`
92+
- default: `true`
93+
94+
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

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

‎lib/loaders/templateLoader.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ module.exports = function (source) {
3636
transformAssetUrls: options.transformAssetUrls || true,
3737
isProduction,
3838
isFunctional,
39-
optimizeSSR: isServer && options.optimizeSSR !== false
39+
optimizeSSR: isServer && options.optimizeSSR !== false,
40+
prettify: options.prettify
4041
}
4142

4243
const compiled = compileTemplate(finalOptions)

‎package.json

+4-6
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,11 @@
3333
]
3434
},
3535
"peerDependencies": {
36-
"css-loader": "*"
36+
"css-loader": "*",
37+
"webpack": "^4.1.0"
3738
},
3839
"dependencies": {
39-
"@vue/component-compiler-utils": "^2.0.0",
40+
"@vue/component-compiler-utils": "^2.4.0",
4041
"hash-sum": "^1.0.2",
4142
"loader-utils": "^1.1.0",
4243
"vue-hot-reload-api": "^2.3.0",
@@ -80,12 +81,9 @@
8081
"vuepress": "^0.14.2",
8182
"vuepress-theme-vue": "^1.1.0",
8283
"webpack": "^4.1.0",
83-
"webpack-cli": "^2.0.10",
84+
"webpack-cli": "^3.2.0",
8485
"webpack-dev-server": "^3.1.1",
8586
"webpack-merge": "^4.1.2",
8687
"yorkie": "^1.0.3"
87-
},
88-
"peerDependencies": {
89-
"webpack": "^4.1.0"
9088
}
9189
}

‎test/fixtures/prettier-bug.vue

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<div>
3+
<div>
4+
<div>
5+
<div>
6+
<div>
7+
<div>
8+
<div>
9+
<div>
10+
<div>
11+
<div>
12+
<div>
13+
<div>
14+
<div>
15+
<div>
16+
<div>
17+
<div>
18+
<div>
19+
<div>
20+
<div>
21+
<div>
22+
<div>
23+
<div>
24+
<div>
25+
<div>
26+
<div>
27+
<div>
28+
<div>
29+
<div>
30+
<div>
31+
<div>
32+
<div></div>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</template>
64+
65+
<script>
66+
export default {
67+
name: "entry-view"
68+
};
69+
</script>

‎test/template.spec.js

+13
Original file line numberDiff line numberDiff line change
@@ -292,3 +292,16 @@ test('separate loader configuration for template lang and js imports', done => {
292292
done()
293293
})
294294
})
295+
296+
// #1426
297+
test('disable prettify', done => {
298+
mockBundleAndRun({
299+
entry: 'prettier-bug.vue',
300+
vue: {
301+
productionMode: false,
302+
prettify: false
303+
}
304+
}, () => {
305+
done()
306+
})
307+
})

0 commit comments

Comments
 (0)