fix: improve message for static content changes (#3289)

Author: snitin315

client-src/index.js

@@ -137,8 +137,22 @@ const onSocketMessage = {
 
     reloadApp(options, status);
   },
-  'content-changed': function contentChanged() {
-    log.info('Content base changed. Reloading...');
+  // TODO: remove in v5 in favor of 'static-changed'
+  'content-changed': function contentChanged(file) {
+    log.info(
+      `${
+        file ? `"${file}"` : 'Content'
+      } from static directory was changed. Reloading...`
+    );
+
+    self.location.reload();
+  },
+  'static-changed': function staticChanged(file) {
+    log.info(
+      `${
+        file ? `"${file}"` : 'Content'
+      } from static directory was changed. Reloading...`
+    );
 
     self.location.reload();
   },

lib/Server.js

@@ -1121,7 +1121,7 @@ class Server {
     // disabling refreshing on changing the content
     if (this.options.liveReload) {
       watcher.on('change', () => {
-        this.sockWrite(this.sockets, 'content-changed');
+        this.sockWrite(this.sockets, 'static-changed', watchPath);
       });
     }
 

test/client/__snapshots__/index.test.js.snap.webpack4

@@ -80,7 +80,13 @@ Array [
 ]
 `;
 
-exports[`index should run onSocketMessage['content-changed'] 1`] = `"Content base changed. Reloading..."`;
+exports[`index should run onSocketMessage['content-changed'] 1`] = `"Content from static directory was changed. Reloading..."`;
+
+exports[`index should run onSocketMessage['content-changed'](file) 1`] = `"\\"/public/assets/index.html\\" from static directory was changed. Reloading..."`;
+
+exports[`index should run onSocketMessage['static-changed'] 1`] = `"Content from static directory was changed. Reloading..."`;
+
+exports[`index should run onSocketMessage['static-changed'](file) 1`] = `"\\"/static/assets/index.html\\" from static directory was changed. Reloading..."`;
 
 exports[`index should run onSocketMessage['still-ok'] 1`] = `"Nothing changed."`;
 
@@ -103,6 +109,7 @@ Array [
     "overlay": [Function],
     "progress": [Function],
     "progress-update": [Function],
+    "static-changed": [Function],
     "still-ok": [Function],
     "warnings": [Function],
   },

test/client/__snapshots__/index.test.js.snap.webpack5

@@ -80,7 +80,13 @@ Array [
 ]
 `;
 
-exports[`index should run onSocketMessage['content-changed'] 1`] = `"Content base changed. Reloading..."`;
+exports[`index should run onSocketMessage['content-changed'] 1`] = `"Content from static directory was changed. Reloading..."`;
+
+exports[`index should run onSocketMessage['content-changed'](file) 1`] = `"\\"/public/assets/index.html\\" from static directory was changed. Reloading..."`;
+
+exports[`index should run onSocketMessage['static-changed'] 1`] = `"Content from static directory was changed. Reloading..."`;
+
+exports[`index should run onSocketMessage['static-changed'](file) 1`] = `"\\"/static/assets/index.html\\" from static directory was changed. Reloading..."`;
 
 exports[`index should run onSocketMessage['still-ok'] 1`] = `"Nothing changed."`;
 
@@ -103,6 +109,7 @@ Array [
     "overlay": [Function],
     "progress": [Function],
     "progress-update": [Function],
+    "static-changed": [Function],
     "still-ok": [Function],
     "warnings": [Function],
   },

test/client/index.test.js

@@ -185,6 +185,27 @@ describe('index', () => {
     expect(self.location.reload).toBeCalled();
   });
 
+  test("should run onSocketMessage['content-changed'](file)", () => {
+    onSocketMessage['content-changed']('/public/assets/index.html');
+
+    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(self.location.reload).toBeCalled();
+  });
+
+  test("should run onSocketMessage['static-changed']", () => {
+    onSocketMessage['static-changed']();
+
+    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(self.location.reload).toBeCalled();
+  });
+
+  test("should run onSocketMessage['static-changed'](file)", () => {
+    onSocketMessage['static-changed']('/static/assets/index.html');
+
+    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(self.location.reload).toBeCalled();
+  });
+
   test('should run onSocketMessage.warnings', () => {
     {
       const res = onSocketMessage.warnings([