diff --git a/__snapshots__/makeRspackConfig.spec.ts.js b/__snapshots__/makeRspackConfig.spec.ts.js new file mode 100644 index 0000000..d852a1b --- /dev/null +++ b/__snapshots__/makeRspackConfig.spec.ts.js @@ -0,0 +1,48 @@ +exports[ + 'makeRspackConfig ignores userland rspack `output.publicPath` and `devServer.overlay` with rspack-dev-server v4 1' +] = { + output: { + publicPath: '/test-public-path/', + filename: '[name].js', + }, + devServer: { + magicHtml: true, + client: { + progress: false, + overlay: false, + }, + }, + optimization: { + emitOnErrors: true, + sideEffects: false, + splitChunks: { + chunks: 'all', + }, + }, + devtool: 'inline-source-map', + mode: 'development', + plugins: ['HtmlWebpackPlugin', 'CypressCTWebpackPlugin'], +} + +exports[ + 'makeWebpackConfig ignores userland rspack `output.publicPath` and `devServer.overlay` with rspack-dev-server v3 1' +] = { + output: { + publicPath: '/test-public-path/', + filename: '[name].js', + }, + devServer: { + progress: true, + overlay: false, + }, + optimization: { + noEmitOnErrors: false, + sideEffects: false, + splitChunks: { + chunks: 'all', + }, + }, + devtool: 'inline-source-map', + mode: 'development', + plugins: ['HtmlWebpackPlugin', 'CypressCTWebpackPlugin'], +} diff --git a/__snapshots__/makeWebpackConfig.spec.ts.js b/__snapshots__/makeWebpackConfig.spec.ts.js deleted file mode 100644 index 76958a3..0000000 --- a/__snapshots__/makeWebpackConfig.spec.ts.js +++ /dev/null @@ -1,50 +0,0 @@ -exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `devServer.overlay` with webpack-dev-server v4 1'] = { - "output": { - "publicPath": "/test-public-path/", - "filename": "[name].js" - }, - "devServer": { - "magicHtml": true, - "client": { - "progress": false, - "overlay": false - } - }, - "optimization": { - "emitOnErrors": true, - "sideEffects": false, - "splitChunks": { - "chunks": "all" - } - }, - "devtool": "inline-source-map", - "mode": "development", - "plugins": [ - "HtmlWebpackPlugin", - "CypressCTWebpackPlugin" - ] -} - -exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `devServer.overlay` with webpack-dev-server v3 1'] = { - "output": { - "publicPath": "/test-public-path/", - "filename": "[name].js" - }, - "devServer": { - "progress": true, - "overlay": false - }, - "optimization": { - "noEmitOnErrors": false, - "sideEffects": false, - "splitChunks": { - "chunks": "all" - } - }, - "devtool": "inline-source-map", - "mode": "development", - "plugins": [ - "HtmlWebpackPlugin", - "CypressCTWebpackPlugin" - ] -} diff --git a/dist/createRspackDevServer.js b/dist/createRspackDevServer.js index 62c0f25..a405a0e 100644 --- a/dist/createRspackDevServer.js +++ b/dist/createRspackDevServer.js @@ -26,6 +26,6 @@ async function createRspackDevServer(config) { server, compiler: rspackCompiler, }; - throw new Error(`Unsupported webpackDevServer version ${rspackDevServerMajorVersion}`); + throw new Error(`Unsupported rspackDevServer version ${rspackDevServerMajorVersion}`); } exports.createRspackDevServer = createRspackDevServer; diff --git a/dist/devServer.d.ts b/dist/devServer.d.ts index e48e36a..4ecdecf 100644 --- a/dist/devServer.d.ts +++ b/dist/devServer.d.ts @@ -20,13 +20,13 @@ export type DevServerConfig = { specs: Cypress.Spec[]; cypressConfig: Cypress.PluginConfigOptions; devServerEvents: NodeJS.EventEmitter; - onConfigNotFound?: (devServer: 'webpack', cwd: string, lookedIn: string[]) => void; + onConfigNotFound?: (devServer: 'rspack', cwd: string, lookedIn: string[]) => void; rspackConfig?: ConfigHandler; } & FrameworkConfig; /** - * import { devServer } from '@cypress/rspack-dev-server' + * import { RspackDevServer } from '@rspack/dev-server' * - * Creates & returns a WebpackDevServer for serving files related + * Creates & returns a RspackDevServer for serving files related * to Cypress Component Testing * * @param config diff --git a/dist/devServer.js b/dist/devServer.js index fbfc33f..72fef26 100644 --- a/dist/devServer.js +++ b/dist/devServer.js @@ -8,9 +8,9 @@ const debug_1 = tslib_1.__importDefault(require("debug")); const sourceRelativeRspackModules_1 = require("./helpers/sourceRelativeRspackModules"); const debug = (0, debug_1.default)('cypress:rspack-dev-server:devServer'); /** - * import { devServer } from '@cypress/rspack-dev-server' + * import { RspackDevServer } from '@rspack/dev-server' * - * Creates & returns a WebpackDevServer for serving files related + * Creates & returns a RspackDevServer for serving files related * to Cypress Component Testing * * @param config diff --git a/dist/helpers/sourceRelativeRspackModules.d.ts b/dist/helpers/sourceRelativeRspackModules.d.ts index dec41cd..e70dbc3 100644 --- a/dist/helpers/sourceRelativeRspackModules.d.ts +++ b/dist/helpers/sourceRelativeRspackModules.d.ts @@ -32,7 +32,7 @@ export interface SourceRelativeRspackResult { rspack: SourcedRspack; rspackDevServer: SourcedRspackDevServer; } -export declare const cypressWebpackPath: (config: DevServerConfig) => string; +export declare const cypressRspackPath: (config: DevServerConfig) => string; export declare function sourceFramework(config: DevServerConfig): SourcedDependency | null; export declare function sourceRspack(config: DevServerConfig, framework: SourcedDependency | null): SourcedRspack; export declare function sourceRspackDevServer(config: DevServerConfig, framework?: SourcedDependency | null): SourcedRspackDevServer; diff --git a/dist/helpers/sourceRelativeRspackModules.js b/dist/helpers/sourceRelativeRspackModules.js index feb7e0a..553ec80 100644 --- a/dist/helpers/sourceRelativeRspackModules.js +++ b/dist/helpers/sourceRelativeRspackModules.js @@ -1,6 +1,6 @@ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); -exports.restoreLoadHook = exports.getMajorVersion = exports.sourceDefaultRspackDependencies = exports.sourceRspackDevServer = exports.sourceRspack = exports.sourceFramework = exports.cypressWebpackPath = void 0; +exports.restoreLoadHook = exports.getMajorVersion = exports.sourceDefaultRspackDependencies = exports.sourceRspackDevServer = exports.sourceRspack = exports.sourceFramework = exports.cypressRspackPath = void 0; const tslib_1 = require("tslib"); const module_1 = tslib_1.__importDefault(require("module")); const path_1 = tslib_1.__importDefault(require("path")); @@ -8,13 +8,13 @@ const debug_1 = tslib_1.__importDefault(require("debug")); const debug = (0, debug_1.default)('cypress:rspack-dev-server:sourceRelativeRspackModules'); const originalModuleLoad = module_1.default._load; const originalModuleResolveFilename = module_1.default._resolveFilename; -const cypressWebpackPath = (config) => { +const cypressRspackPath = (config) => { return require.resolve('@cypress/rspack-batteries-included-preprocessor', { paths: [config.cypressConfig.cypressBinaryRoot], }); }; -exports.cypressWebpackPath = cypressWebpackPath; -const frameworkWebpackMapper = { +exports.cypressRspackPath = cypressRspackPath; +const frameworkRspackMapper = { 'create-react-app': 'react-scripts', 'vue-cli': '@vue/cli-service', nuxt: '@nuxt/rspack', @@ -32,14 +32,14 @@ function sourceFramework(config) { debug('Framework: No framework provided'); return null; } - const sourceOfWebpack = frameworkWebpackMapper[config.framework]; - if (!sourceOfWebpack) { + const sourceOfRspack = frameworkRspackMapper[config.framework]; + if (!sourceOfRspack) { debug('Not a higher-order framework so rspack dependencies should be resolvable from projectRoot'); return null; } const framework = {}; try { - const frameworkJsonPath = require.resolve(`${sourceOfWebpack}/package.json`, { + const frameworkJsonPath = require.resolve(`${sourceOfRspack}/package.json`, { paths: [config.cypressConfig.projectRoot], }); const frameworkPathRoot = path_1.default.dirname(frameworkJsonPath); @@ -78,16 +78,16 @@ function sourceRspack(config, framework) { } debug('rspack: Falling back to bundled version'); rspackJsonPath = require.resolve('@rspack/core/package.json', { - paths: [(0, exports.cypressWebpackPath)(config)], + paths: [(0, exports.cypressRspackPath)(config)], }); } rspack.importPath = path_1.default.dirname(rspackJsonPath); rspack.packageJson = require(rspackJsonPath); rspack.module = require(rspack.importPath).rspack; rspack.majorVersion = getMajorVersion(rspack.packageJson, [0]); - debug('Webpack: Successfully sourced rspack - %o', rspack); + debug('Rspack: Successfully sourced rspack - %o', rspack); module_1.default._load = function (request, parent, isMain) { - if (request === 'webpack' || request.startsWith('rspack/')) { + if (request === 'rspack' || request.startsWith('rspack/')) { const resolvePath = require.resolve(request, { paths: [rspack.importPath], }); @@ -97,11 +97,11 @@ function sourceRspack(config, framework) { return originalModuleLoad(request, parent, isMain); }; module_1.default._resolveFilename = function (request, parent, isMain, options) { - if (request === 'webpack' || (request.startsWith('rspack/') && !(options === null || options === void 0 ? void 0 : options.paths))) { + if (request === 'rspack' || (request.startsWith('rspack/') && !(options === null || options === void 0 ? void 0 : options.paths))) { const resolveFilename = originalModuleResolveFilename(request, parent, isMain, { paths: [rspack.importPath], }); - debug('Webpack: Module._resolveFilename resolveFilename - %s', resolveFilename); + debug('Rspack: Module._resolveFilename resolveFilename - %s', resolveFilename); return resolveFilename; } return originalModuleResolveFilename(request, parent, isMain, options); @@ -114,7 +114,7 @@ exports.sourceRspack = sourceRspack; function sourceRspackDevServer(config, framework) { var _a; const searchRoot = (_a = framework === null || framework === void 0 ? void 0 : framework.importPath) !== null && _a !== void 0 ? _a : config.cypressConfig.projectRoot; - debug('WebpackDevServer: Attempting to source rspack-dev-server from %s', searchRoot); + debug('RspackDevServer: Attempting to source rspack-dev-server from %s', searchRoot); const rspackDevServer = {}; let rspackDevServerJsonPath; try { @@ -127,7 +127,7 @@ function sourceRspackDevServer(config, framework) { debug('RspackDevServer: Failed to source @rspack/dev-server - %s', e); throw e; } - debug('WebpackDevServer: Falling back to bundled version'); + debug('RspackDevServer: Falling back to bundled version'); rspackDevServerJsonPath = require.resolve('@rspack/dev-server/package.json', { paths: [__dirname], }); @@ -136,27 +136,23 @@ function sourceRspackDevServer(config, framework) { rspackDevServer.packageJson = require(rspackDevServerJsonPath); rspackDevServer.module = require(rspackDevServer.importPath).RspackDevServer; rspackDevServer.majorVersion = getMajorVersion(rspackDevServer.packageJson, [0]); - debug('WebpackDevServer: Successfully sourced rspack-dev-server - %o', rspackDevServer); + debug('RspackDevServer: Successfully sourced rspack-dev-server - %o', rspackDevServer); return rspackDevServer; } exports.sourceRspackDevServer = sourceRspackDevServer; // Most frameworks follow a similar path for sourcing rspack dependencies so this is a utility to handle all the sourcing. function sourceDefaultRspackDependencies(config) { const framework = sourceFramework(config); - const webpack = sourceRspack(config, framework); - const webpackDevServer = sourceRspackDevServer(config, framework); - return { - framework, - rspack: webpack, - rspackDevServer: webpackDevServer, - }; + const rspack = sourceRspack(config, framework); + const rspackDevServer = sourceRspackDevServer(config, framework); + return { framework, rspack, rspackDevServer }; } exports.sourceDefaultRspackDependencies = sourceDefaultRspackDependencies; function getMajorVersion(json, acceptedVersions) { const major = Number(json.version.split('.')[0]); if (!acceptedVersions.includes(major)) { throw new Error(`Unexpected major version of ${json.name}. ` + - `Cypress webpack-dev-server works with ${json.name} versions ${acceptedVersions.join(', ')} - saw ${json.version}`); + `Cypress-rspack-dev-server works with ${json.name} versions ${acceptedVersions.join(', ')} - saw ${json.version}`); } return Number(major); } diff --git a/dist/loader.js b/dist/loader.js index 4c49829..d438c06 100644 --- a/dist/loader.js +++ b/dist/loader.js @@ -14,7 +14,7 @@ const debug = (0, debug_1.default)('cypress:rspack-dev-server:rspack'); */ const makeImport = (file, filename, chunkName, projectRoot) => { // If we want to rename the chunks, we can use this - const magicComments = chunkName ? `/* webpackChunkName: "${chunkName}" */` : ''; + const magicComments = chunkName ? `/* rspackChunkName: "${chunkName}" */` : ''; return `"${filename}": { shouldLoad: () => decodeURI(document.location.pathname).includes("${file.absolute}"), load: () => import(${magicComments} "${file.absolute}"), @@ -32,7 +32,7 @@ const makeImport = (file, filename, chunkName, projectRoot) => { * "App.spec.js": { * shouldLoad: () => document.location.pathname.includes('cypress/component/App.spec.js'), * load: () => { - * return import("/Users/projects/my-app/cypress/component/App.spec.js" \/* webpackChunkName: "spec-0" *\/) + * return import("/Users/projects/my-app/cypress/component/App.spec.js" \/* rspackChunkName: "spec-0" *\/) * }, * chunkName: "spec-0" * } @@ -80,7 +80,7 @@ function loader() { absolute: ${supportFileAbsolutePath}, relative: ${supportFileRelativePath}, relativeUrl: "/__cypress/src/cypress-support-file.js", - load: () => import(/* webpackChunkName: "cypress-support-file" */ ${supportFileAbsolutePath}), + load: () => import(/* rspackChunkName: "cypress-support-file" */ ${supportFileAbsolutePath}), } scriptLoaders.unshift(supportFile) } diff --git a/dist/makeRspackConfig.d.ts b/dist/makeRspackConfig.d.ts index 310ecea..c18b510 100644 --- a/dist/makeRspackConfig.d.ts +++ b/dist/makeRspackConfig.d.ts @@ -17,6 +17,23 @@ export declare function makeRspackConfig(config: CreateFinalRspackConfig): Promi asyncChunks?: boolean | undefined; wasmLoading?: string | false | undefined; filename?: string | undefined; + library?: { + type: string; + amdContainer?: string | undefined; + auxiliaryComment?: string | { + amd?: string | undefined; + commonjs?: string | undefined; + commonjs2?: string | undefined; + root?: string | undefined; + } | undefined; + export?: string | string[] | undefined; + name?: string | string[] | { + amd?: string | undefined; + commonjs?: string | undefined; + root?: string | string[] | undefined; + } | undefined; + umdNamedDefine?: boolean | undefined; + } | undefined; }> | undefined; output?: { path?: string | undefined; @@ -40,6 +57,7 @@ export declare function makeRspackConfig(config: CreateFinalRspackConfig): Promi root?: string | string[] | undefined; } | { type: string; + amdContainer?: string | undefined; auxiliaryComment?: string | { amd?: string | undefined; commonjs?: string | undefined; @@ -57,6 +75,7 @@ export declare function makeRspackConfig(config: CreateFinalRspackConfig): Promi libraryExport?: string | string[] | undefined; libraryTarget?: string | undefined; umdNamedDefine?: boolean | undefined; + amdContainer?: string | undefined; auxiliaryComment?: string | { amd?: string | undefined; commonjs?: string | undefined; @@ -111,7 +130,7 @@ export declare function makeRspackConfig(config: CreateFinalRspackConfig): Promi context?: string | undefined; dependencyType?: string | undefined; request?: string | undefined; - }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | Record | undefined, args_2: "module" | "promise" | "jsonp" | "import" | "var" | "assign" | "this" | "window" | "self" | "global" | "commonjs" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd" | "amd-require" | "umd" | "umd2" | "system" | "script" | "node-commonjs" | undefined, ...args_3: unknown[]) => void, ...args_2: unknown[]) => unknown) | ((args_0: { + }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | Record | undefined, args_2: "module" | "promise" | "jsonp" | "import" | "amd" | "commonjs" | "commonjs2" | "var" | "assign" | "this" | "window" | "self" | "global" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd" | "umd2" | "system" | "script" | "node-commonjs" | undefined, ...args_3: unknown[]) => void, ...args_2: unknown[]) => unknown) | ((args_0: { context?: string | undefined; dependencyType?: string | undefined; request?: string | undefined; @@ -119,12 +138,12 @@ export declare function makeRspackConfig(config: CreateFinalRspackConfig): Promi context?: string | undefined; dependencyType?: string | undefined; request?: string | undefined; - }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | Record | undefined, args_2: "module" | "promise" | "jsonp" | "import" | "var" | "assign" | "this" | "window" | "self" | "global" | "commonjs" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd" | "amd-require" | "umd" | "umd2" | "system" | "script" | "node-commonjs" | undefined, ...args_3: unknown[]) => void, ...args_2: unknown[]) => unknown) | ((args_0: { + }, args_1: (args_0: Error | undefined, args_1: string | boolean | string[] | Record | undefined, args_2: "module" | "promise" | "jsonp" | "import" | "amd" | "commonjs" | "commonjs2" | "var" | "assign" | "this" | "window" | "self" | "global" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd" | "umd2" | "system" | "script" | "node-commonjs" | undefined, ...args_3: unknown[]) => void, ...args_2: unknown[]) => unknown) | ((args_0: { context?: string | undefined; dependencyType?: string | undefined; request?: string | undefined; }, ...args_1: unknown[]) => Promise>))[] | undefined; - externalsType?: "module" | "promise" | "jsonp" | "import" | "var" | "assign" | "this" | "window" | "self" | "global" | "commonjs" | "commonjs2" | "commonjs-module" | "commonjs-static" | "amd" | "amd-require" | "umd" | "umd2" | "system" | "script" | "node-commonjs" | undefined; + externalsType?: "module" | "promise" | "jsonp" | "import" | "amd" | "commonjs" | "commonjs2" | "var" | "assign" | "this" | "window" | "self" | "global" | "commonjs-module" | "commonjs-static" | "amd-require" | "umd" | "umd2" | "system" | "script" | "node-commonjs" | undefined; externalsPresets?: { node?: boolean | undefined; web?: boolean | undefined; @@ -189,6 +208,7 @@ export declare function makeRspackConfig(config: CreateFinalRspackConfig): Promi logging?: boolean | "none" | "verbose" | "error" | "warn" | "info" | "log" | undefined; loggingDebug?: string | boolean | RegExp | ((args_0: string, ...args_1: unknown[]) => boolean) | (string | RegExp | ((args_0: string, ...args_1: unknown[]) => boolean))[] | undefined; loggingTrace?: boolean | undefined; + runtimeModules?: boolean | undefined; } | undefined; snapshot?: { module?: { diff --git a/dist/makeRspackConfig.js b/dist/makeRspackConfig.js index 2a55495..c9ec369 100644 --- a/dist/makeRspackConfig.js +++ b/dist/makeRspackConfig.js @@ -17,7 +17,7 @@ const removeList = [ 'HtmlWebpackPlugin', // the rspack's internal html plugin 'HtmlRspackPlugin', - // We already reload when webpack recompiles (via listeners on + // We already reload when rspack recompiles (via listeners on // devServerEvents). Removing this plugin can prevent double-refreshes // in some setups. 'HotModuleReplacementPlugin', @@ -25,7 +25,7 @@ const removeList = [ exports.CYPRESS_RSPACK_ENTRYPOINT = path.resolve(__dirname, 'browser.js'); /** * Removes and/or modifies certain plugins known to conflict - * when used with cypress/rspack-dev-server. + * when used with cypress-rspack-dev-server. */ function modifyRspackConfigForCypress(rspackConfig) { if (rspackConfig === null || rspackConfig === void 0 ? void 0 : rspackConfig.plugins) { @@ -62,24 +62,24 @@ async function makeRspackConfig(config) { if (!userRspackConfig) { debug('could not find rspack.config!'); if ((_b = config.devServerConfig) === null || _b === void 0 ? void 0 : _b.onConfigNotFound) { - config.devServerConfig.onConfigNotFound('webpack', projectRoot, constants_1.configFiles); + config.devServerConfig.onConfigNotFound('rspack', projectRoot, constants_1.configFiles); // The config process will be killed from the parent, but we want to early exit so we don't get // any additional errors related to not having a config process.exit(0); } else { - throw new Error(`Your Cypress devServer config is missing a required webpackConfig property, since we could not automatically detect one.\nPlease add one to your ${config.devServerConfig.cypressConfig.configFile}`); + throw new Error(`Your Cypress devServer config is missing a required rspackConfig property, since we could not automatically detect one.\nPlease add one to your ${config.devServerConfig.cypressConfig.configFile}`); } } } userRspackConfig = typeof userRspackConfig === 'function' ? await userRspackConfig() : userRspackConfig; - const userAndFrameworkWebpackConfig = modifyRspackConfigForCypress((0, webpack_merge_1.merge)(frameworkRspackConfig !== null && frameworkRspackConfig !== void 0 ? frameworkRspackConfig : {}, userRspackConfig !== null && userRspackConfig !== void 0 ? userRspackConfig : {})); - debug(`User passed in user and framework webpack config with values %o`, userAndFrameworkWebpackConfig); - debug(`New webpack entries %o`, files); + const userAndFrameworkRspackConfig = modifyRspackConfigForCypress((0, webpack_merge_1.merge)(frameworkRspackConfig !== null && frameworkRspackConfig !== void 0 ? frameworkRspackConfig : {}, userRspackConfig !== null && userRspackConfig !== void 0 ? userRspackConfig : {})); + debug(`User passed in user and framework rspack config with values %o`, userAndFrameworkRspackConfig); + debug(`New rspack entries %o`, files); debug(`Project root`, projectRoot); debug(`Support file`, supportFile); - const mergedConfig = (0, webpack_merge_1.merge)(userAndFrameworkWebpackConfig, (0, makeDefaultRspackConfig_1.makeCypressRspackConfig)(config)); + const mergedConfig = (0, webpack_merge_1.merge)(userAndFrameworkRspackConfig, (0, makeDefaultRspackConfig_1.makeCypressRspackConfig)(config)); // Some frameworks (like Next.js) change this value which changes the path we would need to use to fetch our spec. // (eg, http://localhost:xxxx//static/chunks/spec-.js). Deleting this key to normalize // the spec URL to `*/spec-.js` which we need to know up-front so we can fetch the sourcemaps. diff --git a/src/CypressCTRspackPlugin.ts b/src/CypressCTRspackPlugin.ts index 8b9cc1d..18381e1 100644 --- a/src/CypressCTRspackPlugin.ts +++ b/src/CypressCTRspackPlugin.ts @@ -144,9 +144,8 @@ export class CypressCTRspackPlugin { /* istanbul ignore next */ if ('NormalModule' in this.compilation.compiler.webpack) { - const loader = ( - this.compilation.compiler.webpack as Compiler['webpack'] - ).NormalModule.getCompilationHooks(compilation).loader + const loader = + this.compilation.compiler.webpack.NormalModule.getCompilationHooks(compilation).loader loader.tap('CypressCTPlugin', this.addLoaderContext) } diff --git a/src/createRspackDevServer.ts b/src/createRspackDevServer.ts index 86fcdc4..835ced1 100644 --- a/src/createRspackDevServer.ts +++ b/src/createRspackDevServer.ts @@ -69,5 +69,5 @@ export async function createRspackDevServer(config: CreateFinalRspackConfig) { compiler: rspackCompiler, } - throw new Error(`Unsupported webpackDevServer version ${rspackDevServerMajorVersion}`) + throw new Error(`Unsupported rspackDevServer version ${rspackDevServerMajorVersion}`) } diff --git a/src/devServer.ts b/src/devServer.ts index 4b71a66..e5489c2 100644 --- a/src/devServer.ts +++ b/src/devServer.ts @@ -36,7 +36,7 @@ export type DevServerConfig = { specs: Cypress.Spec[] cypressConfig: Cypress.PluginConfigOptions devServerEvents: NodeJS.EventEmitter - onConfigNotFound?: (devServer: 'webpack', cwd: string, lookedIn: string[]) => void + onConfigNotFound?: (devServer: 'rspack', cwd: string, lookedIn: string[]) => void rspackConfig?: ConfigHandler // Derived from the user's rspack config } & FrameworkConfig @@ -50,9 +50,9 @@ type DevServerCreateResult = { } /** - * import { devServer } from '@cypress/rspack-dev-server' + * import { RspackDevServer } from '@rspack/dev-server' * - * Creates & returns a WebpackDevServer for serving files related + * Creates & returns a RspackDevServer for serving files related * to Cypress Component Testing * * @param config diff --git a/src/helpers/sourceRelativeRspackModules.ts b/src/helpers/sourceRelativeRspackModules.ts index b5a57cb..d5be764 100644 --- a/src/helpers/sourceRelativeRspackModules.ts +++ b/src/helpers/sourceRelativeRspackModules.ts @@ -48,15 +48,15 @@ export interface SourceRelativeRspackResult { const originalModuleLoad = (Module as ModuleClass)._load const originalModuleResolveFilename = (Module as ModuleClass)._resolveFilename -export const cypressWebpackPath = (config: DevServerConfig) => { +export const cypressRspackPath = (config: DevServerConfig) => { return require.resolve('@cypress/rspack-batteries-included-preprocessor', { paths: [config.cypressConfig.cypressBinaryRoot], }) } -type FrameworkWebpackMapper = { [Property in Frameworks]: string | undefined } +type FrameworkRspackMapper = { [Property in Frameworks]: string | undefined } -const frameworkWebpackMapper: FrameworkWebpackMapper = { +const frameworkRspackMapper: FrameworkRspackMapper = { 'create-react-app': 'react-scripts', 'vue-cli': '@vue/cli-service', nuxt: '@nuxt/rspack', @@ -77,9 +77,9 @@ export function sourceFramework(config: DevServerConfig): SourcedDependency | nu return null } - const sourceOfWebpack = frameworkWebpackMapper[config.framework] + const sourceOfRspack = frameworkRspackMapper[config.framework] - if (!sourceOfWebpack) { + if (!sourceOfRspack) { debug( 'Not a higher-order framework so rspack dependencies should be resolvable from projectRoot', ) @@ -90,7 +90,7 @@ export function sourceFramework(config: DevServerConfig): SourcedDependency | nu const framework = {} as SourcedDependency try { - const frameworkJsonPath = require.resolve(`${sourceOfWebpack}/package.json`, { + const frameworkJsonPath = require.resolve(`${sourceOfRspack}/package.json`, { paths: [config.cypressConfig.projectRoot], }) const frameworkPathRoot = path.dirname(frameworkJsonPath) @@ -139,7 +139,7 @@ export function sourceRspack( debug('rspack: Falling back to bundled version') rspackJsonPath = require.resolve('@rspack/core/package.json', { - paths: [cypressWebpackPath(config)], + paths: [cypressRspackPath(config)], }) } @@ -148,9 +148,9 @@ export function sourceRspack( rspack.module = require(rspack.importPath).rspack rspack.majorVersion = getMajorVersion(rspack.packageJson, [0]) - debug('Webpack: Successfully sourced rspack - %o', rspack) + debug('Rspack: Successfully sourced rspack - %o', rspack) ;(Module as ModuleClass)._load = function (request, parent, isMain) { - if (request === 'webpack' || request.startsWith('rspack/')) { + if (request === 'rspack' || request.startsWith('rspack/')) { const resolvePath = require.resolve(request, { paths: [rspack.importPath], }) @@ -163,12 +163,12 @@ export function sourceRspack( return originalModuleLoad(request, parent, isMain) } ;(Module as ModuleClass)._resolveFilename = function (request, parent, isMain, options) { - if (request === 'webpack' || (request.startsWith('rspack/') && !options?.paths)) { + if (request === 'rspack' || (request.startsWith('rspack/') && !options?.paths)) { const resolveFilename = originalModuleResolveFilename(request, parent, isMain, { paths: [rspack.importPath], }) - debug('Webpack: Module._resolveFilename resolveFilename - %s', resolveFilename) + debug('Rspack: Module._resolveFilename resolveFilename - %s', resolveFilename) return resolveFilename } @@ -187,7 +187,7 @@ export function sourceRspackDevServer( ): SourcedRspackDevServer { const searchRoot = framework?.importPath ?? config.cypressConfig.projectRoot - debug('WebpackDevServer: Attempting to source rspack-dev-server from %s', searchRoot) + debug('RspackDevServer: Attempting to source rspack-dev-server from %s', searchRoot) const rspackDevServer = {} as SourcedRspackDevServer let rspackDevServerJsonPath: string @@ -202,7 +202,7 @@ export function sourceRspackDevServer( throw e } - debug('WebpackDevServer: Falling back to bundled version') + debug('RspackDevServer: Falling back to bundled version') rspackDevServerJsonPath = require.resolve('@rspack/dev-server/package.json', { paths: [__dirname], @@ -214,7 +214,7 @@ export function sourceRspackDevServer( rspackDevServer.module = require(rspackDevServer.importPath).RspackDevServer rspackDevServer.majorVersion = getMajorVersion(rspackDevServer.packageJson, [0]) - debug('WebpackDevServer: Successfully sourced rspack-dev-server - %o', rspackDevServer) + debug('RspackDevServer: Successfully sourced rspack-dev-server - %o', rspackDevServer) return rspackDevServer } @@ -224,14 +224,10 @@ export function sourceDefaultRspackDependencies( config: DevServerConfig, ): SourceRelativeRspackResult { const framework = sourceFramework(config) - const webpack = sourceRspack(config, framework) - const webpackDevServer = sourceRspackDevServer(config, framework) + const rspack = sourceRspack(config, framework) + const rspackDevServer = sourceRspackDevServer(config, framework) - return { - framework, - rspack: webpack, - rspackDevServer: webpackDevServer, - } + return { framework, rspack, rspackDevServer } } export function getMajorVersion(json: PackageJson, acceptedVersions: T[]): T { @@ -240,7 +236,7 @@ export function getMajorVersion(json: PackageJson, acceptedVer if (!acceptedVersions.includes(major as T)) { throw new Error( `Unexpected major version of ${json.name}. ` + - `Cypress webpack-dev-server works with ${json.name} versions ${acceptedVersions.join( + `Cypress-rspack-dev-server works with ${json.name} versions ${acceptedVersions.join( ', ', )} - saw ${json.version}`, ) diff --git a/src/loader.ts b/src/loader.ts index d9b44d4..b171d9c 100644 --- a/src/loader.ts +++ b/src/loader.ts @@ -21,7 +21,7 @@ const makeImport = ( projectRoot: string, ) => { // If we want to rename the chunks, we can use this - const magicComments = chunkName ? `/* webpackChunkName: "${chunkName}" */` : '' + const magicComments = chunkName ? `/* rspackChunkName: "${chunkName}" */` : '' return `"${filename}": { shouldLoad: () => decodeURI(document.location.pathname).includes("${file.absolute}"), @@ -41,7 +41,7 @@ const makeImport = ( * "App.spec.js": { * shouldLoad: () => document.location.pathname.includes('cypress/component/App.spec.js'), * load: () => { - * return import("/Users/projects/my-app/cypress/component/App.spec.js" \/* webpackChunkName: "spec-0" *\/) + * return import("/Users/projects/my-app/cypress/component/App.spec.js" \/* rspackChunkName: "spec-0" *\/) * }, * chunkName: "spec-0" * } @@ -93,7 +93,7 @@ export default function loader(this: unknown) { absolute: ${supportFileAbsolutePath}, relative: ${supportFileRelativePath}, relativeUrl: "/__cypress/src/cypress-support-file.js", - load: () => import(/* webpackChunkName: "cypress-support-file" */ ${supportFileAbsolutePath}), + load: () => import(/* rspackChunkName: "cypress-support-file" */ ${supportFileAbsolutePath}), } scriptLoaders.unshift(supportFile) } diff --git a/src/makeRspackConfig.ts b/src/makeRspackConfig.ts index d7ba6c5..8975dda 100644 --- a/src/makeRspackConfig.ts +++ b/src/makeRspackConfig.ts @@ -19,7 +19,7 @@ const removeList = [ // the rspack's internal html plugin 'HtmlRspackPlugin', - // We already reload when webpack recompiles (via listeners on + // We already reload when rspack recompiles (via listeners on // devServerEvents). Removing this plugin can prevent double-refreshes // in some setups. 'HotModuleReplacementPlugin', @@ -29,7 +29,7 @@ export const CYPRESS_RSPACK_ENTRYPOINT = path.resolve(__dirname, 'browser.js') /** * Removes and/or modifies certain plugins known to conflict - * when used with cypress/rspack-dev-server. + * when used with cypress-rspack-dev-server. */ function modifyRspackConfigForCypress(rspackConfig: Partial) { if (rspackConfig?.plugins) { @@ -82,13 +82,13 @@ export async function makeRspackConfig(config: CreateFinalRspackConfig) { if (!userRspackConfig) { debug('could not find rspack.config!') if (config.devServerConfig?.onConfigNotFound) { - config.devServerConfig.onConfigNotFound('webpack', projectRoot, configFiles) + config.devServerConfig.onConfigNotFound('rspack', projectRoot, configFiles) // The config process will be killed from the parent, but we want to early exit so we don't get // any additional errors related to not having a config process.exit(0) } else { throw new Error( - `Your Cypress devServer config is missing a required webpackConfig property, since we could not automatically detect one.\nPlease add one to your ${config.devServerConfig.cypressConfig.configFile}`, + `Your Cypress devServer config is missing a required rspackConfig property, since we could not automatically detect one.\nPlease add one to your ${config.devServerConfig.cypressConfig.configFile}`, ) } } @@ -97,19 +97,19 @@ export async function makeRspackConfig(config: CreateFinalRspackConfig) { userRspackConfig = typeof userRspackConfig === 'function' ? await userRspackConfig() : userRspackConfig - const userAndFrameworkWebpackConfig = modifyRspackConfigForCypress( + const userAndFrameworkRspackConfig = modifyRspackConfigForCypress( merge(frameworkRspackConfig ?? {}, userRspackConfig ?? {}), ) debug( - `User passed in user and framework webpack config with values %o`, - userAndFrameworkWebpackConfig, + `User passed in user and framework rspack config with values %o`, + userAndFrameworkRspackConfig, ) - debug(`New webpack entries %o`, files) + debug(`New rspack entries %o`, files) debug(`Project root`, projectRoot) debug(`Support file`, supportFile) - const mergedConfig = merge(userAndFrameworkWebpackConfig, makeCypressRspackConfig(config)) + const mergedConfig = merge(userAndFrameworkRspackConfig, makeCypressRspackConfig(config)) // Some frameworks (like Next.js) change this value which changes the path we would need to use to fetch our spec. // (eg, http://localhost:xxxx//static/chunks/spec-.js). Deleting this key to normalize