feat: Bundle cy.origin() dependencies at runtime

cli/CHANGELOG.md

@@ -1,4 +1,12 @@
  <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 12.6.0
+
+_Released 02/14/2023 (PENDING)_
+
+**Features:**
+
+- Added `Cypress.require()` for including dependencies within the `cy.origin()` callback.  Removed support for `require()` and `import()` within the callback. Addresses [#24976](https://github.com/cypress-io/cypress/issues/24976).
+
 ## 12.5.1
 
 _Released 02/10/2023 (PENDING)_

cli/types/cypress.d.ts

@@ -786,14 +786,20 @@ declare namespace Cypress {
      */
     off: Actions
 
+    /**
+     * Used to include dependencies within the cy.origin() callback
+     * @see https://on.cypress.io/origin
+     */
+    require: <T = any>(id: string) => T
+
     /**
      * Trigger action
      * @private
      */
     action: (action: string, ...args: any[]) => any[] | void
 
     /**
-     * Load  files
+     * Load files
      * @private
      */
     onSpecWindow: (window: Window, specList: string[] | Array<() => Promise<void>>) => void
@@ -3126,7 +3132,7 @@ declare namespace Cypress {
      */
     experimentalRunAllSpecs?: boolean
     /**
-     * Enables support for require/import within cy.origin.
+     * Enables support for `Cypress.require()` for including dependencies within the `cy.origin()` callback.
      * @default false
      */
     experimentalOriginDependencies?: boolean

cli/types/tests/cypress-tests.ts

@@ -1164,3 +1164,20 @@ namespace CypressTraversalTests {
   cy.wrap({}).parentsUntil('#myItem', 'a', { log: false, timeout: 100 }) // $ExpectType Chainable<JQuery<HTMLElement>>
   cy.wrap({}).parentsUntil('#myItem', 'a', { log: 'true' }) // $ExpectError
 }
+
+namespace CypressRequireTests {
+  Cypress.require('lodash')
+
+  const anydep = Cypress.require('anydep')
+  anydep // $ExpectType any
+
+  const sinon = Cypress.require<sinon.SinonStatic>('sinon') as typeof import('sinon')
+  sinon // $ExpectType SinonStatic
+
+  const lodash = Cypress.require<_.LoDashStatic>('lodash')
+  lodash // $ExpectType LoDashStatic
+
+  Cypress.require() // $ExpectError
+  Cypress.require({}) // $ExpectError
+  Cypress.require(123) // $ExpectError
+}

npm/webpack-batteries-included-preprocessor/index.js

@@ -180,6 +180,16 @@ preprocessor.defaultOptions = {
   watchOptions: {},
 }
 
+preprocessor.getFullWebpackOptions = (filePath, typescript) => {
+  const options = { typescript }
+
+  options.webpackOptions = getDefaultWebpackOptions()
+
+  addTypeScriptConfig({ filePath }, options)
+
+  return options.webpackOptions
+}
+
 // for testing purposes, but do not add this to the typescript interface
 preprocessor.__reset = webpackPreprocessor.__reset
 

npm/webpack-preprocessor/index.ts

@@ -5,21 +5,11 @@ import * as events from 'events'
 import * as path from 'path'
 import webpack from 'webpack'
 import utils from './lib/utils'
-import { crossOriginCallbackStore } from './lib/cross-origin-callback-store'
 import { overrideSourceMaps } from './lib/typescript-overrides'
-import { compileCrossOriginCallbackFiles } from './lib/cross-origin-callback-compile'
 
 const debug = Debug('cypress:webpack')
 const debugStats = Debug('cypress:webpack:stats')
 
-declare global {
-  // this indicates which commands should be acted upon by the
-  // cross-origin-callback-loader. its absence means the loader
-  // should not be utilized at all
-  // eslint-disable-next-line no-var
-  var __cypressCallbackReplacementCommands: string[] | undefined
-}
-
 type FilePath = string
 interface BundleObject {
   promise: Bluebird<FilePath>
@@ -163,8 +153,6 @@ interface WebpackPreprocessor extends WebpackPreprocessorFn {
 const preprocessor: WebpackPreprocessor = (options: PreprocessorOptions = {}): FilePreprocessor => {
   debug('user options: %o', options)
 
-  let crossOriginCallbackLoaderAdded = false
-
   // we return function that accepts the arguments provided by
   // the event 'file:preprocessor'
   //
@@ -241,25 +229,6 @@ const preprocessor: WebpackPreprocessor = (options: PreprocessorOptions = {}): F
     })
     .value() as any
 
-    const callbackReplacementCommands = global.__cypressCallbackReplacementCommands
-
-    if (!crossOriginCallbackLoaderAdded && !!callbackReplacementCommands) {
-      // webpack runs loaders last-to-first and we want ours to run last
-      // so that it's working with plain javascript
-      webpackOptions.module.rules.unshift({
-        test: /\.(js|ts|jsx|tsx)$/,
-        exclude: /node_modules/,
-        use: [{
-          loader: require.resolve('@cypress/webpack-preprocessor/dist/lib/cross-origin-callback-loader.js'),
-          options: {
-            commands: callbackReplacementCommands,
-          },
-        }],
-      })
-
-      crossOriginCallbackLoaderAdded = true
-    }
-
     debug('webpackOptions: %o', webpackOptions)
     debug('watchOptions: %o', watchOptions)
     if (options.typescript) debug('typescript: %s', options.typescript)
@@ -327,74 +296,26 @@ const preprocessor: WebpackPreprocessor = (options: PreprocessorOptions = {}): F
       }
 
       debug('finished bundling', outputPath)
+
       if (debugStats.enabled) {
         /* eslint-disable-next-line no-console */
         console.error(stats.toString({ colors: true }))
       }
 
-      const resolveAllBundles = () => {
-        bundles[filePath].deferreds.forEach((deferred) => {
-          // resolve with the outputPath so Cypress knows where to serve
-          // the file from
-          deferred.resolve(outputPath)
-        })
-
-        bundles[filePath].deferreds.length = 0
-      }
-
-      // the cross-origin-callback-loader extracts any cross-origin callback
-      // functions that require dependencies and stores their sources
-      // in the CrossOriginCallbackStore. it saves the callbacks per source
-      // files, since that's the context it has. here we need to unfurl
-      // what dependencies the input source file has so we can know which
-      // files stored in the CrossOriginCallbackStore to compile
-      const handleCrossOriginCallbackFiles = () => {
-        // get the source file and any of its dependencies
-        const sourceFiles = jsonStats.modules
-        .filter((module) => {
-          // entries have duplicate modules whose ids are numbers
-          return _.isString(module.id)
-        })
-        .map((module) => {
-          // module id is the path relative to the cwd,
-          // e.g. ./cypress/support/e2e.js, but we need it absolute
-          return path.join(process.cwd(), module.id as string)
-        })
-
-        if (!crossOriginCallbackStore.hasFilesFor(sourceFiles)) {
-          debug('no cross-origin callback files')
-
-          return resolveAllBundles()
-        }
-
-        compileCrossOriginCallbackFiles(crossOriginCallbackStore.getFilesFor(sourceFiles), {
-          originalFilePath: filePath,
-          webpackOptions,
-        })
-        .then(() => {
-          debug('resolve all after handling cross-origin callback files')
-          resolveAllBundles()
-        })
-        .catch((err) => {
-          rejectWithErr(err)
-        })
-        .finally(() => {
-          crossOriginCallbackStore.reset(filePath)
-        })
-      }
-
       // seems to be a race condition where changing file before next tick
       // does not cause build to rerun
       Bluebird.delay(0).then(() => {
         if (!bundles[filePath]) {
           return
         }
 
-        if (!callbackReplacementCommands) {
-          return resolveAllBundles()
-        }
+        bundles[filePath].deferreds.forEach((deferred) => {
+          // resolve with the outputPath so Cypress knows where to serve
+          // the file from
+          deferred.resolve(outputPath)
+        })
 
-        handleCrossOriginCallbackFiles()
+        bundles[filePath].deferreds.length = 0
       })
     }
 
@@ -454,17 +375,6 @@ const preprocessor: WebpackPreprocessor = (options: PreprocessorOptions = {}): F
           bundler.close(cb)
         }
       }
-
-      // clean up temp dir where cross-origin callback files are output
-      const tmpdir = utils.tmpdir(utils.hash(filePath))
-
-      debug('remove temp directory:', tmpdir)
-
-      utils.rmdir(tmpdir).catch((err) => {
-        // not the end of the world if removing the tmpdir fails, but we
-        // don't want it to crash the whole process by going uncaught
-        debug('failed removing temp directory: %s', err.stack)
-      })
     })
 
     // return the promise, which will resolve with the outputPath or reject