chore: refactor cypress/cli to TypeScript (#32063)

* migrate cli scripts to TypeScript

* convert all javascript source files in the CLI to TypeScript

rebase into first

* chore: refactor all tests to TypeScript

rebase into second

* add npmignore for cli for typescript files

* update build process

* fix publically available exports

* Fix cy-in-cy tests

* add ts-expect-error to failing files

* fix projectConfigIpc failures as there are now multiple installs of tsx

* fix after-pack hook

* fix binary script

* chore: update publish binary to account for CLI being an ESModule compiled down to CommonJS

* does this work?

* fix the verify spec by making the listr2 renderer silent as it behaves differently since the refactor and is printing non deterministic outputs into our tests that do not have a large impact on the area we are testing and mostly served to actually test the renders of the listr2 framework itself

* empty commit

* additional refactor to code to remove strange any typing and exporting

* bump cache and build binaries

* fix CLI exports to keep backwards compatibility

* fix unit-tests

* turn on mac jobs

* fix group name rename in CLI

* remove babel deps from cli and explicitly install typescript

* address feedback from code review

* dont just falsy check results and instead explicitly check for null or undefined

* add ts-expect-error

* additional pass on cleaning up dynamic require / import from global lib references

* annotate ts-expect-errors with reason for why error is expected

* add rest of ts-expect-error comments

* removing hardcoded branch to publish binary chore/migrate_cli_to_typescript

cli/scripts/build.ts

@@ -1,10 +1,12 @@
-const _ = require('lodash')
-const path = require('path')
-const shell = require('shelljs')
-const fs = require('../lib/fs')
+import _ from 'lodash'
+import path from 'path'
+import shell from 'shelljs'
+import fs from '../lib/fs'
 
 // grab the current version and a few other properties
 // from the root package.json
+import rootPkg from '@packages/root'
+
 const {
   version,
   description,
@@ -13,17 +15,17 @@ const {
   bugs,
   repository,
   keywords,
-} = require('@packages/root')
+} = rootPkg as any
 
 // the rest of properties should come from the package.json in CLI folder
 const packageJsonSrc = path.join('package.json')
 const packageJsonDest = path.join('build', 'package.json')
 
-function getStdout (cmd) {
+function getStdout (cmd: string): string {
   return shell.exec(cmd).trim()
 }
 
-function preparePackageForNpmRelease (json, branchName) {
+function preparePackageForNpmRelease (json: any, branchName?: string): any {
   // modify the existing package.json
   // to prepare it for releasing to npm
   delete json.devDependencies
@@ -49,17 +51,17 @@ function preparePackageForNpmRelease (json, branchName) {
     types: 'types', // typescript types
     scripts: {
       postinstall: 'node index.js --exec install',
-      size: 't=\"$(npm pack .)\"; wc -c \"${t}\"; tar tvf \"${t}\"; rm \"${t}\";',
+      size: 't="$(npm pack .)"; wc -c "${t}"; tar tvf "${t}"; rm "${t}";',
     },
   })
 
   return json
 }
 
-function makeUserPackageFile (branchName) {
+function makeUserPackageFile (branchName?: string): Promise<any> {
   return fs.readJsonAsync(packageJsonSrc)
-  .then((json) => preparePackageForNpmRelease(json, branchName))
-  .then((json) => {
+  .then((json: any) => preparePackageForNpmRelease(json, branchName))
+  .then((json: any) => {
     return fs.outputJsonAsync(packageJsonDest, json, {
       spaces: 2,
     })
@@ -67,11 +69,11 @@ function makeUserPackageFile (branchName) {
   })
 }
 
-module.exports = makeUserPackageFile
+export default makeUserPackageFile
 
 if (!module.parent) {
   makeUserPackageFile(process.env.BRANCH)
-  .catch((err) => {
+  .catch((err: any) => {
     /* eslint-disable no-console */
     console.error('Could not write user package file')
     console.error(err)

cli/scripts/clean.js

@@ -1,13 +0,0 @@
-const fs = require('fs-extra')
-const path = require('path')
-const { includeTypes } = require('./utils')
-
-fs.removeSync(path.join(__dirname, '..', 'build'))
-
-includeTypes.forEach((folder) => {
-  try {
-    fs.removeSync(path.join(__dirname, '..', 'types', folder))
-  } catch (e) {
-    //
-  }
-})

cli/scripts/clean.ts

@@ -0,0 +1,13 @@
+import fs from 'fs-extra'
+import path from 'path'
+import { includeTypes } from './utils'
+
+fs.removeSync(path.join(__dirname, '..', 'build'))
+
+includeTypes.forEach((folder: string) => {
+  try {
+    fs.removeSync(path.join(__dirname, '..', 'types', folder))
+  } catch (e: any) {
+    //
+  }
+})

cli/scripts/post-build.ts

@@ -1,12 +1,12 @@
-const shell = require('shelljs')
-const { resolve } = require('path')
+import shell from 'shelljs'
+import { resolve } from 'path'
 
 shell.set('-v') // verbose
 shell.set('-e') // any error is fatal
 
 // For each npm package that is re-published via cypress/*
 // make sure that it is also copied into the build directory
-const npmModulesToCopy = [
+const npmModulesToCopy: string[] = [
   'mount-utils',
   'react',
   'vue',
@@ -14,10 +14,10 @@ const npmModulesToCopy = [
   'svelte',
 ]
 
-npmModulesToCopy.forEach((folder) => {
+npmModulesToCopy.forEach((folder: string) => {
   // cli/mount-utils => cli/build/mount-utils
-  const from = resolve(`${__dirname}/../${folder}`)
-  const to = resolve(`${__dirname}/../build/${folder}`)
+  const from: string = resolve(`${__dirname}/../${folder}`)
+  const to: string = resolve(`${__dirname}/../build/${folder}`)
 
   shell.cp('-R', from, to)
 })

cli/scripts/post-install.ts

@@ -2,13 +2,13 @@
 
 // @ts-check
 /* eslint-disable no-console */
-const fs = require('fs-extra')
-const { includeTypes } = require('./utils')
-const shell = require('shelljs')
-const { join } = require('path')
-const resolvePkg = require('resolve-pkg')
+import fs from 'fs-extra'
+import { includeTypes } from './utils'
+import shell from 'shelljs'
+import { join } from 'path'
+import resolvePkg from 'resolve-pkg'
 
-require('./clean')
+import './clean'
 
 shell.set('-v') // verbose
 shell.set('-e') // any error is fatal
@@ -22,30 +22,30 @@ shell.set('-e') // any error is fatal
 
 fs.ensureDirSync(join(__dirname, '..', 'types'))
 
-includeTypes.forEach((folder) => {
-  const source = resolvePkg(`@types/${folder}`, { cwd: __dirname })
+includeTypes.forEach((folder: string) => {
+  const source: string = resolvePkg(`@types/${folder}`, { cwd: __dirname })
 
   fs.copySync(source, join(__dirname, '..', 'types', folder))
 })
 
 // jQuery v3.3.x includes "dist" folder that just references back to itself
 // causing dtslint to think there are double definitions. Remove that folder.
-const typesJqueryDistFolder = join('types', 'jquery', 'dist')
+const typesJqueryDistFolder: string = join('types', 'jquery', 'dist')
 
 shell.rm('-rf', typesJqueryDistFolder)
 
 /**
- * Replaces "reference types=<name>" comment with "reference path=..." line.
+ * Replaces "reference types=<n>" comment with "reference path=..." line.
  * @param {string} typeName - like "chai" or "jquery"
  * @param {string} relativeTypesFilePath - relative path to .d.ts file like "../chai/index.d.ts"
  * @param {string} filename - the source file to change
  */
-function makeReferenceTypesCommentRelative (typeName, relativeTypesFilePath, filename) {
+function makeReferenceTypesCommentRelative (typeName: string, relativeTypesFilePath: string, filename: string): void {
   console.log('in file %s changing reference for types %s to relative path %s',
     filename, typeName, relativeTypesFilePath)
 
-  const referenceTypes = `<reference types="${typeName}" />`
-  const relativeTypes = `<reference path="${relativeTypesFilePath}" />`
+  const referenceTypes: string = `<reference types="${typeName}" />`
+  const relativeTypes: string = `<reference path="${relativeTypesFilePath}" />`
 
   shell.sed(
     '-i',
@@ -62,7 +62,7 @@ makeReferenceTypesCommentRelative('chai', '../chai/index.d.ts',
 makeReferenceTypesCommentRelative('jquery', '../jquery/index.d.ts',
   join('types', 'chai-jquery', 'index.d.ts'))
 
-const sinonChaiFilename = join('types', 'sinon-chai', 'index.d.ts')
+const sinonChaiFilename: string = join('types', 'sinon-chai', 'index.d.ts')
 
 makeReferenceTypesCommentRelative('chai', '../chai/index.d.ts', sinonChaiFilename)
 
@@ -71,7 +71,7 @@ makeReferenceTypesCommentRelative('chai', '../chai/index.d.ts', sinonChaiFilenam
 makeReferenceTypesCommentRelative('sinon', '../sinon/index.d.ts', sinonChaiFilename)
 
 // and an import sinon line to be changed to relative path
-shell.sed('-i', 'from \"sinon\";', 'from \"../sinon\";', sinonChaiFilename)
+shell.sed('-i', 'from "sinon";', 'from "../sinon";', sinonChaiFilename)
 
 // copy experimental network stubbing type definitions
 // so users can import: `import 'cypress/types/net-stubbing'`
@@ -81,18 +81,18 @@ fs.copySync(resolvePkg('@packages/net-stubbing/lib/external-types.ts'), 'types/n
 // To avoid type clashes, some files should be commented out entirely by patch-package
 // and uncommented here.
 
-const filesToUncomment = [
+const filesToUncomment: string[] = [
   'mocha/index.d.ts',
   'jquery/JQuery.d.ts',
   'jquery/legacy.d.ts',
   'jquery/misc.d.ts',
 ]
 
-filesToUncomment.forEach((file) => {
-  const filePath = join(__dirname, '../types', file)
-  const str = fs.readFileSync(filePath).toString()
+filesToUncomment.forEach((file: string) => {
+  const filePath: string = join(__dirname, '../types', file)
+  const str: string = fs.readFileSync(filePath).toString()
 
-  const result = str.split('\n').map((line) => {
+  const result: string = str.split('\n').map((line: string) => {
     return line.startsWith('//z ') ? line.substring(4) : line
   }).join('\n')
 

cli/scripts/start-build.js

@@ -1,31 +0,0 @@
-#!/usr/bin/env node
-
-const { includeTypes } = require('./utils')
-const { join } = require('path')
-const shell = require('shelljs')
-
-shell.set('-v') // verbose
-shell.set('-e') // any error is fatal
-
-shell.rm('-rf', 'build')
-shell.mkdir('-p', 'build/bin')
-shell.mkdir('-p', 'build/types')
-shell.cp('bin/cypress', 'build/bin/cypress')
-shell.cp('NPM_README.md', 'build/README.md')
-shell.cp('.release.json', 'build/.release.json')
-// copies our typescript definitions
-shell.cp('-R', 'types/*.ts', 'build/types/')
-// copies 3rd party typescript definitions
-includeTypes.forEach((folder) => {
-  const source = join('types', folder)
-
-  shell.cp('-R', source, 'build/types')
-})
-
-// TODO: Add a typescript or rollup build step
-// The only reason start-build.js exists
-// is because the cli package does not have an actual
-// build process to compile index.js and lib
-shell.exec('babel lib -d build/lib')
-shell.exec('babel index.js -o build/index.js')
-shell.cp('index.mjs', 'build/index.mjs')

cli/scripts/start-build.ts

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+import { includeTypes } from './utils'
+import { join } from 'path'
+import shell from 'shelljs'
+
+shell.set('-v') // verbose
+shell.set('-e') // any error is fatal
+
+shell.rm('-rf', 'build')
+shell.mkdir('-p', 'build/bin')
+shell.mkdir('-p', 'build/types')
+shell.cp('bin/cypress', 'build/bin/cypress')
+shell.cp('NPM_README.md', 'build/README.md')
+shell.cp('.release.json', 'build/.release.json')
+// copies our typescript definitions
+shell.cp('-R', 'types/*.ts', 'build/types/')
+// copies 3rd party typescript definitions
+includeTypes.forEach((folder: string) => {
+  const source: string = join('types', folder)
+
+  shell.cp('-R', source, 'build/types')
+})
+
+// build the project and copy the build files over to the build directory
+shell.exec('tsc')
+
+shell.cp('index.js', 'build/index.js')
+shell.cp('index.mjs', 'build/index.mjs')
+
+shell.mkdir('-p', 'build/lib')
+shell.cp('lib/*.js', 'build/lib/')
+
+shell.mkdir('-p', 'build/lib/exec')
+shell.cp('lib/exec/*.js', 'build/lib/exec')
+
+shell.mkdir('-p', 'build/lib/tasks')
+shell.cp('lib/tasks/*.js', 'build/lib/tasks')

cli/scripts/utils.ts

@@ -3,7 +3,7 @@
  * when we bundle Cypress NPM package. These folder have ".d.ts"
  * definition files that we will need to include with our NPM package.
  */
-const includeTypes = [
+export const includeTypes: string[] = [
   'bluebird',
   'lodash',
   'mocha',
@@ -14,5 +14,3 @@ const includeTypes = [
   'chai-jquery',
   'jquery',
 ]
-
-module.exports = { includeTypes }