feat: add client.hotEntry and --client-hot-entry (#3294)

snitin315 · web-flow · commit c0b073d48bad · 2021-05-15T19:13:20.000+03:00
diff --git a/README.md b/README.md
@@ -108,6 +108,8 @@ Options:
   --no-http2                       Do not use HTTP/2.
   --bonjour                        Broadcasts the server via ZeroConf networking on start.
   --no-bonjour                     Do not broadcast the server via ZeroConf networking on start.
+  --client-hot-entry               Tell devServer to inject a Hot Module Replacement entry.
+  --no-client-hot-entry            Do not tell devServer to inject a Hot Module Replacement entry.
   --client-progress                Print compilation progress in percentage in the browser.
   --no-client-progress             Do not print compilation progress in percentage in the browser.
   --client-overlay                 Show a full-screen overlay in the browser when there are compiler errors or warnings.
diff --git a/bin/cli-flags.js b/bin/cli-flags.js
@@ -244,6 +244,24 @@ module.exports = {
         'Do not broadcast the server via ZeroConf networking on start.',
       negative: true,
     },
+    {
+      name: 'client-hot-entry',
+      type: Boolean,
+      configs: [
+        {
+          type: 'boolean',
+        },
+      ],
+      description: 'Tell devServer to inject a Hot Module Replacement entry.',
+      negatedDescription:
+        'Do not tell devServer to inject a Hot Module Replacement entry.',
+      negative: true,
+      processor(opts) {
+        opts.client = opts.client || {};
+        opts.client.hotEntry = opts.clientHotEntry;
+        delete opts.clientHotEntry;
+      },
+    },
     {
       name: 'client-progress',
       type: Boolean,
diff --git a/lib/options.json b/lib/options.json
@@ -270,7 +270,7 @@
           ],
           "description": "Tells devServer to inject a client entry."
         },
-        "needHotEntry": {
+        "hotEntry": {
           "anyOf": [
             {
               "type": "boolean"
diff --git a/lib/utils/DevServerPlugin.js b/lib/utils/DevServerPlugin.js
@@ -180,7 +180,7 @@ class DevServerPlugin {
     if (
       hotEntry &&
       checkInject(
-        options.client ? options.client.needHotEntry : null,
+        options.client ? options.client.hotEntry : null,
         compilerOptions,
         true
       )
diff --git a/lib/utils/normalizeOptions.js b/lib/utils/normalizeOptions.js
@@ -108,6 +108,11 @@ function normalizeOptions(compiler, options) {
     options.client.overlay = true;
   }
 
+  // client.hotEntry
+  if (typeof options.client.hotEntry === 'undefined') {
+    options.client.hotEntry = options.hot;
+  }
+
   options.devMiddleware = options.devMiddleware || {};
 
   if (typeof options.firewall === 'undefined') {
diff --git a/test/__snapshots__/validate-options.test.js.snap.webpack4 b/test/__snapshots__/validate-options.test.js.snap.webpack4
@@ -18,6 +18,16 @@ exports[`options validate should throw an error on the "client" option with '{"h
    -> Tells clients connected to devServer to use the provided host."
 `;
 
+exports[`options validate should throw an error on the "client" option with '{"hotEntry":[""]}' value 1`] = `
+"ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
+ - configuration.client.hotEntry should be one of these:
+   boolean | function
+   -> Tells devServer to inject a Hot Module Replacement entry.
+   Details:
+    * configuration.client.hotEntry should be a boolean.
+    * configuration.client.hotEntry should be an instance of function."
+`;
+
 exports[`options validate should throw an error on the "client" option with '{"logging":"silent"}' value 1`] = `
 "ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
  - configuration.client.logging should be one of these:
@@ -40,16 +50,6 @@ exports[`options validate should throw an error on the "client" option with '{"n
     * configuration.client.needClientEntry should be an instance of function."
 `;
 
-exports[`options validate should throw an error on the "client" option with '{"needHotEntry":[""]}' value 1`] = `
-"ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
- - configuration.client.needHotEntry should be one of these:
-   boolean | function
-   -> Tells devServer to inject a Hot Module Replacement entry.
-   Details:
-    * configuration.client.needHotEntry should be a boolean.
-    * configuration.client.needHotEntry should be an instance of function."
-`;
-
 exports[`options validate should throw an error on the "client" option with '{"overlay":""}' value 1`] = `
 "ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
  - configuration.client.overlay should be one of these:
@@ -110,14 +110,14 @@ exports[`options validate should throw an error on the "client" option with '{"t
 exports[`options validate should throw an error on the "client" option with '{"unknownOption":true}' value 1`] = `
 "ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
  - configuration.client has an unknown property 'unknownOption'. These properties are valid:
-   object { transport?, host?, path?, port?, logging?, progress?, overlay?, needClientEntry?, needHotEntry? }
+   object { transport?, host?, path?, port?, logging?, progress?, overlay?, needClientEntry?, hotEntry? }
    -> Specifies client properties. https://webpack.js.org/configuration/dev-server/#devserverclient"
 `;
 
 exports[`options validate should throw an error on the "client" option with 'whoops!' value 1`] = `
 "ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
  - configuration.client should be an object:
-   object { transport?, host?, path?, port?, logging?, progress?, overlay?, needClientEntry?, needHotEntry? }
+   object { transport?, host?, path?, port?, logging?, progress?, overlay?, needClientEntry?, hotEntry? }
    -> Specifies client properties. https://webpack.js.org/configuration/dev-server/#devserverclient"
 `;
 
diff --git a/test/__snapshots__/validate-options.test.js.snap.webpack5 b/test/__snapshots__/validate-options.test.js.snap.webpack5
@@ -18,6 +18,16 @@ exports[`options validate should throw an error on the "client" option with '{"h
    -> Tells clients connected to devServer to use the provided host."
 `;
 
+exports[`options validate should throw an error on the "client" option with '{"hotEntry":[""]}' value 1`] = `
+"ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
+ - configuration.client.hotEntry should be one of these:
+   boolean | function
+   -> Tells devServer to inject a Hot Module Replacement entry.
+   Details:
+    * configuration.client.hotEntry should be a boolean.
+    * configuration.client.hotEntry should be an instance of function."
+`;
+
 exports[`options validate should throw an error on the "client" option with '{"logging":"silent"}' value 1`] = `
 "ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
  - configuration.client.logging should be one of these:
@@ -40,16 +50,6 @@ exports[`options validate should throw an error on the "client" option with '{"n
     * configuration.client.needClientEntry should be an instance of function."
 `;
 
-exports[`options validate should throw an error on the "client" option with '{"needHotEntry":[""]}' value 1`] = `
-"ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
- - configuration.client.needHotEntry should be one of these:
-   boolean | function
-   -> Tells devServer to inject a Hot Module Replacement entry.
-   Details:
-    * configuration.client.needHotEntry should be a boolean.
-    * configuration.client.needHotEntry should be an instance of function."
-`;
-
 exports[`options validate should throw an error on the "client" option with '{"overlay":""}' value 1`] = `
 "ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
  - configuration.client.overlay should be one of these:
@@ -110,14 +110,14 @@ exports[`options validate should throw an error on the "client" option with '{"t
 exports[`options validate should throw an error on the "client" option with '{"unknownOption":true}' value 1`] = `
 "ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
  - configuration.client has an unknown property 'unknownOption'. These properties are valid:
-   object { transport?, host?, path?, port?, logging?, progress?, overlay?, needClientEntry?, needHotEntry? }
+   object { transport?, host?, path?, port?, logging?, progress?, overlay?, needClientEntry?, hotEntry? }
    -> Specifies client properties. https://webpack.js.org/configuration/dev-server/#devserverclient"
 `;
 
 exports[`options validate should throw an error on the "client" option with 'whoops!' value 1`] = `
 "ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
  - configuration.client should be an object:
-   object { transport?, host?, path?, port?, logging?, progress?, overlay?, needClientEntry?, needHotEntry? }
+   object { transport?, host?, path?, port?, logging?, progress?, overlay?, needClientEntry?, hotEntry? }
    -> Specifies client properties. https://webpack.js.org/configuration/dev-server/#devserverclient"
 `;
 
diff --git a/test/cli/__snapshots__/cli.test.js.snap.webpack4 b/test/cli/__snapshots__/cli.test.js.snap.webpack4
@@ -237,6 +237,10 @@ Options:
                                    networking on start.
   --no-bonjour                     Do not broadcast the server via ZeroConf
                                    networking on start.
+  --client-hot-entry               Tell devServer to inject a Hot Module
+                                   Replacement entry.
+  --no-client-hot-entry            Do not tell devServer to inject a Hot Module
+                                   Replacement entry.
   --client-progress                Print compilation progress in percentage in
                                    the browser.
   --no-client-progress             Do not print compilation progress in
diff --git a/test/cli/__snapshots__/cli.test.js.snap.webpack5 b/test/cli/__snapshots__/cli.test.js.snap.webpack5
@@ -238,6 +238,10 @@ Options:
                                    networking on start.
   --no-bonjour                     Do not broadcast the server via ZeroConf
                                    networking on start.
+  --client-hot-entry               Tell devServer to inject a Hot Module
+                                   Replacement entry.
+  --no-client-hot-entry            Do not tell devServer to inject a Hot Module
+                                   Replacement entry.
   --client-progress                Print compilation progress in percentage in
                                    the browser.
   --no-client-progress             Do not print compilation progress in
diff --git a/test/cli/cli.test.js b/test/cli/cli.test.js
@@ -105,6 +105,50 @@ describe('CLI', () => {
       .catch(done);
   });
 
+  it('--client-hot-entry', (done) => {
+    testBin('--client-hot-entry --stats=detailed')
+      .then((output) => {
+        expect(output.exitCode).toEqual(0);
+        expect(output.stdout).toContain('webpack/hot/dev-server.js');
+
+        done();
+      })
+      .catch(done);
+  });
+
+  it('--no-client-hot-entry', (done) => {
+    testBin('--no-client-hot-entry --stats=detailed')
+      .then((output) => {
+        expect(output.exitCode).toEqual(0);
+        expect(output.stdout).not.toContain('webpack/hot/dev-server.js');
+
+        done();
+      })
+      .catch(done);
+  });
+
+  it('should not inject HMR entry "--client-hot-entry" and "--no-hot"', (done) => {
+    testBin('--client-hot-entry --no-hot --stats=detailed')
+      .then((output) => {
+        expect(output.exitCode).toEqual(0);
+        expect(output.stdout).not.toContain('webpack/hot/dev-server.js');
+
+        done();
+      })
+      .catch(done);
+  });
+
+  it('should not inject HMR entry with "--no-client-hot-entry" and "--hot"', (done) => {
+    testBin('--no-client-hot-entry --hot --stats=detailed')
+      .then((output) => {
+        expect(output.exitCode).toEqual(0);
+        expect(output.stdout).not.toContain('webpack/hot/dev-server.js');
+
+        done();
+      })
+      .catch(done);
+  });
+
   it('--http2', (done) => {
     testBin('--http2')
       .then((output) => {
diff --git a/test/server/client-option.test.js b/test/server/client-option.test.js
@@ -96,7 +96,7 @@ describe('client option', () => {
         config,
         {
           client: {
-            needHotEntry: false,
+            hotEntry: false,
           },
           port,
         },
diff --git a/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack4 b/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack4
diff --git a/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack5 b/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack5
diff --git a/test/validate-options.test.js b/test/validate-options.test.js

Original file line number	Diff line number	Diff line change
`@@ -270,7 +270,7 @@`
`270`	`270`	`],`
`271`	`271`	`"description": "Tells devServer to inject a client entry."`
`272`	`272`	`},`
`273`		`- "needHotEntry": {`
	`273`	`+ "hotEntry": {`
`274`	`274`	`"anyOf": [`
`275`	`275`	`{`
`276`	`276`	`"type": "boolean"`
Original file line number	Diff line number	Diff line change
`@@ -180,7 +180,7 @@ class DevServerPlugin {`
`180`	`180`	`if (`
`181`	`181`	`hotEntry &&`
`182`	`182`	`checkInject(`
`183`		`- options.client ? options.client.needHotEntry : null,`
	`183`	`+ options.client ? options.client.hotEntry : null,`
`184`	`184`	`compilerOptions,`
`185`	`185`	`true`
`186`	`186`	`)`
Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ describe('client option', () => {`
`96`	`96`	`config,`
`97`	`97`	`{`
`98`	`98`	`client: {`
`99`		`- needHotEntry: false,`
	`99`	`+ hotEntry: false,`
`100`	`100`	`},`
`101`	`101`	`port,`
`102`	`102`	`},`