breaking: Replace experimentalJustInTimeCompile flag with justInTimeCompile flag, make it true by default

cli/CHANGELOG.md

@@ -7,6 +7,9 @@ _Released 12/3/2024 (PENDING)_
 
 - Removed support for Node.js 16 and Node.js 21. Addresses [#29930](https://github.com/cypress-io/cypress/issues/29930).
 - Prebuilt binaries for Linux are no longer compatible with Linux distributions based on glibc <2.28, for example: Ubuntu 14-18, RHEL 7, CentOS 7, Amazon Linux 2. Addresses [#29601](https://github.com/cypress-io/cypress/issues/29601).
+- The
+  `experimentalJustInTimeCompile`
+  configuration option for component testing has been replaced with a `justInTimeCompile` option that is `true` by default. This option will only compile resources directly related to your spec, compiling them 'just-in-time' before spec execution. This should result in improved memory management and performance for component tests in `cypress open` and `cypress run` modes, in particular for large component testing suites. `justInTimeCompile` is now only supported for [`webpack`](https://www.npmjs.com/package/webpack). Addresses [#30234](https://github.com/cypress-io/cypress/issues/30234). Addressed in [#30402](https://github.com/cypress-io/cypress/pull/30402).
 - Cypress now only officially supports the latest 3 major versions of Chrome, Firefox, and Edge - older browser versions may still work, but we recommend keeping your browsers up to date to ensure compatibility with Cypress. A warning will no longer be displayed on browser selection in the Launchpad for any 'unsupported' browser versions. Additionally, the undocumented `minSupportedVersion` property has been removed from `Cypress.browser`. Addressed in [#30462](https://github.com/cypress-io/cypress/pull/30462).
 - The `delayMs` option of `cy.intercept()` has been removed. This option was deprecated in Cypress 6.4.0. Please use the `delay` option instead. Addressed in [#30463](https://github.com/cypress-io/cypress/pull/30463).
 - The `experimentalFetchPolyfill` configuration option was removed. This option was deprecated in Cypress 6.0.0. We recommend using `cy.intercept()` for handling fetch requests. Addressed in [#30466](https://github.com/cypress-io/cypress/pull/30466).

cli/types/cypress.d.ts

@@ -3113,14 +3113,6 @@ declare namespace Cypress {
      * @default null
      */
     experimentalSkipDomainInjection: string[] | null
-    /**
-     * Allows for just-in-time compiling of a component test, which will only compile assets related to the component.
-     * This results in a smaller bundle under test, reducing resource constraints on a given machine. This option is recommended
-     * for users with large component testing projects and those who are running into webpack 'chunk load error' issues.
-     * Supported for vite and webpack. For component testing only.
-     * @see https://on.cypress.io/experiments#Configuration
-     */
-    experimentalJustInTimeCompile: boolean
     /**
      * Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement algorithm.
      * @default false
@@ -3147,6 +3139,14 @@ declare namespace Cypress {
      * To enable test retries only in runMode, set e.g. `{ openMode: null, runMode: 2 }`
      * @default null
      */
+      /**
+     * Allows for just-in-time compiling of a component test, which will only compile assets related to the component.
+     * This results in a smaller bundle under test, reducing resource constraints on a given machine. This option is recommended
+     * for users with large component testing projects and those who are running into webpack 'chunk load error' issues.
+     * Supported only for webpack. For component testing only.
+     * @see https://on.cypress.io/experiments#Configuration
+     */
+    justInTimeCompile: boolean
     retries: Nullable<number | ({ runMode?: Nullable<number>, openMode?: Nullable<number> }) | RetryStrategyWithModeSpecs>
     /**
      * Enables including elements within the shadow DOM when using querying

npm/vite-dev-server/src/resolveConfig.ts

@@ -65,7 +65,7 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
 function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): InlineConfig | InlineConfig {
   const {
     cypressConfig: {
-      experimentalJustInTimeCompile,
+      justInTimeCompile,
       port,
       projectRoot,
       devServerPublicPathRoute,
@@ -129,8 +129,8 @@ function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): Inline
       port: vitePort,
       host: '127.0.0.1',
       // Disable file watching and HMR when executing tests in `run` mode
-      // if experimentalJustInTimeCompile is configured, we need to watch for file changes as the spec entries are going to be updated per test in run mode
-      ...(isTextTerminal && !experimentalJustInTimeCompile
+      // if justInTimeCompile is configured, we need to watch for file changes as the spec entries are going to be updated per test in run mode
+      ...(isTextTerminal && !justInTimeCompile
         ? { watch: { ignored: '**/*' }, hmr: false }
         : {}),
     },

npm/vite-dev-server/test/resolveConfig.spec.ts

@@ -110,14 +110,14 @@ describe('resolveConfig', function () {
       })
     })
 
-    describe('experimentalJustInTimeCompile', () => {
+    describe('justInTimeCompile', () => {
       let viteDevServerConfig: ViteDevServerConfig
 
       beforeEach(async () => {
         const projectRoot = await scaffoldSystemTestProject(`vite${version}-inspect`)
 
         viteDevServerConfig = getViteDevServerConfig(projectRoot)
-        viteDevServerConfig.cypressConfig.experimentalJustInTimeCompile = true
+        viteDevServerConfig.cypressConfig.justInTimeCompile = true
       })
 
       describe('open mode', () => {

npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts

@@ -17,7 +17,7 @@ export function makeCypressWebpackConfig (
   const {
     devServerConfig: {
       cypressConfig: {
-        experimentalJustInTimeCompile,
+        justInTimeCompile,
         port,
         projectRoot,
         devServerPublicPathRoute,
@@ -100,8 +100,8 @@ export function makeCypressWebpackConfig (
   } as any
 
   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 = {

npm/webpack-dev-server/test/makeWebpackConfig.spec.ts

@@ -392,7 +392,7 @@ describe('makeWebpackConfig', () => {
     })
   })
 
-  describe('experimentalJustInTimeCompile', () => {
+  describe('justInTimeCompile', () => {
     let devServerConfig: WebpackDevServerConfig
 
     const WEBPACK_MATRIX: {
@@ -419,7 +419,7 @@ describe('makeWebpackConfig', () => {
         cypressConfig: {
           projectRoot: '.',
           devServerPublicPathRoute: '/test-public-path',
-          experimentalJustInTimeCompile: true,
+          justInTimeCompile: true,
           baseUrl: null,
         } as Cypress.PluginConfigOptions,
         webpackConfig: {

packages/app/cypress/e2e/runner/runner-ct.experimentalJustInTimeCompile.cy.ts

@@ -2,17 +2,17 @@ import type { fixtureDirs } from '@tooling/system-tests'
 
 type ProjectDirs = typeof fixtureDirs
 
-const EXPERIMENTAL_JIT_DIR: ProjectDirs[number] = 'experimental-JIT'
+const JIT_COMPILE_DIR: ProjectDirs[number] = 'justInTimeCompile'
 
 const PROJECTS: {bundler: 'vite' | 'webpack'}[] = [
   { bundler: 'vite' },
   { bundler: 'webpack' },
 ]
 
 for (const { bundler } of PROJECTS) {
-  const PROJECT_NAME = `${EXPERIMENTAL_JIT_DIR}/${bundler}`
+  const PROJECT_NAME = `${JIT_COMPILE_DIR}/${bundler}`
 
-  describe(`CT experimentalJustInTimeCompile: ${bundler}`, { viewportWidth: 1500, defaultCommandTimeout: 30000 }, () => {
+  describe(`CT justInTimeCompile: ${bundler}`, { viewportWidth: 1500, defaultCommandTimeout: 30000 }, () => {
     const visitComponentSpecAndVerifyPass = (specNumber: number) => {
       cy.contains(`Component-${specNumber}.cy.jsx`).click()
       cy.waitForSpecToFinish(undefined)

packages/app/src/runner/index.ts

@@ -445,8 +445,8 @@ async function executeSpec (spec: SpecFile, isRerun: boolean = false) {
   }
 
   if (window.__CYPRESS_TESTING_TYPE__ === 'component') {
-    if (config.experimentalJustInTimeCompile && !config.isTextTerminal) {
-      // If running with experimentalJustInTimeCompile enabled and in open mode,
+    if (config.justInTimeCompile && !config.isTextTerminal) {
+      // If running with justInTimeCompile enabled and in open mode,
       // send a signal to the dev server to load the spec before running
       // since the spec and related resources are not yet compiled.
       await updateDevServerWithSpec(spec)

packages/config/__snapshots__/index.spec.ts.js

@@ -39,7 +39,6 @@ exports['config/src/index .getDefaultValues returns list of public config keys 1
   'experimentalMemoryManagement': false,
   'experimentalModifyObstructiveThirdPartyCode': false,
   'experimentalSkipDomainInjection': null,
-  'experimentalJustInTimeCompile': false,
   'experimentalOriginDependencies': false,
   'experimentalSourceRewriting': false,
   'experimentalSingleTabRunMode': false,
@@ -49,6 +48,7 @@ exports['config/src/index .getDefaultValues returns list of public config keys 1
   'fixturesFolder': 'cypress/fixtures',
   'excludeSpecPattern': '*.hot-update.js',
   'includeShadowDom': false,
+  'justInTimeCompile': true,
   'keystrokeDelay': 0,
   'modifyObstructiveCode': true,
   'numTestsKeptInMemory': 50,
@@ -129,7 +129,6 @@ exports['config/src/index .getDefaultValues returns list of public config keys f
   'experimentalMemoryManagement': false,
   'experimentalModifyObstructiveThirdPartyCode': false,
   'experimentalSkipDomainInjection': null,
-  'experimentalJustInTimeCompile': false,
   'experimentalOriginDependencies': false,
   'experimentalSourceRewriting': false,
   'experimentalSingleTabRunMode': false,
@@ -139,6 +138,7 @@ exports['config/src/index .getDefaultValues returns list of public config keys f
   'fixturesFolder': 'cypress/fixtures',
   'excludeSpecPattern': '*.hot-update.js',
   'includeShadowDom': false,
+  'justInTimeCompile': false,
   'keystrokeDelay': 0,
   'modifyObstructiveCode': true,
   'numTestsKeptInMemory': 50,
@@ -215,7 +215,6 @@ exports['config/src/index .getPublicConfigKeys returns list of public config key
   'experimentalMemoryManagement',
   'experimentalModifyObstructiveThirdPartyCode',
   'experimentalSkipDomainInjection',
-  'experimentalJustInTimeCompile',
   'experimentalOriginDependencies',
   'experimentalSourceRewriting',
   'experimentalSingleTabRunMode',
@@ -225,6 +224,7 @@ exports['config/src/index .getPublicConfigKeys returns list of public config key
   'fixturesFolder',
   'excludeSpecPattern',
   'includeShadowDom',
+  'justInTimeCompile',
   'keystrokeDelay',
   'modifyObstructiveCode',
   'numTestsKeptInMemory',

packages/config/src/options.ts

@@ -17,6 +17,7 @@ const BREAKING_OPTION_ERROR_KEY: Readonly<AllCypressErrorNames[]> = [
   'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT',
   'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_E2E',
   'EXPERIMENTAL_COMPONENT_TESTING_REMOVED',
+  'EXPERIMENTAL_JIT_COMPILE_REMOVED',
   'EXPERIMENTAL_SAMESITE_REMOVED',
   'EXPERIMENTAL_NETWORK_STUBBING_REMOVED',
   'EXPERIMENTAL_RUN_EVENTS_REMOVED',
@@ -232,8 +233,8 @@ const driverConfigOptions: Array<DriverConfigOption> = [
     isExperimental: true,
     requireRestartOnChange: 'server',
   }, {
-    name: 'experimentalJustInTimeCompile',
-    defaultValue: false,
+    name: 'justInTimeCompile',
+    defaultValue: true,
     validation: validate.isBoolean,
     isExperimental: true,
     requireRestartOnChange: 'server',
@@ -631,6 +632,10 @@ export const breakingOptions: Readonly<BreakingOption[]> = [
     name: 'experimentalGetCookiesSameSite',
     errorKey: 'EXPERIMENTAL_SAMESITE_REMOVED',
     isWarning: true,
+  }, {
+    name: 'experimentalJustInTimeCompile',
+    errorKey: 'EXPERIMENTAL_JIT_COMPILE_REMOVED',
+    isWarning: true,
   }, {
     name: 'experimentalNetworkStubbing',
     errorKey: 'EXPERIMENTAL_NETWORK_STUBBING_REMOVED',
@@ -736,8 +741,8 @@ export const breakingRootOptions: Array<BreakingOption> = [
     testingTypes: ['e2e'],
   },
   {
-    name: 'experimentalJustInTimeCompile',
-    errorKey: 'EXPERIMENTAL_JIT_COMPONENT_TESTING',
+    name: 'justInTimeCompile',
+    errorKey: 'JIT_COMPONENT_TESTING',
     isWarning: false,
     testingTypes: ['component'],
   },
@@ -756,8 +761,8 @@ export const testingTypeBreakingOptions: { e2e: Array<BreakingOption>, component
       isWarning: false,
     },
     {
-      name: 'experimentalJustInTimeCompile',
-      errorKey: 'EXPERIMENTAL_JIT_COMPONENT_TESTING',
+      name: 'justInTimeCompile',
+      errorKey: 'JIT_COMPONENT_TESTING',
       isWarning: false,
     },
   ],

packages/config/test/project/utils.spec.ts

@@ -969,6 +969,16 @@ describe('config/src/project/utils', () => {
       expect(warning).to.be.calledWith('EXPERIMENTAL_SAMESITE_REMOVED')
     })
 
+    it('warns if experimentalJustInTimeCompile is passed', async function () {
+      const warning = sinon.spy(errors, 'warning')
+
+      await this.defaults('experimentalJustInTimeCompile', true, {
+        experimentalJustInTimeCompile: true,
+      })
+
+      expect(warning).to.be.calledWith('EXPERIMENTAL_JIT_COMPILE_REMOVED')
+    })
+
     it('warns if experimentalSessionSupport is passed', async function () {
       const warning = sinon.spy(errors, 'warning')
 
@@ -1056,11 +1066,11 @@ describe('config/src/project/utils', () => {
             clientCertificates: { value: [], from: 'default' },
             defaultCommandTimeout: { value: 4000, from: 'default' },
             downloadsFolder: { value: 'cypress/downloads', from: 'default' },
+            excludeSpecPattern: { value: '*.hot-update.js', from: 'default' },
             env: {},
             execTimeout: { value: 60000, from: 'default' },
             experimentalModifyObstructiveThirdPartyCode: { value: false, from: 'default' },
             experimentalSkipDomainInjection: { value: null, from: 'default' },
-            experimentalJustInTimeCompile: { value: false, from: 'default' },
             experimentalCspAllowList: { value: false, from: 'default' },
             experimentalInteractiveRunEvents: { value: false, from: 'default' },
             experimentalMemoryManagement: { value: false, from: 'default' },
@@ -1073,7 +1083,7 @@ describe('config/src/project/utils', () => {
             fileServerFolder: { value: '', from: 'default' },
             fixturesFolder: { value: 'cypress/fixtures', from: 'default' },
             hosts: { value: null, from: 'default' },
-            excludeSpecPattern: { value: '*.hot-update.js', from: 'default' },
+            justInTimeCompile: { value: true, from: 'default' },
             includeShadowDom: { value: false, from: 'default' },
             isInteractive: { value: true, from: 'default' },
             keystrokeDelay: { value: 0, from: 'default' },
@@ -1153,10 +1163,10 @@ describe('config/src/project/utils', () => {
             clientCertificates: { value: [], from: 'default' },
             defaultCommandTimeout: { value: 4000, from: 'default' },
             downloadsFolder: { value: 'cypress/downloads', from: 'default' },
+            excludeSpecPattern: { value: '*.hot-update.js', from: 'default' },
             execTimeout: { value: 60000, from: 'default' },
             experimentalModifyObstructiveThirdPartyCode: { value: false, from: 'default' },
             experimentalSkipDomainInjection: { value: null, from: 'default' },
-            experimentalJustInTimeCompile: { value: false, from: 'default' },
             experimentalCspAllowList: { value: false, from: 'default' },
             experimentalInteractiveRunEvents: { value: false, from: 'default' },
             experimentalMemoryManagement: { value: false, from: 'default' },
@@ -1191,7 +1201,7 @@ describe('config/src/project/utils', () => {
             fileServerFolder: { value: '', from: 'default' },
             fixturesFolder: { value: 'cypress/fixtures', from: 'default' },
             hosts: { value: null, from: 'default' },
-            excludeSpecPattern: { value: '*.hot-update.js', from: 'default' },
+            justInTimeCompile: { value: true, from: 'default' },
             includeShadowDom: { value: false, from: 'default' },
             isInteractive: { value: true, from: 'default' },
             keystrokeDelay: { value: 0, from: 'default' },

packages/data-context/src/data/ProjectLifecycleManager.ts

@@ -241,11 +241,11 @@ export class ProjectLifecycleManager {
           /**
              * We need to start the dev server in the ProjectLifecycleManager when:
              *   1. GA component testing is running so we can compile the dev server will all specs matching the specPattern
-             *   2. experimentalJustInTimeCompile is enabled. In this case, we start a dev server
+             *   2. justInTimeCompile is enabled. In this case, we start a dev server
              *      with an empty specs list to initially compile the support file and related dependencies in order to hopefully
              *      leverage the dev server cache for recompiling for when we actually have a spec to add to the dev server entry.
              */
-          const specsToStartDevServer = finalConfig.experimentalJustInTimeCompile ? [] : this.ctx.project.specs
+          const specsToStartDevServer = finalConfig.justInTimeCompile ? [] : this.ctx.project.specs
           const devServerOptions = await this.ctx._apis.projectApi.getDevServer().start({ specs: specsToStartDevServer, config: finalConfig })
 
           // If we received a cypressConfig.port we want to null it out

packages/data-context/src/sources/ProjectDataSource.ts

@@ -385,17 +385,17 @@ export class ProjectDataSource {
       try {
         const config = await this.ctx.project.getConfig()
 
-        // If running the experimentalJustInTimeCompile for CT,
+        // If running the justInTimeCompile for CT,
         // ignore this watcher since we only handle one spec at a time and do not need to recompile any time the file system changes.
-        if (config.experimentalJustInTimeCompile && testingType === 'component') {
+        if (config.justInTimeCompile && testingType === 'component') {
           this.ctx.actions.project.refreshSpecs(specs)
 
           // If no differences are found, we do not need to emit events
           return
         }
       } catch (e) {
         // for cy-in-cy tests the config is the second instance of cypress isn't considered initialized yet.
-        // in this case since we only need it for experimental JIT in open mode, swallow the error
+        // in this case since we only need it for JITCompile in open mode, swallow the error
       }
 
       if (_.isEqual(this.specs, specs)) {