test: refactor client

Author: alexander-akait

client-src/clients/SockJSClient.js

@@ -8,11 +8,12 @@ module.exports = class SockJSClient extends BaseClient {
   constructor(url) {
     super();
 
-    const sockUrl = url.replace(/^(?:chrome-extension|file)/i, 'http');
-
-    this.sock = new SockJS(sockUrl);
-    this.sock.onerror = (err) => {
-      log.error(err);
+    // SockJS requires `http` and `https` protocols
+    this.sock = new SockJS(
+      url.replace(/^ws:/i, 'http://').replace(/^wss:/i, 'https://')
+    );
+    this.sock.onerror = (error) => {
+      log.error(error);
     };
   }
 

client-src/clients/WebsocketClient.js

@@ -7,11 +7,9 @@ module.exports = class WebsocketClient extends BaseClient {
   constructor(url) {
     super();
 
-    const wsUrl = url.replace(/^(?:http|chrome-extension|file)/i, 'ws');
-
-    this.client = new WebSocket(wsUrl);
-    this.client.onerror = (err) => {
-      log.error(err);
+    this.client = new WebSocket(url);
+    this.client.onerror = (error) => {
+      log.error(error);
     };
   }
 

client-src/index.js

@@ -10,7 +10,7 @@ const overlay = require('./overlay');
 const { log, setLogLevel } = require('./utils/log');
 const sendMessage = require('./utils/sendMessage');
 const reloadApp = require('./utils/reloadApp');
-const createSocketUrl = require('./utils/createSocketUrl');
+const createSocketURL = require('./utils/createSocketURL');
 
 const status = {
   isUnloading: false,
@@ -27,7 +27,7 @@ const defaultOptions = {
 };
 const parsedResourceQuery = parseURL(__resourceQuery);
 const options = Object.assign(defaultOptions, parsedResourceQuery.query);
-const socketURL = createSocketUrl(parsedResourceQuery);
+const socketURL = createSocketURL(parsedResourceQuery);
 
 function setAllLogLevel(level) {
   // This is needed because the HMR logger operate separately from dev server logger

client-src/utils/createSocketURL.js

@@ -0,0 +1,94 @@
+'use strict';
+
+const url = require('url');
+
+// We handle legacy API that is Node.js specific, and a newer API that implements the same WHATWG URL Standard used by web browsers
+// Please look at https://nodejs.org/api/url.html#url_url_strings_and_url_objects
+function createSocketURL(parsedURL) {
+  let { auth, hostname, protocol, port } = parsedURL;
+
+  const getURLSearchParam = (name) => {
+    if (parsedURL.searchParams) {
+      return parsedURL.searchParams.get(name);
+    }
+
+    return parsedURL.query && parsedURL.query[name];
+  };
+
+  // Node.js module parses it as `::`
+  // `new URL(urlString, [baseURLstring])` parses it as '[::]'
+  const isInAddrAny =
+    hostname === '0.0.0.0' || hostname === '::' || hostname === '[::]';
+
+  // check ipv4 and ipv6 `all hostname`
+  // why do we need this check?
+  // hostname n/a for file protocol (example, when using electron, ionic)
+  // see: https://github.com/webpack/webpack-dev-server/pull/384
+  if (
+    isInAddrAny &&
+    self.location.hostname &&
+    self.location.protocol.indexOf('http') === 0
+  ) {
+    hostname = self.location.hostname;
+  }
+
+  // `hostname` can be empty when the script path is relative. In that case, specifying a protocol would result in an invalid URL.
+  // When https is used in the app, secure websockets are always necessary because the browser doesn't accept non-secure websockets.
+  if (hostname && isInAddrAny && self.location.protocol === 'https:') {
+    protocol = self.location.protocol;
+  }
+
+  const socketURLProtocol = protocol.replace(
+    /^(?:http|.+-extension|file)/i,
+    'ws'
+  );
+
+  // `new URL(urlString, [baseURLstring])` doesn't have `auth` property
+  // Parse authentication credentials in case we need them
+  if (parsedURL.username) {
+    auth = parsedURL.username;
+
+    // Since HTTP basic authentication does not allow empty username,
+    // we only include password if the username is not empty.
+    if (parsedURL.password) {
+      // Result: <username>:<password>
+      auth = auth.concat(':', parsedURL.password);
+    }
+  }
+
+  const socketURLAuth = auth;
+
+  // In case the host is a raw IPv6 address, it can be enclosed in
+  // the brackets as the brackets are needed in the final URL string.
+  // Need to remove those as url.format blindly adds its own set of brackets
+  // if the host string contains colons. That would lead to non-working
+  // double brackets (e.g. [[::]]) host
+  //
+  // All of these sock url params are optionally passed in through resourceQuery,
+  // so we need to fall back to the default if they are not provided
+  const socketURLHostname = (getURLSearchParam('host') || hostname).replace(
+    /^\[(.*)\]$/,
+    '$1'
+  );
+
+  if (!port || port === '0') {
+    port = self.location.port;
+  }
+
+  const socketURLPort = getURLSearchParam('port') || port;
+
+  // If path is provided it'll be passed in via the resourceQuery as a
+  // query param so it has to be parsed out of the querystring in order for the
+  // client to open the socket to the correct location.
+  const socketURLPathname = getURLSearchParam('path') || '/ws';
+
+  return url.format({
+    protocol: socketURLProtocol,
+    auth: socketURLAuth,
+    hostname: socketURLHostname,
+    port: socketURLPort,
+    pathname: socketURLPathname,
+  });
+}
+
+module.exports = createSocketURL;

client-src/utils/createSocketUrl.js

@@ -7,11 +7,17 @@ function getCurrentScriptSource() {
     return document.currentScript.getAttribute('src');
   }
 
-  // Fall back to getting all scripts in the document.
+  // Fallback to getting all scripts running in the document.
   const scriptElements = document.scripts || [];
-  const currentScript = scriptElements[scriptElements.length - 1];
+  const scriptElementsWithSrc = Array.prototype.filter.call(
+    scriptElements,
+    (element) => element.getAttribute('src')
+  );
+
+  if (scriptElementsWithSrc.length > 0) {
+    const currentScript =
+      scriptElementsWithSrc[scriptElementsWithSrc.length - 1];
 
-  if (currentScript) {
     return currentScript.getAttribute('src');
   }
 

client-src/utils/getCurrentScriptSource.js

@@ -19,9 +19,27 @@ function parseURL(resourceQuery) {
     );
   } else {
     // Else, get the url from the <script> this file was called with.
-    const scriptHost = getCurrentScriptSource();
+    const scriptSource = getCurrentScriptSource();
 
-    options = url.parse(scriptHost || '/', true, true);
+    if (scriptSource) {
+      let scriptSourceURL;
+
+      try {
+        // The placeholder `baseURL` with `window.location.href`,
+        // is to allow parsing of path-relative or protocol-relative URLs,
+        // and will have no effect if `scriptSource` is a fully valid URL.
+        scriptSourceURL = new URL(scriptSource, self.location.href);
+      } catch (e) {
+        // URL parsing failed, do nothing.
+        // We will still proceed to see if we can recover using `resourceQuery`
+      }
+
+      if (scriptSourceURL) {
+        options = scriptSourceURL;
+      }
+    } else {
+      options = url.parse(self.location.href, true, true);
+    }
   }
 
   return options;

client-src/utils/parseURL.js

@@ -44,7 +44,9 @@ function reloadApp(
 
   function applyReload(rootWindow, intervalId) {
     clearInterval(intervalId);
+
     log.info('App updated. Reloading...');
+
     rootWindow.location.reload();
   }
 }

client-src/utils/reloadApp.js

@@ -4,7 +4,7 @@ const url = require('url');
 
 function createDomain(options, server) {
   const protocol = options.https ? 'https' : 'http';
-  // use location hostname and port by default in createSocketUrl
+  // use location hostname and port by default in createSocketURL
   // ipv6 detection is not required as 0.0.0.0 is just used as a placeholder
   let hostname;
 

lib/utils/createDomain.js

@@ -104,7 +104,7 @@
     "tcp-port-used": "^1.0.2",
     "typescript": "^4.2.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.30.0",
+    "webpack": "^5.31.0",
     "webpack-cli": "^4.6.0",
     "webpack-merge": "^5.7.3"
   },

package-lock.json

@@ -1,3 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`getCurrentScriptSource should fail when script source doesn't exist 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+exports[`'getCurrentScriptSource' function should fail when 'document.currentScript' doesn't exist and no 'script' tags 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+
+exports[`'getCurrentScriptSource' function should fail when 'document.scripts' doesn't exist and no scripts 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+
+exports[`'getCurrentScriptSource' function should fail when no scripts with the 'scr' attribute 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;

package.json

@@ -1,3 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`getCurrentScriptSource should fail when script source doesn't exist 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+exports[`'getCurrentScriptSource' function should fail when 'document.currentScript' doesn't exist and no 'script' tags 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+
+exports[`'getCurrentScriptSource' function should fail when 'document.scripts' doesn't exist and no scripts 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+
+exports[`'getCurrentScriptSource' function should fail when no scripts with the 'scr' attribute 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;

test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack4

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`log should set log level via setLogLevel 1`] = `
+exports[`'log' function should set log level via setLogLevel 1`] = `
 Array [
   Array [
     Object {

test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack5

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`log should set log level via setLogLevel 1`] = `
+exports[`'log' function should set log level via setLogLevel 1`] = `
 Array [
   Array [
     Object {