feat: allow use of javascript in config file

packages/server/lib/errors.js

@@ -490,7 +490,7 @@ const getMsgByType = function (type, arg1 = {}, arg2, arg3) {
         ${chalk.yellow('Assign a different port with the \'--port <port>\' argument or shut down the other running process.')}`
     case 'ERROR_READING_FILE':
       filePath = `\`${arg1}\``
-      err = `\`${arg2}\``
+      err = `\`${arg2.type || arg2.code || arg2.name}: ${arg2.message}\``
 
       return stripIndent`\
         Error reading from: ${chalk.blue(filePath)}
@@ -1049,6 +1049,11 @@ const clone = function (err, options = {}) {
 
   if (options.html) {
     obj.message = ansi_up.ansi_to_html(err.message)
+    // revert back the distorted characters
+    // in case there is an error in a child_process
+    // that contains quotes
+    .replace(/\&\#x27;/g, '\'')
+    .replace(/\&quot\;/g, '"')
   } else {
     obj.message = err.message
   }

packages/server/lib/project-base.ts

@@ -83,6 +83,7 @@ export class ProjectBase<TServer extends ServerE2E | ServerCt> extends EE {
   protected _server?: TServer
   protected _automation?: Automation
   private _recordTests?: any = null
+  private _isServerOpen: boolean = false
 
   public browser: any
   public options: OpenProjectLaunchOptions
@@ -220,6 +221,8 @@ export class ProjectBase<TServer extends ServerE2E | ServerCt> extends EE {
       specsStore,
     })
 
+    this._isServerOpen = true
+
     // if we didnt have a cfg.port
     // then get the port once we
     // open the server
@@ -340,6 +343,10 @@ export class ProjectBase<TServer extends ServerE2E | ServerCt> extends EE {
     this.spec = null
     this.browser = null
 
+    if (!this._isServerOpen) {
+      return
+    }
+
     const closePreprocessor = (this.testingType === 'e2e' && preprocessor.close) ?? undefined
 
     await Promise.all([
@@ -348,6 +355,8 @@ export class ProjectBase<TServer extends ServerE2E | ServerCt> extends EE {
       closePreprocessor?.(),
     ])
 
+    this._isServerOpen = false
+
     process.chdir(localCwd)
 
     const config = this.getConfig()
@@ -534,7 +543,7 @@ export class ProjectBase<TServer extends ServerE2E | ServerCt> extends EE {
     }
 
     if (configFile !== false) {
-      this.watchers.watch(settings.pathToConfigFile(projectRoot, { configFile }), obj)
+      this.watchers.watchTree(settings.pathToConfigFile(projectRoot, { configFile }), obj)
     }
 
     return this.watchers.watch(settings.pathToCypressEnvJson(projectRoot), obj)
@@ -552,7 +561,7 @@ export class ProjectBase<TServer extends ServerE2E | ServerCt> extends EE {
 
     try {
       Reporter.loadReporter(reporter, projectRoot)
-    } catch (err) {
+    } catch (err: any) {
       const paths = Reporter.getSearchPathsForReporter(reporter, projectRoot)
 
       // only include the message if this is the standard MODULE_NOT_FOUND

packages/server/lib/util/require_async.ts

@@ -0,0 +1,93 @@
+import _ from 'lodash'
+import * as path from 'path'
+import * as cp from 'child_process'
+import * as inspector from 'inspector'
+import * as util from '../plugins/util'
+import * as errors from '../errors'
+import { fs } from '../util/fs'
+import Debug from 'debug'
+
+const debug = Debug('cypress:server:require_async')
+
+let requireProcess: cp.ChildProcess | null
+
+interface RequireAsyncOptions{
+  projectRoot: string
+  loadErrorCode: string
+  /**
+   * members of the object returned that are functions and will need to be wrapped
+   */
+  functionNames: string[]
+}
+
+interface ChildOptions{
+  stdio: 'inherit'
+  execArgv?: string[]
+}
+
+const killChildProcess = () => {
+  requireProcess && requireProcess.kill()
+  requireProcess = null
+}
+
+export async function requireAsync (filePath: string, options: RequireAsyncOptions): Promise<any> {
+  return new Promise((resolve, reject) => {
+    if (requireProcess) {
+      debug('kill existing config process')
+      killChildProcess()
+    }
+
+    if (/\.json$/.test(filePath)) {
+      fs.readJson(path.resolve(options.projectRoot, filePath)).then((result) => resolve(result)).catch(reject)
+    }
+
+    const childOptions: ChildOptions = {
+      stdio: 'inherit',
+    }
+
+    if (inspector.url()) {
+      childOptions.execArgv = _.chain(process.execArgv.slice(0))
+      .remove('--inspect-brk')
+      .push(`--inspect=${process.debugPort + 1}`)
+      .value()
+    }
+
+    const childArguments = ['--projectRoot', options.projectRoot, '--file', filePath]
+
+    debug('fork child process', path.join(__dirname, 'require_async_child.js'), childArguments, childOptions)
+    requireProcess = cp.fork(path.join(__dirname, 'require_async_child.js'), childArguments, childOptions)
+    const ipc = util.wrapIpc(requireProcess)
+
+    if (requireProcess.stdout && requireProcess.stderr) {
+      // manually pipe plugin stdout and stderr for dashboard capture
+      // @see https://github.com/cypress-io/cypress/issues/7434
+      requireProcess.stdout.on('data', (data) => process.stdout.write(data))
+      requireProcess.stderr.on('data', (data) => process.stderr.write(data))
+    }
+
+    ipc.on('loaded', (result) => {
+      debug('resolving with result %o', result)
+      resolve(result)
+    })
+
+    ipc.on('load:error', (type, ...args) => {
+      debug('load:error %s, rejecting', type)
+      killChildProcess()
+
+      const err = errors.get(type, ...args)
+
+      // if it's a non-cypress error, restore the initial error
+      if (!(err.message?.length)) {
+        err.isCypressErr = false
+        err.message = args[1]
+        err.code = type
+        err.name = type
+      }
+
+      reject(err)
+    })
+
+    debug('trigger the load of the file')
+    ipc.send('load')
+  })
+}

packages/server/lib/util/require_async_child.js

@@ -0,0 +1,71 @@
+require('graceful-fs').gracefulify(require('fs'))
+const stripAnsi = require('strip-ansi')
+const debug = require('debug')('cypress:server:require_async:child')
+const util = require('../plugins/util')
+const ipc = util.wrapIpc(process)
+
+require('./suppress_warnings').suppress()
+
+const { file, projectRoot } = require('minimist')(process.argv.slice(2))
+
+run(ipc, file, projectRoot)
+
+/**
+ * runs and returns the passed `requiredFile` file in the ipc `load` event
+ * @param {*} ipc Inter Process Comunication protocol
+ * @param {*} requiredFile the file we are trying to load
+ * @param {*} projectRoot the root of the typescript project (useful mainly for tsnode)
+ * @returns
+ */
+function run (ipc, requiredFile, projectRoot) {
+  debug('requiredFile:', requiredFile)
+  debug('projectRoot:', projectRoot)
+  if (!projectRoot) {
+    throw new Error('Unexpected: projectRoot should be a string')
+  }
+
+  process.on('uncaughtException', (err) => {
+    debug('uncaught exception:', util.serializeError(err))
+    ipc.send('error', util.serializeError(err))
+
+    return false
+  })
+
+  process.on('unhandledRejection', (event) => {
+    const err = (event && event.reason) || event
+
+    debug('unhandled rejection:', util.serializeError(err))
+    ipc.send('error', util.serializeError(err))
+
+    return false
+  })
+
+  ipc.on('load', () => {
+    try {
+      debug('try loading', requiredFile)
+      const exp = require(requiredFile)
+
+      const result = exp.default || exp
+
+      ipc.send('loaded', result)
+
+      debug('config %o', result)
+    } catch (err) {
+      if (err.name === 'TSError') {
+        // beause of this https://github.com/TypeStrong/ts-node/issues/1418
+        // we have to do this https://stackoverflow.com/questions/25245716/remove-all-ansi-colors-styles-from-strings/29497680
+        const cleanMessage = stripAnsi(err.message)
+        // replace the first line with better text (remove potentially misleading word TypeScript for example)
+        .replace(/^.*\n/g, 'Error compiling file\n')
+
+        ipc.send('load:error', err.name, requiredFile, cleanMessage)
+      } else {
+        const realErrorCode = err.code || err.name
+
+        debug('failed to load file:%s\n%s: %s', requiredFile, realErrorCode, err.message)
+
+        ipc.send('load:error', realErrorCode, requiredFile, err.message)
+      }
+    }
+  })
+}

packages/server/lib/util/settings.js

@@ -4,6 +4,19 @@ const path = require('path')
 const errors = require('../errors')
 const log = require('../log')
 const { fs } = require('../util/fs')
+const { requireAsync } = require('./require_async')
+const debug = require('debug')('cypress:server:settings')
+
+function jsCode (obj) {
+  const objJSON = obj && !_.isEmpty(obj)
+    ? JSON.stringify(_.omit(obj, 'configFile'), null, 2)
+    : `{
+
+}`
+
+  return `module.exports = ${objJSON}
+`
+}
 
 // TODO:
 // think about adding another PSemaphore
@@ -78,7 +91,19 @@ module.exports = {
   },
 
   _write (file, obj = {}) {
-    return fs.outputJsonAsync(file, obj, { spaces: 2 })
+    if (/\.json$/.test(file)) {
+      debug('writing json file')
+
+      return fs.outputJsonAsync(file, obj, { spaces: 2 })
+      .return(obj)
+      .catch((err) => {
+        return this._logWriteErr(file, err)
+      })
+    }
+
+    debug('writing javascript file')
+
+    return fs.writeFileAsync(file, jsCode(obj))
     .return(obj)
     .catch((err) => {
       return this._logWriteErr(file, err)
@@ -110,7 +135,13 @@ module.exports = {
       return null
     })
   },
-
+  /**
+   * Ensures the project at this root has a config file
+   * that is readable and writable by the node process
+   * @param {string} projectRoot root of the project
+   * @param {object} options
+   * @returns
+   */
   exists (projectRoot, options = {}) {
     const file = this.pathToConfigFile(projectRoot, options)
 
@@ -121,7 +152,7 @@ module.exports = {
       // directory is writable
       return fs.accessAsync(projectRoot, fs.W_OK)
     }).catch({ code: 'ENOENT' }, () => {
-      // cypress.json does not exist, we missing project
+      // cypress.json does not exist, completely new project
       log('cannot find file %s', file)
 
       return this._err('CONFIG_FILE_NOT_FOUND', this.configFile(options), projectRoot)
@@ -144,29 +175,45 @@ module.exports = {
 
     const file = this.pathToConfigFile(projectRoot, options)
 
-    return fs.readJsonAsync(file)
-    .catch({ code: 'ENOENT' }, () => {
-      return this._write(file, {})
-    }).then((json = {}) => {
-      if (this.isComponentTesting(options) && 'component' in json) {
-        json = { ...json, ...json.component }
+    return requireAsync(file,
+      {
+        projectRoot,
+        loadErrorCode: 'CONFIG_FILE_ERROR',
+      })
+    .catch((err) => {
+      if (err.type === 'MODULE_NOT_FOUND' || err.code === 'ENOENT') {
+        debug('file not found', file)
+
+        return this._write(file, {})
+      }
+
+      return Promise.reject(err)
+    })
+    .then((configObject = {}) => {
+      if (this.isComponentTesting(options) && 'component' in configObject) {
+        configObject = { ...configObject, ...configObject.component }
       }
 
-      if (!this.isComponentTesting(options) && 'e2e' in json) {
-        json = { ...json, ...json.e2e }
+      if (!this.isComponentTesting(options) && 'e2e' in configObject) {
+        configObject = { ...configObject, ...configObject.e2e }
       }
 
-      const changed = this._applyRewriteRules(json)
+      debug('resolved configObject', configObject)
+      const changed = this._applyRewriteRules(configObject)
 
       // if our object is unchanged
       // then just return it
-      if (_.isEqual(json, changed)) {
-        return json
+      if (_.isEqual(configObject, changed)) {
+        return configObject
       }
 
       // else write the new reduced obj
       return this._write(file, changed)
+      .then((config) => {
+        return config
+      })
     }).catch((err) => {
+      debug('an error occured when reading config', err)
       if (errors.isCypressErr(err)) {
         throw err
       }
@@ -196,7 +243,7 @@ module.exports = {
       return Promise.resolve({})
     }
 
-    return this.read(projectRoot)
+    return this.read(projectRoot, options)
     .then((settings) => {
       _.extend(settings, obj)
 
@@ -206,10 +253,6 @@ module.exports = {
     })
   },
 
-  remove (projectRoot, options = {}) {
-    return fs.unlinkSync(this.pathToConfigFile(projectRoot, options))
-  },
-
   pathToConfigFile (projectRoot, options = {}) {
     const configFile = this.configFile(options)
 

packages/server/package.json

@@ -38,7 +38,7 @@
     "chai": "1.10.0",
     "chalk": "2.4.2",
     "check-more-types": "2.24.0",
-    "chokidar": "3.2.2",
+    "chokidar": "3.5.1",
     "chrome-remote-interface": "0.28.2",
     "cli-table3": "0.5.1",
     "coffeescript": "1.12.7",