feat: added magicHtml option (#3717)

Author: snitin315

README.md

@@ -132,6 +132,8 @@ Options:
  --ipc [value] Listen to a unix socket.
  --live-reload Enables reload/refresh the page(s) when file changes are detected (enabled by default).
  --no-live-reload Negative 'live-reload' option.
+ --magic-html Enables/Disables magic HTML routes (enabled by default).
+ --no-magic-html Negative 'magic-html' option.
  --open [value...] Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to
  true to open your default browser).
  --no-open Negative 'open' option.

bin/cli-flags.js

@@ -534,6 +534,19 @@ module.exports = {
  simpleType: "boolean",
  multiple: false,
  },
+ "magic-html": {
+ configs: [
+ {
+ type: "boolean",
+ multiple: false,
+ description: "Enables/Disables magic HTML routes (enabled by default).",
+ path: "magicHtml",
+ },
+ ],
+ description: "Enables/Disables magic HTML routes (enabled by default).",
+ simpleType: "boolean",
+ multiple: false,
+ },
  open: {
  configs: [
  {

lib/Server.js

@@ -431,6 +431,9 @@ class Server {
  options.liveReload =
  typeof options.liveReload !== "undefined" ? options.liveReload : true;
 
+ options.magicHtml =
+ typeof options.magicHtml !== "undefined" ? options.magicHtml : true;
+
  // https://github.com/webpack/webpack-dev-server/issues/1990
  const defaultOpenOptions = { wait: false };
  const getOpenItemsFromObject = ({ target, ...rest }) => {
@@ -1132,7 +1135,9 @@ class Server {
  runnableFeatures.push("staticServeIndex", "staticWatch");
  }
 
- runnableFeatures.push("magicHtml");
+ if (this.options.magicHtml) {
+ runnableFeatures.push("magicHtml");
+ }
 
  if (this.options.onAfterSetupMiddleware) {
  runnableFeatures.push("onAfterSetupMiddleware");

lib/options.json

@@ -331,6 +331,11 @@
  "description": "Enables reload/refresh the page(s) when file changes are detected (enabled by default).",
  "link": "https://webpack.js.org/configuration/dev-server/#devserverlivereload"
  },
+ "MagicHTML": {
+ "type": "boolean",
+ "description": "Enables/Disables magic HTML routes (enabled by default).",
+ "link": "https://webpack.js.org/configuration/dev-server/#devservermagichtml"
+ },
  "OnAfterSetupMiddleware": {
  "instanceof": "Function",
  "description": "Provides the ability to execute a custom function and apply custom middleware(s) after all other middlewares.",
@@ -729,6 +734,9 @@
  "liveReload": {
  "$ref": "#/definitions/LiveReload"
  },
+ "magicHtml": {
+ "$ref": "#/definitions/MagicHTML"
+ },
  "onAfterSetupMiddleware": {
  "$ref": "#/definitions/OnAfterSetupMiddleware"
  },

test/__snapshots__/validate-options.test.js.snap.webpack4

@@ -439,6 +439,13 @@ exports[`options validate should throw an error on the "liveReload" option with
  -> Read more at https://webpack.js.org/configuration/dev-server/#devserverlivereload"
 `;
 
+exports[`options validate should throw an error on the "magicHtml" option with 'string' value 1`] = `
+"ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
+ - options.magicHtml should be a boolean.
+ -> Enables/Disables magic HTML routes (enabled by default).
+ -> Read more at https://webpack.js.org/configuration/dev-server/#devservermagichtml"
+`;
+
 exports[`options validate should throw an error on the "onAfterSetupMiddleware" option with 'false' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.onAfterSetupMiddleware should be an instance of function.

test/__snapshots__/validate-options.test.js.snap.webpack5

@@ -439,6 +439,13 @@ exports[`options validate should throw an error on the "liveReload" option with
  -> Read more at https://webpack.js.org/configuration/dev-server/#devserverlivereload"
 `;
 
+exports[`options validate should throw an error on the "magicHtml" option with 'string' value 1`] = `
+"ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
+ - options.magicHtml should be a boolean.
+ -> Enables/Disables magic HTML routes (enabled by default).
+ -> Read more at https://webpack.js.org/configuration/dev-server/#devservermagichtml"
+`;
+
 exports[`options validate should throw an error on the "onAfterSetupMiddleware" option with 'false' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.onAfterSetupMiddleware should be an instance of function.

test/cli/__snapshots__/basic.test.js.snap.webpack4

@@ -99,6 +99,8 @@ Options:
  --ipc [value] Listen to a unix socket.
  --live-reload Enables reload/refresh the page(s) when file changes are detected (enabled by default).
  --no-live-reload Disables reload/refresh the page(s) when file changes are detected (enabled by default)
+ --magic-html Enables/Disables magic HTML routes (enabled by default).
+ --no-magic-html Negative 'magic-html' option.
  --open [value...] Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser).
  --no-open Does not open the default browser.
  --open-target <value...> Opens specified page in browser.

test/cli/__snapshots__/basic.test.js.snap.webpack5

@@ -98,6 +98,8 @@ Options:
  --ipc [value] Listen to a unix socket.
  --live-reload Enables reload/refresh the page(s) when file changes are detected (enabled by default).
  --no-live-reload Negative 'live-reload' option.
+ --magic-html Enables/Disables magic HTML routes (enabled by default).
+ --no-magic-html Negative 'magic-html' option.
  --open [value...] Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser).
  --no-open Negative 'open' option.
  --open-target <value...> Opens specified page in browser.

test/cli/magicHtml-option.test.js

@@ -0,0 +1,18 @@
+"use strict";
+
+const { testBin } = require("../helpers/test-bin");
+const port = require("../ports-map")["cli-magic-html"];
+
+describe('"liveReload" CLI option', () => {
+ it('should work using "--magic-html"', async () => {
+ const { exitCode } = await testBin(["--port", port, "--magic-html"]);
+
+ expect(exitCode).toEqual(0);
+ });
+
+ it('should work using "--no-magic-html"', async () => {
+ const { exitCode } = await testBin(["--port", port, "--no-magic-html"]);
+
+ expect(exitCode).toEqual(0);
+ });
+});

test/e2e/__snapshots__/magic-html.test.js.snap.webpack4

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`magicHtml option disabled should not handle GET request to magic async html: console messages 1`] = `
+Array [
+ "Failed to load resource: the server responded with a status of 404 (Not Found)",
+]
+`;
+
+exports[`magicHtml option disabled should not handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`;
+
+exports[`magicHtml option disabled should not handle GET request to magic async html: response status 1`] = `404`;
+
+exports[`magicHtml option disabled should not handle HEAD request to magic async html: console messages 1`] = `
+Array [
+ "Failed to load resource: the server responded with a status of 404 (Not Found)",
+]
+`;
+
+exports[`magicHtml option disabled should not handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`;
+
+exports[`magicHtml option disabled should not handle HEAD request to magic async html: response status 1`] = `404`;
+
+exports[`magicHtml option enabled should handle GET request to magic async html: console messages 1`] = `
+Array [
+ "[HMR] Waiting for update signal from WDS...",
+ "Hey.",
+ "[webpack-dev-server] Hot Module Replacement enabled.",
+ "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`magicHtml option enabled should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`;
+
+exports[`magicHtml option enabled should handle GET request to magic async html: response status 1`] = `200`;
+
+exports[`magicHtml option enabled should handle HEAD request to magic async html: console messages 1`] = `Array []`;
+
+exports[`magicHtml option enabled should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`;
+
+exports[`magicHtml option enabled should handle HEAD request to magic async html: response status 1`] = `200`;