Skip to content

Commit cc701fc

Browse files
alfredriesenalfredriesen
committed
* https://github.com/vuejs/vue-loader: (23 commits) chore: changelog 15.6.0 feat: make `__file` injection opt-in in production (vuejs#1475) fix: template comments replace windows \ to / confirm consistent hash (vuejs#1477) docs(zh): updated eslint plugin link (vuejs#1471) chore: todo [ci skip] feat: support for compiler 2.6 outputSourceRange feat: support webpack 5 hooks (vuejs#1469) docs: [RU] Translation update (vuejs#1470) chore: changelog 15.5.1 fix: avoid to generate empty css chunk files (vuejs#1464) chore: changelog 15.5.0 feat: add `prettify` option (vuejs#1461) chore: add missing dependencies (vuejs#1336) fix: css modules extends error (vuejs#1452) docs: [RU] Translation update (vuejs#1448) Update eslint-plugin-vue documentation link (vuejs#1444) docs: remove unnecessary `path` module usage (vuejs#1430) ...
2 parents 91c7f41 + 87f0a2f commit cc701fc

25 files changed

+727
-934
lines changed

Diff for: ‎CHANGELOG.md

+54
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,57 @@
1+
<a name="15.6.0"></a>
2+
# [15.6.0](https://github.com/vuejs/vue-loader/compare/v15.5.1...v15.6.0) (2019-01-23)
3+
4+
5+
### Bug Fixes
6+
7+
* template comments replace windows \ to / confirm consistent hash ([#1477](https://github.com/vuejs/vue-loader/issues/1477)) ([adc6dd6](https://github.com/vuejs/vue-loader/commit/adc6dd6))
8+
9+
10+
### Features
11+
12+
* make `__file` injection opt-in in production ([#1475](https://github.com/vuejs/vue-loader/issues/1475)) ([001382d](https://github.com/vuejs/vue-loader/commit/001382d))
13+
* support for compiler 2.6 outputSourceRange ([2215585](https://github.com/vuejs/vue-loader/commit/2215585))
14+
* support webpack 5 hooks ([#1469](https://github.com/vuejs/vue-loader/issues/1469)) ([7275ae4](https://github.com/vuejs/vue-loader/commit/7275ae4))
15+
16+
17+
18+
<a name="15.5.1"></a>
19+
## [15.5.1](https://github.com/vuejs/vue-loader/compare/v15.5.0...v15.5.1) (2019-01-08)
20+
21+
22+
### Bug Fixes
23+
24+
* avoid to generate empty css chunk files ([#1464](https://github.com/vuejs/vue-loader/issues/1464)) ([c444ab6](https://github.com/vuejs/vue-loader/commit/c444ab6))
25+
26+
27+
28+
<a name="15.5.0"></a>
29+
# [15.5.0](https://github.com/vuejs/vue-loader/compare/v15.4.0...v15.5.0) (2019-01-04)
30+
31+
32+
### Bug Fixes
33+
34+
* css modules extends error ([#1452](https://github.com/vuejs/vue-loader/issues/1452)) ([082c6ea](https://github.com/vuejs/vue-loader/commit/082c6ea)), closes [#1449](https://github.com/vuejs/vue-loader/issues/1449)
35+
* hide ext appending behind a flag (ref [#1372](https://github.com/vuejs/vue-loader/issues/1372)) ([f0beed3](https://github.com/vuejs/vue-loader/commit/f0beed3))
36+
* include query in loader dedupe ([4a894de](https://github.com/vuejs/vue-loader/commit/4a894de)), closes [vue-cli#2451](https://github.com/vue-cli/issues/2451)
37+
38+
39+
### Features
40+
41+
* add `prettify` option ([#1461](https://github.com/vuejs/vue-loader/issues/1461)) ([62a9155](https://github.com/vuejs/vue-loader/commit/62a9155)), closes [#1426](https://github.com/vuejs/vue-loader/issues/1426)
42+
43+
44+
45+
<a name="15.4.2"></a>
46+
## [15.4.2](https://github.com/vuejs/vue-loader/compare/v15.4.1...v15.4.2) (2018-09-11)
47+
48+
49+
### Bug Fixes
50+
51+
* include query in loader dedupe ([4a894de](https://github.com/vuejs/vue-loader/commit/4a894de)), closes [vue-cli#2451](https://github.com/vue-cli/issues/2451)
52+
53+
54+
155
<a name="15.4.1"></a>
256
## [15.4.1](https://github.com/vuejs/vue-loader/compare/v15.4.0...v15.4.1) (2018-08-26)
357

Diff for: ‎docs/guide/README.md

-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ A more complete example webpack config will look like this:
3737

3838
``` js
3939
// webpack.config.js
40-
const path = require('path')
4140
const VueLoaderPlugin = require('vue-loader/lib/plugin')
4241

4342
module.exports = {

Diff for: ‎docs/guide/linting.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## ESLint
44

5-
The official [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) supports linting both the template and script parts of Vue single file components.
5+
The official [eslint-plugin-vue](https://eslint.vuejs.org/) supports linting both the template and script parts of Vue single file components.
66

77
Make sure to use the plugin's included config in your ESLint config:
88

Diff for: ‎docs/options.md

+16
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,19 @@ 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.
95+
96+
## exposeFilename
97+
98+
- type: `boolean`
99+
- default: `false`
100+
101+
In non-production environments, vue-loader injects a `__file` property to components for better debugging experience. If the `name` property is missing in a component, Vue will infer it from the `__file` field to display in console warnings.
102+
103+
This property is stripped in production builds by default. But you may want to retain it if you are developing a component library and don't want to bother specifying `name` in each component. Then you can turn this option on.

Diff for: ‎docs/ru/guide/README.md

-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ module.exports = {
3737

3838
``` js
3939
// webpack.config.js
40-
const path = require('path')
4140
const VueLoaderPlugin = require('vue-loader/lib/plugin')
4241

4342
module.exports = {

Diff for: ‎docs/ru/guide/linting.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## ESLint
44

5-
Официальный плагин [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue.
5+
Официальный плагин [eslint-plugin-vue](https://eslint.vuejs.org/) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue.
66

77
Убедитесь, что используете поставляемую с плагином конфигурацию в вашей конфигурации ESLint:
88

Diff for: ‎docs/ru/guide/testing.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22

33
- [Vue CLI](https://github.com/vuejs/vue-cli) предлагает вам готовые решения для модульного и e2e-тестирования.
44

5-
- Если вы заинтересованы в ручной настройке модульного тестирования для `*.vue` файлов, ознакомьтесь с [документацией для `@vue/test-utils`](https://vue-test-utils.vuejs.org), которая описывает настройку тестов с помощью [mocha-webpack](https://vue-test-utils.vuejs.org/ru/guides/#%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B4%D0%BD%D0%BE%D1%84%D0%B0%D0%B9n%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D1%81-mocha-webpack) или [Jest](https://vue-test-utils.vuejs.org/ru/guides/#%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B4%D0%BD%D0%BE%D1%84%D0%B0%D0%B9n%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D1%81-jest).
5+
- Если вы заинтересованы в ручной настройке модульного тестирования для `*.vue` файлов, ознакомьтесь с [документацией для `@vue/test-utils`](https://vue-test-utils.vuejs.org/ru/), которая описывает настройку тестов с помощью [mocha-webpack](https://vue-test-utils.vuejs.org/ru/guides/#%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B4%D0%BD%D0%BE%D1%84%D0%B0%D0%B9n%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D1%81-mocha-webpack) или [Jest](https://vue-test-utils.vuejs.org/ru/guides/#%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B4%D0%BD%D0%BE%D1%84%D0%B0%D0%B9n%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D1%81-jest).

Diff for: ‎docs/ru/options.md

+7
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,10 @@ sidebar: auto
8585
::: tip СОВЕТ
8686
Взаимодействие между `vue-loader` и `cache-loader` использует [инлайновый синтаксис импорта загрузчиков](https://webpack.js.org/concepts/loaders/#inline) внутри, где символ `!` будет рассматриваться как разделитель между различными загрузчиками. Поэтому убедитесь, что `cacheDirectory` не содержит символов `!`.
8787
:::
88+
89+
## prettify
90+
91+
- Тип: `boolean`
92+
- По умолчанию: `true`
93+
94+
В режиме разработки по умолчанию используется [prettier](https://prettier.io/) для форматирования скомпилированной render-функции для удобства отладки. Однако, если вы столкнётесь с какой-либо непонятной ошибкой самого prettier, такой как [экспоненциальное время компиляции для глубоко вложенных функций](https://github.com/prettier/prettier/issues/4672), можно отключить эту опцию.

Diff for: ‎docs/zh/guide/README.md

-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ module.exports = {
3737

3838
``` js
3939
// webpack.config.js
40-
const path = require('path')
4140
const VueLoaderPlugin = require('vue-loader/lib/plugin')
4241

4342
module.exports = {

Diff for: ‎docs/zh/guide/linting.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## ESLint
44

5-
官方的 [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。
5+
官方的 [eslint-plugin-vue](https://eslint.vuejs.org/) 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。
66

77
请确认在你的 ESLint 配置文件中使用该插件要导入的配置：
88

Diff for: ‎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)，你可以通过禁用这个选项来绕开。

Diff for: ‎lib/codegen/styleInjection.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const { attrsToQuery } = require('./utils')
22
const hotReloadAPIPath = JSON.stringify(require.resolve('vue-hot-reload-api'))
3+
const nonWhitespaceRE = /\S+/
34

45
module.exports = function genStyleInjectionCode (
56
loaderContext,
@@ -48,6 +49,7 @@ module.exports = function genStyleInjectionCode (
4849
styleInjectionCode += `
4950
cssModules[${name}] = ${locals}
5051
Object.defineProperty(this, ${name}, {
52+
configurable: true,
5153
get: function () {
5254
return cssModules[${name}]
5355
}
@@ -68,6 +70,8 @@ module.exports = function genStyleInjectionCode (
6870
}
6971
}
7072

73+
// filter out empty styles (with no `src` specified or only contains whitespaces)
74+
styles = styles.filter(style => style.src || nonWhitespaceRE.test(style.content))
7175
// explicit injection is needed in SSR (for critical CSS collection)
7276
// or in Shadow Mode (for injection into shadow root)
7377
// In these modes, vue-style-loader exports objects with the __inject__

Diff for: ‎lib/index.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -176,14 +176,15 @@ var component = normalizer(
176176
}
177177

178178
// Expose filename. This is used by the devtools and Vue runtime warnings.
179-
code += `\ncomponent.options.__file = ${
180-
isProduction
181-
// For security reasons, only expose the file's basename in production.
182-
? JSON.stringify(filename)
183-
// Expose the file's full path in development, so that it can be opened
184-
// from the devtools.
185-
: JSON.stringify(rawShortFilePath.replace(/\\/g, '/'))
186-
}`
179+
if (!isProduction) {
180+
// Expose the file's full path in development, so that it can be opened
181+
// from the devtools.
182+
code += `\ncomponent.options.__file = ${JSON.stringify(rawShortFilePath.replace(/\\/g, '/'))}`
183+
} else if (options.exposeFilename) {
184+
// Libraies can opt-in to expose their components' filenames in production builds.
185+
// For security reasons, only expose the file's basename in production.
186+
code += `\ncomponent.options.__file = ${JSON.stringify(filename)}`
187+
}
187188

188189
code += `\nexport default component.exports`
189190
// console.log(code)

Diff for: ‎lib/loaders/pitcher.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,19 @@ module.exports.pitch = function (remainingRequest) {
6363
// also make sure to dedupe based on loader path.
6464
// assumes you'd probably never want to apply the same loader on the same
6565
// file twice.
66+
// Exception: in Vue CLI we do need two instances of postcss-loader
67+
// for user config and inline minification. So we need to dedupe baesd on
68+
// path AND query to be safe.
6669
const seen = new Map()
6770
const loaderStrings = []
6871

6972
loaders.forEach(loader => {
70-
const type = typeof loader === 'string' ? loader : loader.path
73+
const identifier = typeof loader === 'string'
74+
? loader
75+
: (loader.path + loader.query)
7176
const request = typeof loader === 'string' ? loader : loader.request
72-
if (!seen.has(type)) {
73-
seen.set(type, true)
77+
if (!seen.has(identifier)) {
78+
seen.set(identifier, true)
7479
// loader.request contains both the resolved loader path and its options
7580
// query (e.g. ??ref-0)
7681
loaderStrings.push(request)
@@ -107,9 +112,9 @@ module.exports.pitch = function (remainingRequest) {
107112
// For some reason, webpack fails to generate consistent hash if we
108113
// use absolute paths here, even though the path is only used in a
109114
// comment. For now we have to ensure cacheDirectory is a relative path.
110-
cacheDirectory: path.isAbsolute(cacheDirectory)
115+
cacheDirectory: (path.isAbsolute(cacheDirectory)
111116
? path.relative(process.cwd(), cacheDirectory)
112-
: cacheDirectory,
117+
: cacheDirectory).replace(/\\/g, '/'),
113118
cacheIdentifier: hash(cacheIdentifier) + '-vue-loader-template'
114119
})}`]
115120
: []

Diff for: ‎lib/loaders/templateLoader.js

+25-7
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ module.exports = function (source) {
2020

2121
// allow using custom compiler via options
2222
const compiler = options.compiler || require('vue-template-compiler')
23-
const compilerOptions = Object.assign({}, options.compilerOptions, {
23+
24+
const compilerOptions = Object.assign({
25+
outputSourceRange: true
26+
}, options.compilerOptions, {
2427
scopeId: query.scoped ? `data-v-${id}` : null,
2528
comments: query.comments
2629
})
@@ -36,25 +39,40 @@ module.exports = function (source) {
3639
transformAssetUrls: options.transformAssetUrls || true,
3740
isProduction,
3841
isFunctional,
39-
optimizeSSR: isServer && options.optimizeSSR !== false
42+
optimizeSSR: isServer && options.optimizeSSR !== false,
43+
prettify: options.prettify
4044
}
4145

4246
const compiled = compileTemplate(finalOptions)
4347

4448
// tips
4549
if (compiled.tips && compiled.tips.length) {
4650
compiled.tips.forEach(tip => {
47-
loaderContext.emitWarning(tip)
51+
loaderContext.emitWarning(typeof tip === 'object' ? tip.msg : tip)
4852
})
4953
}
5054

5155
// errors
5256
if (compiled.errors && compiled.errors.length) {
53-
loaderContext.emitError(
54-
`\n Error compiling template:\n${pad(compiled.source)}\n` +
55-
compiled.errors.map(e => ` - ${e}`).join('\n') +
57+
// 2.6 compiler outputs errors as objects with range
58+
if (compiler.generateCodeFrame && finalOptions.outputSourceRange) {
59+
// TODO account for line offset in case template isn't placed at top
60+
// of the file
61+
loaderContext.emitError(
62+
`\n\n Errors compiling template:\n\n` +
63+
compiled.errors.map(({ msg, start, end }) => {
64+
const frame = compiler.generateCodeFrame(source, start, end)
65+
return ` ${msg}\n\n${pad(frame)}`
66+
}).join(`\n\n`) +
5667
'\n'
57-
)
68+
)
69+
} else {
70+
loaderContext.emitError(
71+
`\n Error compiling template:\n${pad(compiled.source)}\n` +
72+
compiled.errors.map(e => ` - ${e}`).join('\n') +
73+
'\n'
74+
)
75+
}
5876
}
5977

6078
const { code } = compiled

Diff for: ‎lib/plugin.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@ class VueLoaderPlugin {
1010
if (compiler.hooks) {
1111
// webpack 4
1212
compiler.hooks.compilation.tap(id, compilation => {
13-
compilation.hooks.normalModuleLoader.tap(id, loaderContext => {
13+
let normalModuleLoader
14+
if (Object.isFrozen(compilation.hooks)) {
15+
// webpack 5
16+
normalModuleLoader = require('webpack/lib/NormalModule').getCompilationHooks(compilation).loader
17+
} else {
18+
normalModuleLoader = compilation.hooks.normalModuleLoader
19+
}
20+
normalModuleLoader.tap(id, loaderContext => {
1421
loaderContext[NS] = true
1522
})
1623
})

Diff for: ‎package.json

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-loader",
3-
"version": "15.4.1",
3+
"version": "15.6.0",
44
"description": "Vue single-file component loader for Webpack",
55
"main": "lib/index.js",
66
"typings": "lib/index.d.ts",
@@ -33,10 +33,11 @@
3333
]
3434
},
3535
"peerDependencies": {
36-
"css-loader": "*"
36+
"css-loader": "*",
37+
"webpack": "^4.1.0 || ^5.0.0-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",
@@ -57,6 +58,7 @@
5758
"jsdom": "^11.6.2",
5859
"lint-staged": "^7.0.0",
5960
"markdown-loader": "^2.0.2",
61+
"memory-fs": "^0.4.1",
6062
"mini-css-extract-plugin": "^0.4.1",
6163
"node-sass": "^4.7.2",
6264
"normalize-newline": "^3.0.0",
@@ -66,6 +68,7 @@
6668
"pug-plain-loader": "^1.0.0",
6769
"raw-loader": "^0.5.1",
6870
"sass-loader": "^6.0.7",
71+
"source-map": "^0.5.0",
6972
"stylus": "^0.54.5",
7073
"stylus-loader": "^3.0.2",
7174
"sugarss": "^1.0.1",
@@ -78,7 +81,7 @@
7881
"vuepress": "^0.14.2",
7982
"vuepress-theme-vue": "^1.1.0",
8083
"webpack": "^4.1.0",
81-
"webpack-cli": "^2.0.10",
84+
"webpack-cli": "^3.2.0",
8285
"webpack-dev-server": "^3.1.1",
8386
"webpack-merge": "^4.1.2",
8487
"yorkie": "^1.0.3"

0 commit comments

Comments
 (0)