chore: upgrade cypress to 14.0.0 (#35)

* chore: upgrade cypress to 14.0.0 update the specs type for method onSpecsChange update the just in time compile since it's default enabled in cypress 14 * chore: update the test
th3fallen · Jan 17, 2025 · a7030f8 · a7030f8
1 parent 4a4cbef
commit a7030f8
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -33,12 +33,6 @@ export default defineConfig({
 })
 ```
 
-In the `Cypress-rspack-dev-server Version` column, it lists the corresponding versions that are compatible with the `Rspack` versions.
-
-For example:
-
-> For Rspack version 1.0.0-beta.4 or later, use Cypress-rspack-dev-server version 0.0.6.
-
 ## Dev server parameters
 
 | Option                      | NOTES                                                                                                                                                                                                     |

diff --git a/description.md b/description.md
@@ -0,0 +1,36 @@
+# Cypress Rspack Dev Server
+
+## Project Overview
+
+This project implements a development server for Cypress using Rspack as the bundler. Here's a comprehensive breakdown of its architecture and components:
+
+### Core Purpose
+- Development server specifically designed for Cypress component testing
+- Uses Rspack (Rust-based bundler) as a faster alternative to Webpack
+
+### Key Components
+
+1. **devServer.ts**
+   - Main entry point
+   - Handles server creation and configuration
+   - Supports multiple frameworks
+   - Provides flexible configuration system
+
+2. **makeRspackConfig.ts**
+   - Manages Rspack configuration generation
+   - Handles custom plugin management
+   - Merges configurations with user settings
+   - Addresses Cypress-specific requirements
+
+3. **CypressCTRspackPlugin.ts**
+   - Custom Rspack plugin for Cypress Component Testing
+
+4. **createRspackDevServer.ts**
+   - Manages dev server instance creation and setup
+
+### Notable Features
+- Framework-agnostic design
+- Smart configuration merging
+- Built-in optimization
+- Debug support through 'debug' library
+
diff --git a/dist/CypressCTRspackPlugin.d.ts b/dist/CypressCTRspackPlugin.d.ts
@@ -6,7 +6,7 @@ export interface CypressCTRspackPluginOptions {
     devServerEvents: EventEmitter;
     indexHtmlFile: string;
 }
-export type CypressCTContextOptions = Omit<CypressCTRspackPluginOptions, 'devServerEvents' | 'rspack'>;
+export type CypressCTContextOptions = Omit<CypressCTRspackPluginOptions, 'devServerEvents'>;
 export interface CypressCTRspackContext {
     _cypress: CypressCTContextOptions;
 }

diff --git a/dist/CypressCTRspackPlugin.js b/dist/CypressCTRspackPlugin.js
@@ -29,7 +29,7 @@ class CypressCTRspackPlugin {
                 indexHtmlFile: this.indexHtmlFile,
             };
         };
-        this.beforeCompile = async (compilationParams, callback) => {
+        this.beforeCompile = async (_compilationParams, callback) => {
             if (!this.compilation) {
                 callback();
                 return;
@@ -62,10 +62,10 @@ class CypressCTRspackPlugin {
          */
         this.onSpecsChange = async (specs) => {
             var _a;
-            if (!this.compilation || (0, isEqual_1.default)(specs, this.files)) {
+            if (!this.compilation || (0, isEqual_1.default)(specs.specs, this.files)) {
                 return;
             }
-            this.files = specs;
+            this.files = specs.specs;
             const inputFileSystem = this.compilation.inputFileSystem;
             // TODO: don't use a sync fs method here
             const utimesSync = (_a = inputFileSystem.fileSystem.utimesSync) !== null && _a !== void 0 ? _a : fs_extra_1.default.utimesSync;

diff --git a/dist/devServer.js b/dist/devServer.js
@@ -61,12 +61,6 @@ async function getPreset(devServerConfig) {
     }
     switch (devServerConfig.framework) {
         // todo - add support for other frameworks
-        case 'create-react-app':
-        // return createReactAppHandler(devServerConfig);
-        case 'nuxt':
-        // return await nuxtHandler(devServerConfig)
-        case 'vue-cli':
-        // return await vueCliHandler(devServerConfig)
         case 'next':
         // return await nextHandler(devServerConfig)
         case 'angular':

diff --git a/dist/helpers/sourceRelativeRspackModules.js b/dist/helpers/sourceRelativeRspackModules.js
@@ -13,9 +13,6 @@ const debug = (0, debug_1.default)('cypress-rspack-dev-server:sourceRelativeRspa
 const originalModuleLoad = module_1.default._load;
 const originalModuleResolveFilename = module_1.default._resolveFilename;
 const frameworkRspackMapper = {
-    'create-react-app': 'react-scripts',
-    'vue-cli': '@vue/cli-service',
-    nuxt: '@nuxt/rspack',
     react: 'react',
     vue: undefined,
     next: 'next',

diff --git a/dist/makeDefaultRspackConfig.js b/dist/makeDefaultRspackConfig.js
@@ -11,7 +11,7 @@ const OUTPUT_PATH = path_1.default.join(__dirname, 'dist');
 const OsSeparatorRE = RegExp(`\\${path_1.default.sep}`, 'g');
 const posixSeparator = '/';
 function makeCypressRspackConfig(config) {
-    const { devServerConfig: { cypressConfig: { experimentalJustInTimeCompile, projectRoot, devServerPublicPathRoute, supportFile, indexHtmlFile, isTextTerminal: isRunMode, }, specs: files, devServerEvents, }, } = config;
+    const { devServerConfig: { cypressConfig: { justInTimeCompile, projectRoot, devServerPublicPathRoute, supportFile, indexHtmlFile, isTextTerminal: isRunMode, }, specs: files, devServerEvents, }, } = config;
     const optimization = {
         // To prevent files from being tree shaken by rspack, we set optimization.sideEffects: false ensuring that
         // rspack does not recognize the sideEffects flag in the package.json and thus files are not unintentionally
@@ -48,8 +48,9 @@ function makeCypressRspackConfig(config) {
         devtool: 'inline-source-map',
     };
     if (isRunMode) {
-        // if experimentalJustInTimeCompile is configured, we need to watch for file changes as the spec entries are going to be updated per test
-        const ignored = experimentalJustInTimeCompile ? /node_modules/ : '**/*';
+        // if justInTimeCompile is configured, we need to watch for file changes
+        // as the spec entries are going to be updated per test
+        const ignored = justInTimeCompile ? /node_modules/ : '**/*';
         // Disable file watching when executing tests in `run` mode
         finalConfig.watchOptions = { ignored };
     }

diff --git a/package.json b/package.json
@@ -36,10 +36,10 @@
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.0",
-    "@typescript-eslint/parser": "^8.18.2",
+    "@typescript-eslint/parser": "^8.20.0",
     "babel-jest": "^29.7.0",
     "cross-env": "^7.0.3",
-    "cypress": "^13.17.0",
+    "cypress": "^14.0.0",
     "debug": "^4.3.4",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/CypressCTRspackPlugin.ts b/src/CypressCTRspackPlugin.ts
@@ -13,6 +13,11 @@ type UtimesSync = (
   mtime: string | number | Date,
 ) => void
 
+type CypressSpecsWithOptions = {
+  specs: Cypress.Cypress['spec'][]
+  options: { neededForJustInTimeCompile?: boolean }
+}
+
 export interface CypressCTRspackPluginOptions {
   files: Cypress.Cypress['spec'][]
   projectRoot: string
@@ -21,10 +26,7 @@ export interface CypressCTRspackPluginOptions {
   indexHtmlFile: string
 }
 
-export type CypressCTContextOptions = Omit<
-  CypressCTRspackPluginOptions,
-  'devServerEvents' | 'rspack'
->
+export type CypressCTContextOptions = Omit<CypressCTRspackPluginOptions, 'devServerEvents'>
 
 export interface CypressCTRspackContext {
   _cypress: CypressCTContextOptions
@@ -76,7 +78,7 @@ export class CypressCTRspackPlugin {
     }
   }
 
-  private beforeCompile = async (compilationParams: object, callback: Function) => {
+  private beforeCompile = async (_compilationParams: object, callback: Function) => {
     if (!this.compilation) {
       callback()
 
@@ -115,12 +117,12 @@ export class CypressCTRspackPlugin {
    *
    * See https://github.com/cypress-io/cypress/issues/24398
    */
-  private onSpecsChange = async (specs: Cypress.Cypress['spec'][]) => {
-    if (!this.compilation || isEqual(specs, this.files)) {
+  private onSpecsChange = async (specs: CypressSpecsWithOptions) => {
+    if (!this.compilation || isEqual(specs.specs, this.files)) {
       return
     }
 
-    this.files = specs
+    this.files = specs.specs
     const inputFileSystem = this.compilation.inputFileSystem
     // TODO: don't use a sync fs method here
     const utimesSync: UtimesSync = inputFileSystem.fileSystem.utimesSync ?? fs.utimesSync

diff --git a/src/devServer.ts b/src/devServer.ts
@@ -123,14 +123,6 @@ async function getPreset(
 
   switch (devServerConfig.framework) {
     // todo - add support for other frameworks
-    case 'create-react-app':
-    // return createReactAppHandler(devServerConfig);
-    case 'nuxt':
-    // return await nuxtHandler(devServerConfig)
-
-    case 'vue-cli':
-    // return await vueCliHandler(devServerConfig)
-
     case 'next':
     // return await nextHandler(devServerConfig)
 

diff --git a/src/helpers/sourceRelativeRspackModules.ts b/src/helpers/sourceRelativeRspackModules.ts
@@ -49,9 +49,6 @@ const originalModuleResolveFilename = (Module as ModuleClass)._resolveFilename
 type FrameworkRspackMapper = { [Property in Frameworks]: string | undefined }
 
 const frameworkRspackMapper: FrameworkRspackMapper = {
-  'create-react-app': 'react-scripts',
-  'vue-cli': '@vue/cli-service',
-  nuxt: '@nuxt/rspack',
   react: 'react',
   vue: undefined,
   next: 'next',