From e4ec28c1131a65819c2e17f976f77bc491af0835 Mon Sep 17 00:00:00 2001 From: Stephen Niedzielski Date: Wed, 10 Jun 2020 19:54:25 -0600 Subject: [PATCH 1/2] feat: add stats option Expose a stats option to make hot module replacement and other informational messages optional. Only stat presets are supported but the API can be expanded to an object later if useful. --- README.md | 7 +++++++ src/hmr/hotModuleReplacement.js | 19 +++++++++++++++---- src/loader-options.json | 10 ++++++++++ 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 159e11e8..a681f4cd 100644 --- a/README.md +++ b/README.md @@ -188,6 +188,13 @@ module.exports = { }; ``` +### `stats` + +Type: `String|Boolean` +Default: `'normal'` + +The [logging preset](https://webpack.js.org/configuration/stats/#stats-presets) to use. Object syntax is unsupported at this time. + ## Examples ### Minimal example diff --git a/src/hmr/hotModuleReplacement.js b/src/hmr/hotModuleReplacement.js index 802c0a12..86847f9c 100644 --- a/src/hmr/hotModuleReplacement.js +++ b/src/hmr/hotModuleReplacement.js @@ -196,8 +196,19 @@ function isUrlRequest(url) { } module.exports = function(moduleId, options) { + // By default, log everything. For certain presets, do not log informational + // messages. See https://webpack.js.org/configuration/stats/#stats-presets. + const stats = options.stats === undefined ? 'normal' : options.stats; // eslint-disable-line no-undefined + const log = + stats === 'errors-only' || + stats === 'errors-warnings' || + stats === 'none' || + stats === false + ? () => {} + : console.log; + if (noDocument) { - console.log('no window.document found, will not HMR CSS'); + log('no window.document found, will not HMR CSS'); return noop; } @@ -209,7 +220,7 @@ module.exports = function(moduleId, options) { const reloaded = reloadStyle(src); if (options.locals) { - console.log('[HMR] Detected local css modules. Reload all css'); + log('[HMR] Detected local css modules. Reload all css'); reloadAll(); @@ -217,9 +228,9 @@ module.exports = function(moduleId, options) { } if (reloaded && !options.reloadAll) { - console.log('[HMR] css reload %s', src.join(' ')); + log('[HMR] css reload %s', src.join(' ')); } else { - console.log('[HMR] Reload all css'); + log('[HMR] Reload all css'); reloadAll(); } diff --git a/src/loader-options.json b/src/loader-options.json index 6fc6080a..347dfeed 100644 --- a/src/loader-options.json +++ b/src/loader-options.json @@ -20,6 +20,16 @@ }, "reloadAll": { "type": "boolean" + }, + "stats": { + "anyOf": [ + { + "type": "string" + }, + { + "type": "boolean" + } + ] } } } From db6e536a188ec5dddf05d9bb9e9e791416a47a3b Mon Sep 17 00:00:00 2001 From: Stephen Niedzielski Date: Thu, 11 Jun 2020 21:47:23 -0600 Subject: [PATCH 2/2] refactor: replace stats with clientLogLevel --- README.md | 10 +++-- package-lock.json | 7 ++-- package.json | 1 + src/hmr/hotModuleReplacement.js | 24 +++++------ src/loader-options.json | 18 ++++---- .../validate-loader-options.test.js.snap | 42 +++++++++++++++++++ test/validate-loader-options.test.js | 13 ++++++ 7 files changed, 85 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index a681f4cd..28e4a944 100644 --- a/README.md +++ b/README.md @@ -188,12 +188,13 @@ module.exports = { }; ``` -### `stats` +### `clientLogLevel` -Type: `String|Boolean` -Default: `'normal'` +Type: `String` +Default: `'info'` -The [logging preset](https://webpack.js.org/configuration/stats/#stats-presets) to use. Object syntax is unsupported at this time. +The browser console logging level as described by +[webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserverclientloglevel). ## Examples @@ -308,6 +309,7 @@ module.exports = { loader: MiniCssExtractPlugin.loader, options: { hmr: process.env.NODE_ENV === 'development', + clientLogLevel: 'warn', }, }, 'css-loader', diff --git a/package-lock.json b/package-lock.json index 35117107..50b793f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9645,10 +9645,9 @@ } }, "loglevel": { - "version": "1.6.6", - "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.6.tgz", - "integrity": "sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==", - "dev": true + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz", + "integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==" }, "loose-envify": { "version": "1.4.0", diff --git a/package.json b/package.json index 01a2cd4e..36d75d27 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ }, "dependencies": { "loader-utils": "^1.1.0", + "loglevel": "^1.6.8", "normalize-url": "1.9.1", "schema-utils": "^1.0.0", "webpack-sources": "^1.1.0" diff --git a/src/hmr/hotModuleReplacement.js b/src/hmr/hotModuleReplacement.js index 86847f9c..81cf063d 100644 --- a/src/hmr/hotModuleReplacement.js +++ b/src/hmr/hotModuleReplacement.js @@ -6,6 +6,9 @@ */ const normalizeUrl = require('normalize-url'); +const logger = require('loglevel').getLogger('mini-css-extract-plugin'); + +logger.setDefaultLevel('info'); const srcByModuleId = Object.create(null); @@ -196,19 +199,12 @@ function isUrlRequest(url) { } module.exports = function(moduleId, options) { - // By default, log everything. For certain presets, do not log informational - // messages. See https://webpack.js.org/configuration/stats/#stats-presets. - const stats = options.stats === undefined ? 'normal' : options.stats; // eslint-disable-line no-undefined - const log = - stats === 'errors-only' || - stats === 'errors-warnings' || - stats === 'none' || - stats === false - ? () => {} - : console.log; + if (options.clientLogLevel) { + logger.setLevel(options.clientLogLevel); + } if (noDocument) { - log('no window.document found, will not HMR CSS'); + logger.info('no window.document found, will not HMR CSS'); return noop; } @@ -220,7 +216,7 @@ module.exports = function(moduleId, options) { const reloaded = reloadStyle(src); if (options.locals) { - log('[HMR] Detected local css modules. Reload all css'); + logger.info('[HMR] Detected local css modules. Reload all css'); reloadAll(); @@ -228,9 +224,9 @@ module.exports = function(moduleId, options) { } if (reloaded && !options.reloadAll) { - log('[HMR] css reload %s', src.join(' ')); + logger.info('[HMR] css reload %s', src.join(' ')); } else { - log('[HMR] Reload all css'); + logger.info('[HMR] Reload all css'); reloadAll(); } diff --git a/src/loader-options.json b/src/loader-options.json index 347dfeed..0040b92f 100644 --- a/src/loader-options.json +++ b/src/loader-options.json @@ -21,14 +21,16 @@ "reloadAll": { "type": "boolean" }, - "stats": { - "anyOf": [ - { - "type": "string" - }, - { - "type": "boolean" - } + "clientLogLevel": { + "enum": [ + "info", + "warn", + "error", + "debug", + "trace", + "silent", + "none", + "warning" ] } } diff --git a/test/__snapshots__/validate-loader-options.test.js.snap b/test/__snapshots__/validate-loader-options.test.js.snap index 739a747b..8847fba1 100644 --- a/test/__snapshots__/validate-loader-options.test.js.snap +++ b/test/__snapshots__/validate-loader-options.test.js.snap @@ -1,5 +1,47 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`validate options should throw an error on the "clientLogLevel" option with "{}" value 1`] = ` +"Mini CSS Extract Plugin Loader Invalid Options + +options.clientLogLevel should be equal to one of the allowed values +" +`; + +exports[`validate options should throw an error on the "clientLogLevel" option with "0" value 1`] = ` +"Mini CSS Extract Plugin Loader Invalid Options + +options.clientLogLevel should be equal to one of the allowed values +" +`; + +exports[`validate options should throw an error on the "clientLogLevel" option with "1" value 1`] = ` +"Mini CSS Extract Plugin Loader Invalid Options + +options.clientLogLevel should be equal to one of the allowed values +" +`; + +exports[`validate options should throw an error on the "clientLogLevel" option with "false" value 1`] = ` +"Mini CSS Extract Plugin Loader Invalid Options + +options.clientLogLevel should be equal to one of the allowed values +" +`; + +exports[`validate options should throw an error on the "clientLogLevel" option with "foo" value 1`] = ` +"Mini CSS Extract Plugin Loader Invalid Options + +options.clientLogLevel should be equal to one of the allowed values +" +`; + +exports[`validate options should throw an error on the "clientLogLevel" option with "true" value 1`] = ` +"Mini CSS Extract Plugin Loader Invalid Options + +options.clientLogLevel should be equal to one of the allowed values +" +`; + exports[`validate options should throw an error on the "esModule" option with "1" value 1`] = ` "Mini CSS Extract Plugin Loader Invalid Options diff --git a/test/validate-loader-options.test.js b/test/validate-loader-options.test.js index 016e0e83..33d986e4 100644 --- a/test/validate-loader-options.test.js +++ b/test/validate-loader-options.test.js @@ -18,6 +18,19 @@ describe('validate options', () => { success: [true, false], failure: [1], }, + clientLogLevel: { + success: [ + 'info', + 'warn', + 'error', + 'debug', + 'trace', + 'silent', + 'none', + 'warning', + ], + failure: [true, false, 'foo', 0, 1, {}], + }, unknown: { success: [], // TODO failed in next release