From 039c98a1b1dc5188d9843b1d256421aaa790a452 Mon Sep 17 00:00:00 2001 From: Konrad Mohrfeldt Date: Tue, 2 Mar 2021 12:50:48 +0100 Subject: [PATCH 01/67] docs: illustrate usage of alternative deep selector expressions (#1647) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Without examples of the exact syntax the use of `::v-deep` and `/deep/` as alternative deep selectors is somewhat ambiguous as it’s not entirely clear where these expressions are expected. --- docs/guide/scoped-css.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/guide/scoped-css.md b/docs/guide/scoped-css.md index 5f19e8a51..904a2c58f 100644 --- a/docs/guide/scoped-css.md +++ b/docs/guide/scoped-css.md @@ -62,7 +62,19 @@ The above will be compiled into: .a[data-v-f3f3eg9] .b { /* ... */ } ``` -Some pre-processors, such as Sass, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` or `::v-deep` combinator instead - both are aliases for `>>>` and work exactly the same. +Some pre-processors, such as Sass, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` or `::v-deep` combinator instead - both are aliases for `>>>` and work exactly the same. Based on the example above these two expressions will be compiled to the same output: + +``` html + +``` + +``` html + +``` ## Dynamically Generated Content From 7af8db40f670aebbdaa4a6fefbbfe56c0e62dd1e Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 4 Mar 2021 14:42:26 +0800 Subject: [PATCH 02/67] chore: update .npmignore --- .npmignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.npmignore b/.npmignore index 5bbdf6a08..6e52da593 100644 --- a/.npmignore +++ b/.npmignore @@ -6,3 +6,5 @@ yarn.lock tsconfig.json docs .github +.vscode +TODOS From 434357cd4a945846afe2d11ba7ebaea43bb065cc Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 4 Mar 2021 14:48:20 +0800 Subject: [PATCH 03/67] docs: update configuration example to import plugin from the main entry --- docs/guide/README.md | 2 +- docs/migrating.md | 2 +- docs/ru/guide/README.md | 4 ++-- docs/ru/migrating.md | 2 +- docs/zh/guide/README.md | 4 ++-- docs/zh/migrating.md | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/guide/README.md b/docs/guide/README.md index 3af08bd39..035f870e6 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -26,7 +26,7 @@ Vue Loader's configuration is a bit different from other loaders. In addition to ``` js // webpack.config.js -const VueLoaderPlugin = require('vue-loader/lib/plugin') +const { VueLoaderPlugin } = require('vue-loader') module.exports = { module: { diff --git a/docs/migrating.md b/docs/migrating.md index 73586d5de..3d073f753 100644 --- a/docs/migrating.md +++ b/docs/migrating.md @@ -17,7 +17,7 @@ Vue Loader v15 now requires an accompanying webpack plugin to function properly: ``` js // webpack.config.js -const VueLoaderPlugin = require('vue-loader/lib/plugin') +const { VueLoaderPlugin } = require('vue-loader') module.exports = { // ... diff --git a/docs/ru/guide/README.md b/docs/ru/guide/README.md index 07d33314f..bdcb76b02 100644 --- a/docs/ru/guide/README.md +++ b/docs/ru/guide/README.md @@ -26,7 +26,7 @@ npm install -D vue-loader vue-template-compiler ``` js // webpack.config.js -const VueLoaderPlugin = require('vue-loader/lib/plugin') +const { VueLoaderPlugin } = require('vue-loader') module.exports = { module: { @@ -51,7 +51,7 @@ module.exports = { ``` js // webpack.config.js -const VueLoaderPlugin = require('vue-loader/lib/plugin') +const { VueLoaderPlugin } = require('vue-loader') module.exports = { mode: 'development', diff --git a/docs/ru/migrating.md b/docs/ru/migrating.md index 1eb0e5445..66f820c2a 100644 --- a/docs/ru/migrating.md +++ b/docs/ru/migrating.md @@ -17,7 +17,7 @@ Vue Loader v15 теперь для правильной работы требу ``` js // webpack.config.js -const VueLoaderPlugin = require('vue-loader/lib/plugin') +const { VueLoaderPlugin } = require('vue-loader') module.exports = { // ... diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md index 6afd0ba2f..b2796a4af 100644 --- a/docs/zh/guide/README.md +++ b/docs/zh/guide/README.md @@ -26,7 +26,7 @@ Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则 ``` js // webpack.config.js -const VueLoaderPlugin = require('vue-loader/lib/plugin') +const { VueLoaderPlugin } = require('vue-loader') module.exports = { module: { @@ -51,7 +51,7 @@ module.exports = { ``` js // webpack.config.js -const VueLoaderPlugin = require('vue-loader/lib/plugin') +const { VueLoaderPlugin } = require('vue-loader') module.exports = { mode: 'development', diff --git a/docs/zh/migrating.md b/docs/zh/migrating.md index 3894e835c..3f56b4397 100644 --- a/docs/zh/migrating.md +++ b/docs/zh/migrating.md @@ -17,7 +17,7 @@ Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用： ``` js // webpack.config.js -const VueLoaderPlugin = require('vue-loader/lib/plugin') +const { VueLoaderPlugin } = require('vue-loader') module.exports = { // ... From b53ae44e4b9958db290f5918248071e9d2445d38 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 4 Mar 2021 15:02:25 +0800 Subject: [PATCH 04/67] fixup! docs: update configuration example to import plugin from the main entry --- docs/guide/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/README.md b/docs/guide/README.md index 035f870e6..d4b89fd61 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -51,7 +51,7 @@ A more complete example webpack config will look like this: ``` js // webpack.config.js -const VueLoaderPlugin = require('vue-loader/lib/plugin') +const { VueLoaderPlugin } = require('vue-loader') module.exports = { mode: 'development', From f7ee30b1d0d2398b78cac521000d9710d7972cad Mon Sep 17 00:00:00 2001 From: Ramkumar Ramachandra Date: Tue, 11 May 2021 09:19:26 +0200 Subject: [PATCH 05/67] fix: [plugin] Use compiler.webpack when possible (#1822) fixes #1781 --- lib/plugin-webpack5.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/plugin-webpack5.js b/lib/plugin-webpack5.js index 9b156ff12..c1eee5906 100644 --- a/lib/plugin-webpack5.js +++ b/lib/plugin-webpack5.js @@ -31,9 +31,10 @@ const ruleSetCompiler = new RuleSetCompiler([ class VueLoaderPlugin { apply (compiler) { + const normalModule = compiler.webpack.NormalModule || require("webpack/lib/NormalModule") // add NS marker so that the loader can detect and report missing plugin compiler.hooks.compilation.tap(id, compilation => { - const normalModuleLoader = require('webpack/lib/NormalModule').getCompilationHooks(compilation).loader + const normalModuleLoader = normalModule.getCompilationHooks(compilation).loader normalModuleLoader.tap(id, loaderContext => { loaderContext[NS] = true }) From 2472b2f71d0d0a5ce56e067b7697a496a495ea7c Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Tue, 11 May 2021 15:20:53 +0800 Subject: [PATCH 06/67] fix: check for compiler.webpack existence It's only available since webpack 5.1 --- lib/plugin-webpack5.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/plugin-webpack5.js b/lib/plugin-webpack5.js index c1eee5906..91126ffec 100644 --- a/lib/plugin-webpack5.js +++ b/lib/plugin-webpack5.js @@ -31,7 +31,9 @@ const ruleSetCompiler = new RuleSetCompiler([ class VueLoaderPlugin { apply (compiler) { - const normalModule = compiler.webpack.NormalModule || require("webpack/lib/NormalModule") + const normalModule = compiler.webpack + ? compiler.webpack.NormalModule + : require('webpack/lib/NormalModule') // add NS marker so that the loader can detect and report missing plugin compiler.hooks.compilation.tap(id, compilation => { const normalModuleLoader = normalModule.getCompilationHooks(compilation).loader From 34f73e9173c2b689eae94f08d7a2fb653dd40a5f Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Tue, 11 May 2021 15:21:54 +0800 Subject: [PATCH 07/67] 15.9.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 647d6c7f4..586292590 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-loader", - "version": "15.9.6", + "version": "15.9.7", "description": "Vue single-file component loader for Webpack", "main": "lib/index.js", "typings": "lib/index.d.ts", From b179fb9c1b3bc0507f021be208c359d0dedeec08 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Tue, 11 May 2021 15:22:26 +0800 Subject: [PATCH 08/67] chore: v15.9.7 changelog --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4985760c4..9e14c91c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ + +## [15.9.7](https://github.com/vuejs/vue-loader/compare/v15.9.6...v15.9.7) (2021-05-11) + + +### Bug Fixes + +* [plugin] Use compiler.webpack when possible ([#1822](https://github.com/vuejs/vue-loader/issues/1822)) ([f7ee30b](https://github.com/vuejs/vue-loader/commit/f7ee30b)), closes [#1781](https://github.com/vuejs/vue-loader/issues/1781) +* check for compiler.webpack existence ([2472b2f](https://github.com/vuejs/vue-loader/commit/2472b2f)) + + + ## [15.9.6](https://github.com/vuejs/vue-loader/compare/v15.9.5...v15.9.6) (2020-12-17) From 689075d763994a536022ea31348186f0a2c27460 Mon Sep 17 00:00:00 2001 From: Alexander Sokolov Date: Tue, 6 Jul 2021 13:22:49 +0300 Subject: [PATCH 09/67] docs: [RU] Translation update (#1823) Co-authored-by: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com> --- docs/ru/guide/pre-processors.md | 4 ++-- docs/ru/guide/scoped-css.md | 16 ++++++++++++++-- docs/zh/guide/pre-processors.md | 2 +- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/docs/ru/guide/pre-processors.md b/docs/ru/guide/pre-processors.md index 41e846598..26fa8439d 100644 --- a/docs/ru/guide/pre-processors.md +++ b/docs/ru/guide/pre-processors.md @@ -75,7 +75,7 @@ module.exports = { ### Передача глобальных переменных -`sass-loader` также поддерживает опцию `prependData`, которая позволяет вам передавать общие переменные во все обрабатываемые файлы без необходимости везде их явно импортировать: +`sass-loader` также поддерживает опцию `additionalData`, которая позволяет вам передавать общие переменные во все обрабатываемые файлы без необходимости везде их явно импортировать: ``` js // webpack.config.js -> module.rules @@ -222,7 +222,7 @@ module.exports = { } ``` -Конфигурация TypeScipt может быть выполнена через `tsconfig.json`. Также смотрите документацию для [ts-loader](https://github.com/TypeStrong/ts-loader). +Конфигурация TypeScript может быть выполнена через `tsconfig.json`. Также смотрите документацию для [ts-loader](https://github.com/TypeStrong/ts-loader). ## Pug diff --git a/docs/ru/guide/scoped-css.md b/docs/ru/guide/scoped-css.md index fc927075b..978cb53da 100644 --- a/docs/ru/guide/scoped-css.md +++ b/docs/ru/guide/scoped-css.md @@ -62,7 +62,19 @@ .a[data-v-f3f3eg9] .b { /* ... */ } ``` -Некоторые пре-процессоры, такие как Sass, не могут правильно обработать `>>>`. В таких случаях используйте комбинатор `/deep/` или `::v-deep` — оба псевдонимы для `>>>` и работают аналогично. +Некоторые пре-процессоры, такие как Sass, не могут правильно обработать `>>>`. В таких случаях используйте комбинатор `/deep/` или `::v-deep` — оба псевдонимы для `>>>` и работают аналогично. На основе примера выше, эти два выражения будут скомпилированы в один и тот же результат: + +``` html + +``` + +``` html + +``` ## Динамически генерируемый контент @@ -70,6 +82,6 @@ DOM-содержимое, создаваемое с помощью `v-html` не ## О чём следует помнить -- **Локальные стили не устраняют необходимость классов.** Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](https://stevesouders.com/efws/css-selectors/csscreate.php) где можете проверить разницу самостоятельно. +- **Локальные стили не устраняют необходимость классов.** Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. - **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу. diff --git a/docs/zh/guide/pre-processors.md b/docs/zh/guide/pre-processors.md index d8f6107da..aeb64cc99 100644 --- a/docs/zh/guide/pre-processors.md +++ b/docs/zh/guide/pre-processors.md @@ -75,7 +75,7 @@ module.exports = { ### 共享全局变量 -`sass-loader` 也支持一个 `prependData` 选项，这个选项允许你在所有被处理的文件之间共享常见的变量，而不需要显式地导入它们： +`sass-loader` 也支持一个 `additionalData` 选项，这个选项允许你在所有被处理的文件之间共享常见的变量，而不需要显式地导入它们： ``` js // webpack.config.js -> module.rules From c4c5f173433801c8e3a6b28738129cf599498c06 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Mon, 2 Aug 2021 23:57:10 +0800 Subject: [PATCH 10/67] fix: fix webpack 5.48 compatibility Fixes #1859 --- lib/plugin-webpack5.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/lib/plugin-webpack5.js b/lib/plugin-webpack5.js index 91126ffec..38df2431c 100644 --- a/lib/plugin-webpack5.js +++ b/lib/plugin-webpack5.js @@ -3,10 +3,21 @@ const id = 'vue-loader-plugin' const NS = 'vue-loader' const BasicEffectRulePlugin = require('webpack/lib/rules/BasicEffectRulePlugin') const BasicMatcherRulePlugin = require('webpack/lib/rules/BasicMatcherRulePlugin') -const DescriptionDataMatcherRulePlugin = require('webpack/lib/rules/DescriptionDataMatcherRulePlugin') const RuleSetCompiler = require('webpack/lib/rules/RuleSetCompiler') const UseEffectRulePlugin = require('webpack/lib/rules/UseEffectRulePlugin') +const objectMatcherRulePlugins = [] +try { + const ObjectMatcherRulePlugin = require('webpack/lib/rules/ObjectMatcherRulePlugin') + objectMatcherRulePlugins.push( + new ObjectMatcherRulePlugin('assert', 'assertions'), + new ObjectMatcherRulePlugin('descriptionData') + ) +} catch (e) { + const DescriptionDataMatcherRulePlugin = require('webpack/lib/rules/DescriptionDataMatcherRulePlugin') + objectMatcherRulePlugins.push(new DescriptionDataMatcherRulePlugin()) +} + const ruleSetCompiler = new RuleSetCompiler([ new BasicMatcherRulePlugin('test', 'resource'), new BasicMatcherRulePlugin('mimetype'), @@ -20,7 +31,7 @@ const ruleSetCompiler = new RuleSetCompiler([ new BasicMatcherRulePlugin('realResource'), new BasicMatcherRulePlugin('issuer'), new BasicMatcherRulePlugin('compiler'), - new DescriptionDataMatcherRulePlugin(), + ...objectMatcherRulePlugins, new BasicEffectRulePlugin('type'), new BasicEffectRulePlugin('sideEffects'), new BasicEffectRulePlugin('parser'), From 7123a37ff68eaaebec515b029fb602cb4d8cf498 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Mon, 2 Aug 2021 23:59:05 +0800 Subject: [PATCH 11/67] 15.9.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 586292590..19fcba6b7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-loader", - "version": "15.9.7", + "version": "15.9.8", "description": "Vue single-file component loader for Webpack", "main": "lib/index.js", "typings": "lib/index.d.ts", From 4240e5bb7a3ebf45c5de2e6d991a669949e10162 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Mon, 2 Aug 2021 23:59:24 +0800 Subject: [PATCH 12/67] chore: v15.9.8 changelog --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e14c91c2..1d1f3d014 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ + +## [15.9.8](https://github.com/vuejs/vue-loader/compare/v15.9.7...v15.9.8) (2021-08-02) + + +### Bug Fixes + +* fix webpack 5.48 compatibility ([c4c5f17](https://github.com/vuejs/vue-loader/commit/c4c5f17)), closes [#1859](https://github.com/vuejs/vue-loader/issues/1859) + + + ## [15.9.7](https://github.com/vuejs/vue-loader/compare/v15.9.6...v15.9.7) (2021-05-11) From c503322542e45337e65b051baf4cb4599a2c1629 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Sun, 10 Oct 2021 03:29:24 -0500 Subject: [PATCH 13/67] chore: fix typo (#1872) --- lib/plugin-webpack4.js | 2 +- lib/plugin-webpack5.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/plugin-webpack4.js b/lib/plugin-webpack4.js index a56b5edce..c06aea275 100644 --- a/lib/plugin-webpack4.js +++ b/lib/plugin-webpack4.js @@ -48,7 +48,7 @@ class VueLoaderPlugin { ) } - // get the normlized "use" for vue files + // get the normalized "use" for vue files const vueUse = vueRule.use // get vue-loader options const vueLoaderUseIndex = vueUse.findIndex(u => { diff --git a/lib/plugin-webpack5.js b/lib/plugin-webpack5.js index 38df2431c..02d0642a2 100644 --- a/lib/plugin-webpack5.js +++ b/lib/plugin-webpack5.js @@ -95,7 +95,7 @@ class VueLoaderPlugin { ) } - // get the normlized "use" for vue files + // get the normalized "use" for vue files const vueUse = vueRules.filter(rule => rule.type === 'use').map(rule => rule.value) // get vue-loader options From c1f46604a38fa5e1b58d31d402de8acf25f8eb35 Mon Sep 17 00:00:00 2001 From: jayconscious Date: Sun, 10 Oct 2021 16:30:02 +0800 Subject: [PATCH 14/67] chore: update code comment (#1860) --- lib/plugin-webpack4.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/plugin-webpack4.js b/lib/plugin-webpack4.js index c06aea275..f05ec4a86 100644 --- a/lib/plugin-webpack4.js +++ b/lib/plugin-webpack4.js @@ -69,7 +69,7 @@ class VueLoaderPlugin { vueLoaderUse.ident = 'vue-loader-options' vueLoaderUse.options = vueLoaderUse.options || {} - // for each user rule (expect the vue rule), create a cloned rule + // for each user rule (except the vue rule), create a cloned rule // that targets the corresponding language blocks in *.vue files. const clonedRules = rules .filter(r => r !== vueRule) From 308715ac560ccbd48d173b1bbf689611e50a7e54 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 10 Jun 2022 22:53:57 +0800 Subject: [PATCH 15/67] feat: compat for vue 2.7, support `