@pmmmwh/react-refresh-webpack-plugin - npm Package Compare versions

Comparing version 0.5.0-rc.4 to 0.5.0-rc.5

client/ErrorOverlayEntry.js

@@ -5,3 +5,3 @@ /* global __react_refresh_error_overlay__, __react_refresh_socket__, __resourceQuery */
 const formatWebpackErrors = require('./utils/formatWebpackErrors.js');
-const runWithPatchedUrl = require('./utils/patchUrl.cjs');
+const runWithPatchedUrl = require('./utils/patchUrl.js');
 const runWithRetry = require('./utils/retry.js');
@@ -8,0 +8,0 @@

package.json

 {
   "name": "@pmmmwh/react-refresh-webpack-plugin",
-  "version": "0.5.0-rc.4",
+  "version": "0.5.0-rc.5",
   "description": "An **EXPERIMENTAL** Webpack plugin to enable \"Fast Refresh\" (also previously known as _Hot Reloading_) for React components.",
@@ -5,0 +5,0 @@ "keywords": [

sockets/utils/getSocketUrlParts.js

 const getCurrentScriptSource = require('./getCurrentScriptSource.js');
-const parseQuery = require('./parseQuery.js');
 
@@ -16,6 +15,11 @@ /**
  * @param {string} [resourceQuery] The Webpack `__resourceQuery` string.
+ * @param {import('./getWDSMetadata').WDSMetaObj} [metadata] The parsed WDS metadata object.
  * @returns {SocketUrlParts} The parsed URL parts.
  * @see https://webpack.js.org/api/module-variables/#__resourcequery-webpack-specific
  */
-function getSocketUrlParts(resourceQuery) {
+function getSocketUrlParts(resourceQuery, metadata) {
+  if (typeof metadata === 'undefined') {
+    metadata = {};
+  }
+
   const scriptSource = getCurrentScriptSource();
@@ -40,6 +44,12 @@
   let protocol = url.protocol;
-  let pathname = '/sockjs-node'; // This is hard-coded in WDS
   /** @type {string | undefined} */
   let port = url.port;
 
+  // This is hard-coded in WDS v3
+  let pathname = '/sockjs-node';
+  if (metadata.version === 4) {
+    // This is hard-coded in WDS v4
+    pathname = '/ws';
+  }
+
   // Parse authentication credentials in case we need them
@@ -49,12 +59,34 @@ if (url.username) {
     // we only include password if the username is not empty.
-    // Result: <username>:<password>
-    auth = [url.username, url.password].filter(Boolean).join(':');
+    // Result: <username> or <username>:<password>
+    auth = url.username;
+    if (url.password) {
+      auth += ':' + url.password;
+    }
   }
 
-  // Check for IPv4 and IPv6 host addresses that corresponds to `any`/`empty`.
+  // If the resource query is available,
+  // parse it and overwrite everything we received from the script host.
+  const parsedQuery = {};
+  if (resourceQuery) {
+    const searchParams = new URLSearchParams(resourceQuery.slice(1));
+    searchParams.forEach(function (value, key) {
+      parsedQuery[key] = value;
+    });
+  }
+
+  hostname = parsedQuery.sockHost || hostname;
+  pathname = parsedQuery.sockPath || pathname;
+  port = parsedQuery.sockPort || port;
+
+  // Make sure the protocol from resource query has a trailing colon
+  if (parsedQuery.sockProtocol) {
+    protocol = parsedQuery.sockProtocol + ':';
+  }
+
+  // Check for IPv4 and IPv6 host addresses that corresponds to any/empty.
   // This is important because `hostname` can be empty for some hosts,
-  // such as `about:blank` or `file://` URLs.
-  const isEmptyHostname = url.hostname === '0.0.0.0' || url.hostname === '[::]' || !url.hostname;
-
-  // We only re-assign the hostname if we are using HTTP/HTTPS protocols
+  // such as 'about:blank' or 'file://' URLs.
+  const isEmptyHostname = hostname === '0.0.0.0' || hostname === '[::]' || !hostname;
+  // We only re-assign the hostname if it is empty,
+  // and if we are using HTTP/HTTPS protocols.
   if (
@@ -70,3 +102,3 @@ isEmptyHostname &&
   // since otherwise we risk creating an invalid URL.
-  // We also do this when `https` is used as it mandates the use of secure sockets.
+  // We also do this when 'https' is used as it mandates the use of secure sockets.
   if (hostname && (isEmptyHostname || window.location.protocol === 'https:')) {
@@ -81,14 +113,2 @@ protocol = window.location.protocol;
 
-  // If the resource query is available,
-  // parse it and overwrite everything we received from the script host.
-  const parsedQuery = parseQuery(resourceQuery || '');
-  hostname = parsedQuery.sockHost || hostname;
-  pathname = parsedQuery.sockPath || pathname;
-  port = parsedQuery.sockPort || port;
-
-  // Make sure the protocol from resource query has a trailing colon
-  if (parsedQuery.sockProtocol) {
-    protocol = parsedQuery.sockProtocol + ':';
-  }
-
   if (!hostname || !pathname || !port) {
@@ -95,0 +115,0 @@ throw new Error(

sockets/utils/getUrlFromParts.js

 /**
  * Create a valid URL from parsed URL parts.
  * @param {import('./getSocketUrlParts').SocketUrlParts} urlParts The parsed URL parts.
- * @param {boolean} [enforceWs] Enforce using the WebSocket protocols.
+ * @param {import('./getWDSMetadata').WDSMetaObj} [metadata] The parsed WDS metadata object.
  * @returns {string} The generated URL.
  */
-function urlFromParts(urlParts, enforceWs) {
+function urlFromParts(urlParts, metadata) {
+  if (typeof metadata === 'undefined') {
+    metadata = {};
+  }
+
   let fullProtocol = 'http:';
@@ -12,3 +16,3 @@ if (urlParts.protocol) {
   }
-  if (enforceWs) {
+  if (metadata.enforceWs) {
     fullProtocol = fullProtocol.replace(/^(?:http|.+-extension|file)/i, 'ws');
@@ -15,0 +19,0 @@ }

sockets/WDSSocket.js

@@ -5,2 +5,3 @@ /* global __webpack_dev_server_client__ */
 const getUrlFromParts = require('./utils/getUrlFromParts');
+const getWDSMetadata = require('./utils/getWDSMetadata');
 
@@ -20,15 +21,7 @@ /**
 
-    const urlParts = getSocketUrlParts(resourceQuery);
+    const wdsMeta = getWDSMetadata(SocketClient);
+    const urlParts = getSocketUrlParts(resourceQuery, wdsMeta);
 
-    let enforceWs = false;
-    if (
-      typeof SocketClient.name !== 'undefined' &&
-      SocketClient.name !== null &&
-      SocketClient.name.toLowerCase().includes('websocket')
-    ) {
-      enforceWs = true;
-    }
+    const connection = new SocketClient(getUrlFromParts(urlParts, wdsMeta));
 
-    const connection = new SocketClient(getUrlFromParts(urlParts, enforceWs));
-
     connection.onMessage(function onSocketMessage(data) {
@@ -35,0 +28,0 @@ const message = JSON.parse(data);

No alert changes

Improved metrics

Total package byte prevSize

131285

increased by4.03%

Number of package files

57

increased by1.79%

Lines of code

3063

increased by0.82%

No dependency changes