diff --git a/packages/rspack-plugin-react-refresh/src/index.ts b/packages/rspack-plugin-react-refresh/src/index.ts index 821e90671555..da2aa275519d 100644 --- a/packages/rspack-plugin-react-refresh/src/index.ts +++ b/packages/rspack-plugin-react-refresh/src/index.ts @@ -1,23 +1,23 @@ import path from "node:path"; -import type { Compiler } from "@rspack/core"; -import { - type NormalizedPluginOptions, - type PluginOptions, - normalizeOptions -} from "./options"; +import { normalizeOptions } from "./options"; import { getAdditionalEntries } from "./utils/getAdditionalEntries"; -import getSocketIntegration from "./utils/getSocketIntegration"; +import { getSocketIntegration } from "./utils/getSocketIntegration"; + +import type { Compiler } from "@rspack/core"; +import type { NormalizedPluginOptions, PluginOptions } from "./options"; export type { PluginOptions }; const reactRefreshPath = require.resolve("../client/reactRefresh.js"); const reactRefreshEntryPath = require.resolve("../client/reactRefreshEntry.js"); + const refreshUtilsPath = require.resolve("../client/refreshUtils.js"); const refreshRuntimeDirPath = path.dirname( require.resolve("react-refresh", { paths: [reactRefreshPath] }) ); + const runtimePaths = [ reactRefreshEntryPath, reactRefreshPath, @@ -25,11 +25,6 @@ const runtimePaths = [ refreshRuntimeDirPath ]; -/** - * @typedef {Object} Options - * @property {(string | RegExp | (string | RegExp)[] | null)=} include included resourcePath for loader - * @property {(string | RegExp | (string | RegExp)[] | null)=} exclude excluded resourcePath for loader - */ class ReactRefreshRspackPlugin { options: NormalizedPluginOptions; diff --git a/packages/rspack-plugin-react-refresh/src/sockets/WDSSocket.ts b/packages/rspack-plugin-react-refresh/src/sockets/WDSSocket.ts index 409c55367ff2..d79cd7f880ab 100644 --- a/packages/rspack-plugin-react-refresh/src/sockets/WDSSocket.ts +++ b/packages/rspack-plugin-react-refresh/src/sockets/WDSSocket.ts @@ -1,6 +1,6 @@ /** * The following code is modified based on - * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/f1c8b9a44198449093ca95f85af5df97925e1cfc/sockets/WPSSocket.js + * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/f1c8b9a44198449093ca95f85af5df97925e1cfc/sockets/WDSSocket.js * * MIT Licensed * Author Michael Mok @@ -10,25 +10,29 @@ import getSocketUrlParts from "./utils/getSocketUrlParts"; import getUrlFromParts from "./utils/getUrlFromParts"; import getWDSMetadata from "./utils/getWDSMetadata"; +import type { SocketClient } from "./utils/getWDSMetadata"; declare global { - var __webpack_dev_server_client__: any; + var __webpack_dev_server_client__: SocketClient | { default: SocketClient }; } /** * Initializes a socket server for HMR for webpack-dev-server. - * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages. - * @param {string} [resourceQuery] Webpack's `__resourceQuery` string. - * @returns {void} + * @param messageHandler A handler to consume Webpack compilation messages. + * @param resourceQuery Webpack's `__resourceQuery` string. + * @returns */ export function init( messageHandler: (...args: any[]) => void, resourceQuery: string ) { if (typeof __webpack_dev_server_client__ !== "undefined") { - let SocketClient = __webpack_dev_server_client__; - if (typeof __webpack_dev_server_client__.default !== "undefined") { + let SocketClient: SocketClient; + + if ("default" in __webpack_dev_server_client__) { SocketClient = __webpack_dev_server_client__.default; + } else { + SocketClient = __webpack_dev_server_client__; } const wdsMeta = getWDSMetadata(SocketClient); @@ -36,7 +40,6 @@ export function init( const connection = new SocketClient(getUrlFromParts(urlParts, wdsMeta)); - // @ts-expect-error -- ignore connection.onMessage(function onSocketMessage(data) { const message = JSON.parse(data); messageHandler(message); diff --git a/packages/rspack-plugin-react-refresh/src/sockets/utils/getCurrentScriptSource.ts b/packages/rspack-plugin-react-refresh/src/sockets/utils/getCurrentScriptSource.ts index b86ecd0655e6..0e7232e9d3b9 100644 --- a/packages/rspack-plugin-react-refresh/src/sockets/utils/getCurrentScriptSource.ts +++ b/packages/rspack-plugin-react-refresh/src/sockets/utils/getCurrentScriptSource.ts @@ -10,10 +10,10 @@ export default function getCurrentScriptSource() { } // Fallback to getting all scripts running in the document, // and finding the last one injected. - const scriptElementsWithSrc = Array.prototype.filter.call( - (document as Document).scripts || [], - elem => elem.getAttribute("src") - ); + const scriptElementsWithSrc: HTMLOrSVGScriptElement[] = + Array.prototype.filter.call((document as Document).scripts || [], elem => + elem.getAttribute("src") + ); if (!scriptElementsWithSrc.length) return; const currentScript = scriptElementsWithSrc[scriptElementsWithSrc.length - 1]; return currentScript.getAttribute("src"); diff --git a/packages/rspack-plugin-react-refresh/src/sockets/utils/getSocketUrlParts.ts b/packages/rspack-plugin-react-refresh/src/sockets/utils/getSocketUrlParts.ts index 05249dca2433..fb2fefdb6ff3 100644 --- a/packages/rspack-plugin-react-refresh/src/sockets/utils/getSocketUrlParts.ts +++ b/packages/rspack-plugin-react-refresh/src/sockets/utils/getSocketUrlParts.ts @@ -46,7 +46,7 @@ export default function getSocketUrlParts( // 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. - url = new URL(scriptSource, window.location.href); + url = new URL(scriptSource!, window.location.href); } catch (e) { // URL parsing failed, do nothing. // We will still proceed to see if we can recover using `resourceQuery` diff --git a/packages/rspack-plugin-react-refresh/src/sockets/utils/getUrlFromParts.ts b/packages/rspack-plugin-react-refresh/src/sockets/utils/getUrlFromParts.ts index dedfa22faf70..8b0f7bc8c04e 100644 --- a/packages/rspack-plugin-react-refresh/src/sockets/utils/getUrlFromParts.ts +++ b/packages/rspack-plugin-react-refresh/src/sockets/utils/getUrlFromParts.ts @@ -4,7 +4,7 @@ import type { WDSMetaObj } from "./getWDSMetadata"; /** * Create a valid URL from parsed URL parts. * @param urlParts The parsed URL parts. - * @param [metadata] The parsed WDS metadata object. + * @param metadata The parsed WDS metadata object. * @returns The generated URL. */ export default function urlFromParts( diff --git a/packages/rspack-plugin-react-refresh/src/sockets/utils/getWDSMetadata.ts b/packages/rspack-plugin-react-refresh/src/sockets/utils/getWDSMetadata.ts index d52b2e018577..b7cd6cfd593a 100644 --- a/packages/rspack-plugin-react-refresh/src/sockets/utils/getWDSMetadata.ts +++ b/packages/rspack-plugin-react-refresh/src/sockets/utils/getWDSMetadata.ts @@ -3,7 +3,23 @@ export interface WDSMetaObj { version?: number; } -export default function getWDSMetadata(SocketClient: any): WDSMetaObj { +declare class WebSocketClient { + public client: WebSocket; + + constructor(url: string); + + onOpen(f: (...args: any[]) => void): void; + + onClose(f: (...args: any[]) => void): void; + + onMessage(f: (...args: any[]) => void): void; +} + +export interface SocketClient { + new (url: string): WebSocketClient; +} + +export default function getWDSMetadata(SocketClient: SocketClient): WDSMetaObj { let enforceWs = false; if ( typeof SocketClient.name !== "undefined" && diff --git a/packages/rspack-plugin-react-refresh/src/utils/getSocketIntegration.ts b/packages/rspack-plugin-react-refresh/src/utils/getSocketIntegration.ts index d6101c7ed09c..a596e5663ea7 100644 --- a/packages/rspack-plugin-react-refresh/src/utils/getSocketIntegration.ts +++ b/packages/rspack-plugin-react-refresh/src/utils/getSocketIntegration.ts @@ -1,6 +1,6 @@ export type IntegrationType = "wds"; -export default function getSocketIntegration(integrationType: IntegrationType) { +export function getSocketIntegration(integrationType: IntegrationType) { let resolvedSocketIntegration; switch (integrationType) { case "wds": {