chore(packages/runner): migrate to @packages/eslint-config

guides/eslint-migration.md

@@ -34,7 +34,7 @@
 - [x] packages/server
 
 ### Batch 4b: Core packages (part 2)
-- [ ] packages/runner
+- [x] packages/runner
 - [x] packages/extension
 - [x] packages/network
 - [x] packages/network-tools

package.json

@@ -48,7 +48,7 @@
     "postinstall": "node ./scripts/run-postInstall.js",
     "lint": "lerna run lint --no-bail --concurrency 2",
     "lint:base": "lerna run lint --no-bail",
-    "lint:fix": "lerna run lint --no-bail --concurrency 2 --scope=cypress --scope=@packages/{agent-info,config,cypress-sessions,electron,errors,eslint-config,example,extension,https-proxy,icons,launcher,net-stubbing,network,network-interception,network-tools,proxy,scaffold-config,server,socket,stderr-filtering,types} --scope=@cypress/{angular,grep,mount-utils,puppeteer,react,schematic,svelte,vite-dev-server,vite-plugin-cypress-esm,vue,webpack-batteries-included-preprocessor,webpack-dev-server,webpack-preprocessor} -- --fix",
+    "lint:fix": "lerna run lint --no-bail --concurrency 2 --scope=cypress --scope=@packages/{agent-info,config,cypress-sessions,electron,errors,eslint-config,example,extension,https-proxy,icons,launcher,net-stubbing,network,network-interception,network-tools,proxy,runner,scaffold-config,server,socket,stderr-filtering,types} --scope=@cypress/{angular,grep,mount-utils,puppeteer,react,schematic,svelte,vite-dev-server,vite-plugin-cypress-esm,vue,webpack-batteries-included-preprocessor,webpack-dev-server,webpack-preprocessor} -- --fix",
     "npm-release": "node scripts/npm-release.js",
     "pack-ci": "./scripts/pack-ci.sh",
     "prepare": "husky install",

packages/driver/types/internal-types-lite.d.ts

@@ -44,6 +44,7 @@ declare namespace Cypress {
     (task: 'protocol:page:loading', input: any): Promise<void>
     (task: 'wait:for:prompt:ready'): Promise<{ success: boolean, error?: Error }>
     (task: 'preserve:run:state', runState: any): Promise<void>
+    (task: 'request:sent:with:credentials', args: { url?: string, resourceType: 'xhr' | 'fetch', credentialStatus: string | boolean }): Promise<void>
   }
 
   interface ActionTrigger {

packages/runner/eslint.config.ts

@@ -0,0 +1,27 @@
+import { baseConfig, jsonConfig } from '@packages/eslint-config'
+
+export default [
+  ...baseConfig,
+  ...jsonConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+      },
+    },
+  },
+  {
+    // Injected into the AUT, where the runner is reached through `parent`
+    files: ['injection/**'],
+    languageOptions: {
+      globals: {
+        window: 'readonly',
+        parent: 'readonly',
+      },
+    },
+  },
+  {
+    // typings generated by the CSS modules loader
+    ignores: ['**/*.scss.d.ts'],
+  },
+]

packages/runner/injection/patches/cross-origin/cookies.ts

@@ -17,7 +17,7 @@ const parseDocumentCookieString = (documentCookieString: string): SerializableAu
   return documentCookieString.split(';').map((cookieString) => {
     const [name, value] = cookieString.split('=')
 
-    let cookieDomain = location.hostname
+    const cookieDomain = location.hostname
 
     return {
       name: name.trim(),

packages/runner/injection/patches/cross-origin/fetch.ts

@@ -39,9 +39,10 @@ export const patchFetch = (window) => {
         resourceType: 'fetch',
         credentialStatus: credentials,
       })
-    } finally {
+    } catch {
       // if our internal logic errors for whatever reason, do NOT block the end user and continue the request
-      return originalFetch.apply(this, args)
     }
+
+    return originalFetch.apply(this, args)
   }
 }

packages/runner/injection/patches/cross-origin/utils/index.ts

@@ -25,10 +25,9 @@ const CROSS_ORIGIN_PREFIX = 'cross:origin:'
  * @param timeout - in ms, if the promise does not complete during this timeout, fail the promise.
  * @returns the data to send
  */
-export const postMessagePromise = <T>({ event, data = {}, timeout }: {event: string, data: any, timeout: number}): Promise<T> => {
+export const postMessagePromise = <T>({ event, data = {}, timeout }: { event: string, data: any, timeout: number }): Promise<T> => {
   return new Promise((resolve, reject) => {
     const eventName = `${CROSS_ORIGIN_PREFIX}${event}`
-    let timeoutId
 
     const responseEvent = `${eventName}:${Date.now()}`
 
@@ -40,7 +39,7 @@ export const postMessagePromise = <T>({ event, data = {}, timeout }: {event: str
       }
     }
 
-    timeoutId = setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       window.removeEventListener('message', handler)
       reject(new Error(`${eventName} failed to receive a response from the primary cypress instance within ${timeout / 1000} second.`))
     }, timeout)
@@ -60,16 +59,15 @@ export const postMessagePromise = <T>({ event, data = {}, timeout }: {event: str
  * @param args - an object containing a url, resourceType and Credential status.
  * @returns A Promise or null depending on the url parameter.
  */
-export const requestSentWithCredentials = <T>(args: {url?: string, resourceType: 'xhr' | 'fetch', credentialStatus: string | boolean}): Promise<T> | undefined => {
+export const requestSentWithCredentials = (args: { url?: string, resourceType: 'xhr' | 'fetch', credentialStatus: string | boolean }): Promise<void> | undefined => {
   if (args.url) {
     // If cypress is enabled on the window use that, otherwise use post message to call out to the primary cypress instance.
     // cypress may be found on the window if this is either the primary cypress instance or if a spec bridge has already been created for this spec bridge.
     if (window.Cypress) {
-      //@ts-expect-error
       return Cypress.backend('request:sent:with:credentials', args)
     }
 
-    return postMessagePromise({
+    return postMessagePromise<void>({
       event: 'backend:request',
       data: {
         args: ['request:sent:with:credentials', args],

packages/runner/injection/patches/cross-origin/xmlHttpRequest.ts

@@ -12,18 +12,20 @@ export const patchXmlHttpRequest = (window: Window) => {
       // since the send method does NOT have access to the arguments passed into open or have the request information,
       // we need to store a reference here to what we need in the send method
       this._url = captureFullRequestUrl(args[1], window)
-    } finally {
-      const result = originalXmlHttpRequestOpen.apply(this, args as any)
-
-      if (args.length > 2 && !args[2]) {
-        this.setRequestHeader('x-cypress-is-sync-request', 'true')
-        this._isSyncRequest = true
-      } else {
-        this._isSyncRequest = false
-      }
+    } catch {
+      // if our internal logic errors for whatever reason, do NOT block the end user and continue the request
+    }
+
+    const result = originalXmlHttpRequestOpen.apply(this, args as any)
 
-      return result
+    if (args.length > 2 && !args[2]) {
+      this.setRequestHeader('x-cypress-is-sync-request', 'true')
+      this._isSyncRequest = true
+    } else {
+      this._isSyncRequest = false
     }
+
+    return result
   }
 
   window.XMLHttpRequest.prototype.send = function (...args) {
@@ -42,10 +44,11 @@ export const patchXmlHttpRequest = (window: Window) => {
           resourceType: 'xhr',
           credentialStatus: this.withCredentials,
         })
-      } finally {
+      } catch {
         // if our internal logic errors for whatever reason, do NOT block the end user and continue the request
-        return originalXmlHttpRequestSend.apply(this, args)
       }
+
+      return originalXmlHttpRequestSend.apply(this, args)
     })()
   }
 }

packages/runner/injection/timers.js

@@ -72,8 +72,7 @@ export const createTimers = () => {
 
     const wrapTimer = (fnName) => {
       return (...args) => {
-        let timerId
-        let [fnOrCode, delay, ...params] = args
+        const [fnOrCode, delay, ...params] = args
 
         const timerOverride = (...params) => {
           // if we're currently paused then we need
@@ -95,7 +94,7 @@ export const createTimers = () => {
           return invoke(fnOrCode, params)
         }
 
-        timerId = callThrough(fnName, [timerOverride, delay, ...params])
+        const timerId = callThrough(fnName, [timerOverride, delay, ...params])
 
         return timerId
       }

packages/runner/package.json

@@ -2,7 +2,11 @@
   "name": "@packages/runner",
   "version": "0.0.0-development",
   "private": true,
+  "license": "MIT",
   "browser": "src/index.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "prebuild": "rimraf ./dist",
     "build": "node ../../scripts/run-webpack",
@@ -12,13 +16,17 @@
     "cypress:open": "echo \"These tests have been moved to @packages/app. \" && exit 1",
     "cypress:run": "echo \"These tests have been moved to @packages/app. \" && exit 1",
     "postinstall": "echo '@packages/runner needs: yarn build'",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
+    "lint": "eslint",
     "tslint": "tslint --config ../ts/tslint.json --project .",
     "watch": "node ../../scripts/run-webpack --watch --progress"
   },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx,json}": "eslint --fix"
+  },
   "devDependencies": {
     "@packages/driver": "0.0.0-development",
     "@packages/errors": "0.0.0-development",
+    "@packages/eslint-config": "0.0.0-development",
     "@packages/icons": "0.0.0-development",
     "@packages/net-stubbing": "0.0.0-development",
     "@packages/proxy": "0.0.0-development",
@@ -29,6 +37,8 @@
     "babel-plugin-prismjs": "1.0.2",
     "bluebird": "3.5.3",
     "cross-env": "7.0.3",
+    "eslint": "^9.31.0",
+    "jiti": "^2.4.2",
     "lodash": "^4.17.21",
     "mobx": "6.13.6",
     "react": "18.3.1",
@@ -37,10 +47,6 @@
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   },
-  "files": [
-    "dist"
-  ],
-  "license": "MIT",
   "nx": {
     "implicitDependencies": [
       "@packages/driver",

packages/runner/webpack.config.ts

@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import { waitUntilIconsBuilt } from '../../scripts/ensure-icons'
 import { getCommonConfig, getSimpleConfig, getCopyWebpackPlugin } from '@packages/web-config/webpack.config.base'
 import path from 'path'
@@ -7,21 +6,20 @@ import type webpack from 'webpack'
 const commonConfig = getCommonConfig()
 const CopyWebpackPlugin = getCopyWebpackPlugin()
 
-// @ts-ignore
-const babelLoader = _.find(commonConfig.module.rules, (rule) => {
-  // @ts-ignore
-  return _.includes(rule.use.loader, 'babel-loader')
+const [babelLoader] = commonConfig.module.rules.flatMap(({ use }) => {
+  return use && !Array.isArray(use) && use.loader.includes('babel-loader') ? [use] : []
 })
 
-// @ts-ignore
-babelLoader.use.options.plugins.push([require.resolve('babel-plugin-prismjs'), {
+const prismPlugin = [require.resolve('babel-plugin-prismjs'), {
   'languages': ['javascript', 'typescript', 'jsx', 'tsx'],
   'plugins': ['line-numbers', 'line-highlight'],
   'theme': 'default',
   'css': false,
-}])
+}]
+
+// @ts-expect-error - plugins is typed from web-config's own entries, none of which take prism's options
+babelLoader.options.plugins.push(prismPlugin)
 
-// @ts-ignore
 const mainConfig: webpack.Configuration = {
   ...commonConfig,
   entry: {
@@ -41,7 +39,6 @@ mainConfig.resolve = {
   },
 }
 
-// @ts-ignore
 const crossOriginConfig: webpack.Configuration = {
   ...commonConfig,
   entry: {
@@ -53,7 +50,6 @@ const crossOriginConfig: webpack.Configuration = {
   },
 }
 
-// @ts-ignore
 const mainInjectionConfig: webpack.Configuration = {
   ...getSimpleConfig(),
   mode: 'production',
@@ -66,7 +62,6 @@ const mainInjectionConfig: webpack.Configuration = {
   },
 }
 
-// @ts-ignore
 const crossOriginInjectionConfig: webpack.Configuration = {
   ...getSimpleConfig(),
   mode: 'production',
@@ -85,11 +80,9 @@ export default async function () {
   const cyIcons = await import('@packages/icons')
 
   mainConfig.plugins = [
-    // @ts-ignore
     ...mainConfig.plugins,
     new CopyWebpackPlugin({
       patterns: [{
-        // @ts-ignore // There's a race condition in how these types are generated.
         from: cyIcons.getPathToFavicon('favicon.ico'),
       }],
     }),

packages/web-config/webpack.config.base.ts

@@ -102,7 +102,7 @@ function makeSassLoaders () {
         },
       }, // compiles Sass to CSS, using Node Sass by default
     ],
-  }
+  } satisfies webpack.RuleSetRule
 }
 
 // the chrome version should be synced with
@@ -254,7 +254,7 @@ export const getCommonConfig = () => {
     ],
 
     cache: true,
-  }
+  } satisfies webpack.Configuration
 
   return commonConfig
 }
@@ -333,7 +333,7 @@ export const getSimpleConfig = () => ({
       },
     ],
   },
-})
+} satisfies webpack.Configuration)
 
 export { HtmlWebpackPlugin }