Merge branch 'master' into dev-server-property

Author: ylemkimon

CODE_OF_CONDUCT.md

@@ -0,0 +1,7 @@
+## Code of Conduct
+
+At webpack and webpack/webpack-dev-server repository we follow the [JSFoundation Code of Conduct][1].
+Please adhere to the guidelines there and feel free to report any violation of them to the **@webpack/core-team**,
+**@webpack/dev-server-team**, or <[email protected]>.
+
+[1]: https://github.com/openjs-foundation/code-and-learn/blob/main/CODE_OF_CONDUCT.md

CONTRIBUTING.md

@@ -10,18 +10,24 @@ Following these guidelines helps to communicate that you respect the time of the
 
 - There are hooks to add your own features, so we should not add less-common features.
 - The workflow should be to start webpack-dev-server as a separate process, next to the "normal" server and to request the script from this server or to proxy from dev-server to "normal" server (because webpack blocks the event queue too much while compiling which can affect "normal" server).
-- A user should not try to implement stuff that accesses the webpack filesystem. This lead to bugs (the middleware does it while blocking requests until the compilation has finished, the blocking is important).
+- A user should not try to implement stuff that accesses the webpack filesystem. This leads to bugs (the middleware does it while blocking requests until the compilation has finished, the blocking is important).
 - It should be a development only tool. Compiling in production is bad, one should precompile and deliver the compiled assets.
 - Processing options and stats display is delegated to webpack, so webpack-dev-server/middleware should not do much with it. This also helps us to keep up-to-date with webpack updates.
 - The communication library (`SockJS`) should not be exposed to the user.
 
 ## Submitting a Pull Request
 
-Good pull requests, such as patches, improvements, and new features, are a fantastic help. They should remain focused in scope and not contain unrelated commits.
+- Good pull requests, such as patches, improvements, and new features, are a fantastic help. They should remain focused in scope and not contain unrelated commits.
 
-It is advised to first create an issue (if there is not one already) before making a pull request. This way the maintainers can first discuss with you if they agree and it also helps with providing some context.
+- It is advised to first create an issue (if there is not one already) before making a pull request. This way the maintainers can first discuss with you if they agree and it also helps with providing some context.
 
-Run the relevant [examples](https://github.com/webpack/webpack-dev-server/tree/master/examples) to see if all functionality still works. When introducing new functionality, also add an example. This helps the maintainers to understand it and check if it still works.
+- Run the relevant [examples](https://github.com/webpack/webpack-dev-server/tree/master/examples) to see if all functionality still works. When introducing new functionality, also add an example. This helps the maintainers to understand it and check if it still works.
+
+- Write tests.
+
+- Follow the existing coding style.
+
+- Make sure your PR's description contains GitHub's special keyword references that automatically close the related issue when the PR is merged. ([More info](https://github.com/blog/1506-closing-issues-via-pull-requests))
 
 ## Setting Up a Local Copy
 
@@ -31,7 +37,7 @@ Run the relevant [examples](https://github.com/webpack/webpack-dev-server/tree/m
 
 3. Run `npm link && npm link webpack-dev-server` to link the current project to `node_modules`.
 
-Once it is done, you can modify any file locally. In the `examples/` directory you'll find a lot of examples with instructions on how to run it. This can be very handy when testing if your code works.
+Once it is done, you can modify any file locally. In the `examples/` directory you'll find a lot of examples with instructions on how to run them. This can be very handy when testing if your code works.
 
 If you are modifying a file in the `client/` directory, be sure to run `npm run build:client` after it. This will recompile the files.
 

README.md

@@ -102,7 +102,8 @@ Options:
   --history-api-fallback     Fallback to /index.html for Single Page Applications.
   --compress                 Enable gzip compression.
   --public <value>           The public hostname/ip address of the server.
-  --firewall <value...>      Enable/disable firewall, or set hosts that are allowed to access the dev server.
+  --firewall [value...]      Enable firewall or set hosts that are allowed to access the dev server.
+  --no-firewall              Disable firewall.
 
 Global options:
   --color                    Enable colors on console.
@@ -161,7 +162,7 @@ needed modifications to the code for the module. Because of that, we ask users
 with general support, "how-to", or "why isn't this working" questions to try one
 of the other support channels that are available.
 
-Your first-stop-shop for support for webpack-dev-server should by the excellent
+Your first-stop-shop for support for webpack-dev-server should be the excellent
 [documentation][docs-url] for the module. If you see an opportunity for improvement
 of those docs, please head over to the [webpack.js.org repo][wjo-url] and open a
 pull request.

bin/cli-flags.js

@@ -30,11 +30,15 @@ module.exports = {
       name: 'https',
       type: Boolean,
       description: 'Use HTTPS protocol.',
+      negatedDescription: 'Do not use HTTPS protocol.',
+      negative: true,
     },
     {
       name: 'http2',
       type: Boolean,
       description: 'Use HTTP/2, must be used with HTTPS.',
+      negatedDescription: 'Do not use HTTP/2.',
+      negative: true,
     },
     {
       name: 'bonjour',
@@ -105,11 +109,16 @@ module.exports = {
       name: 'history-api-fallback',
       type: Boolean,
       description: 'Fallback to /index.html for Single Page Applications.',
+      negatedDescription:
+        'Do not fallback to /index.html for Single Page Applications.',
+      negative: true,
     },
     {
       name: 'compress',
       type: Boolean,
       description: 'Enable gzip compression.',
+      negatedDescription: 'Disable gzip compression.',
+      negative: true,
     },
     {
       name: 'public',
@@ -118,10 +127,12 @@ module.exports = {
     },
     {
       name: 'firewall',
-      type: String,
+      type: [String, Boolean],
       description:
-        'Enable/disable firewall, or set hosts that are allowed to access the dev server.',
+        'Enable firewall or set hosts that are allowed to access the dev server.',
+      negatedDescription: 'Disable firewall.',
       multiple: true,
+      negative: true,
     },
   ],
 };

client-src/default/index.js

@@ -30,40 +30,48 @@ self.addEventListener('beforeunload', () => {
 
 if (typeof window !== 'undefined') {
   const qs = window.location.search.toLowerCase();
+
   options.hotReload = qs.indexOf('hotreload=false') === -1;
 }
 
 const onSocketMessage = {
   hot() {
     options.hot = true;
+
     log.info('Hot Module Replacement enabled.');
   },
   liveReload() {
     options.liveReload = true;
+
     log.info('Live Reloading enabled.');
   },
   invalid() {
     log.info('App updated. Recompiling...');
+
     // fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
     if (options.useWarningOverlay || options.useErrorOverlay) {
       overlay.clear();
     }
+
     sendMessage('Invalid');
   },
   hash(hash) {
     status.currentHash = hash;
   },
   'still-ok': function stillOk() {
     log.info('Nothing changed.');
+
     if (options.useWarningOverlay || options.useErrorOverlay) {
       overlay.clear();
     }
+
     sendMessage('StillOk');
   },
   logging: function logging(level) {
     // this is needed because the HMR logger operate separately from
     // dev server logger
     const hotCtx = require.context('webpack/hot', false, /^\.\/log$/);
+
     if (hotCtx.keys().indexOf('./log') !== -1) {
       hotCtx('./log').setLogLevel(level);
     }
@@ -90,29 +98,40 @@ const onSocketMessage = {
     if (options.useProgress) {
       log.info(`${data.percent}% - ${data.msg}.`);
     }
+
     sendMessage('Progress', data);
   },
   ok() {
     sendMessage('Ok');
+
     if (options.useWarningOverlay || options.useErrorOverlay) {
       overlay.clear();
     }
+
     if (options.initial) {
       return (options.initial = false);
     }
+
     reloadApp(options, status);
   },
   'content-changed': function contentChanged() {
     log.info('Content base changed. Reloading...');
+
     self.location.reload();
   },
   warnings(warnings) {
     log.warn('Warnings while compiling.');
-    const strippedWarnings = warnings.map((warning) => stripAnsi(warning));
+
+    const strippedWarnings = warnings.map((warning) =>
+      stripAnsi(warning.message ? warning.message : warning)
+    );
+
     sendMessage('Warnings', strippedWarnings);
+
     for (let i = 0; i < strippedWarnings.length; i++) {
       log.warn(strippedWarnings[i]);
     }
+
     if (options.useWarningOverlay) {
       overlay.showMessage(warnings);
     }
@@ -125,16 +144,21 @@ const onSocketMessage = {
   },
   errors(errors) {
     log.error('Errors while compiling. Reload prevented.');
+
     const strippedErrors = errors.map((error) =>
       stripAnsi(error.message ? error.message : error)
     );
+
     sendMessage('Errors', strippedErrors);
+
     for (let i = 0; i < strippedErrors.length; i++) {
       log.error(strippedErrors[i]);
     }
+
     if (options.useErrorOverlay) {
       overlay.showMessage(errors);
     }
+
     options.initial = false;
   },
   error(error) {

client-src/default/overlay.js

@@ -4,9 +4,8 @@
 // They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
 
 const ansiHTML = require('ansi-html');
-const { AllHtmlEntities } = require('html-entities');
+const { encode } = require('html-entities');
 
-const entities = new AllHtmlEntities();
 const colors = {
   reset: ['transparent', 'transparent'],
   black: '181818',
@@ -114,7 +113,7 @@ function showMessage(messages) {
   ensureOverlayDivExists((div) => {
     // Make it look similar to our terminal.
     const errorMessage = messages[0].message || messages[0];
-    const text = ansiHTML(entities.encode(errorMessage));
+    const text = ansiHTML(encode(errorMessage));
 
     div.innerHTML = `<span style="color: #${colors.red}">Failed to compile.</span><br><br>${text}`;
   });

lib/Server.js

@@ -752,6 +752,7 @@ class Server {
 
     const configArr = getCompilerConfigArray(this.compiler);
     const statsOption = getStatsOption(configArr);
+
     if (typeof statsOption === 'object' && statsOption.warningsFilter) {
       stats.warningsFilter = statsOption.warningsFilter;
     }