move 3rd party types to dev dependencies in CLI NPM package (#3425)

* wip: move lodash types to dev dependencies

* move blob-util types

* move types for minimatch

* do not lint types from minimatch

* move types sinon to dev dependencies

* move sinon-chai types to dev dependencies

* update tslint

* move types bluebird to dev dependencies

* move mocha types

* move jquery types to dev dependencies

* rename moment local wrapper

* move chai and chai-jquery

* refactor code for building CLI and dealing with folders

* linting

* include types subfolders

* replace types with relative paths

* transform sinon path to relative

* linting

* do not delete d.ts files

* linting

* chore: build npm package from this branch

* add minimatch relative reference

* work around minimatch

* set sinon to be relative load

* add readme to CLI

* linting readme

.gitignore

@@ -46,6 +46,17 @@ packages/server/support
 packages/server/test/support/fixtures/server/libs
 
 # CLI tool
+cli/types/blob-util
+cli/types/bluebird
+cli/types/chai
+cli/types/chai-jquery
+cli/types/jquery
+cli/types/lodash
+cli/types/mocha
+cli/types/minimatch
+cli/types/sinon
+cli/types/sinon-chai
+# ignore CLI output build folder
 cli/build
 
 # Building app binary

circle.yml

@@ -65,7 +65,7 @@ jobs:
 
       # need to restore a separate cache for each package.json
       - restore_cache:
-          key: v6-{{ arch }}-{{ .Branch }}-cli-deps
+          key: v7-{{ arch }}-{{ .Branch }}-cli-deps
       - restore_cache:
           key: v5-{{ arch }}-{{ .Branch }}-root-deps
       - restore_cache:
@@ -117,7 +117,7 @@ jobs:
 
       # save each node_modules folder per package
       - save_cache:
-          key: v6-{{ arch }}-{{ .Branch }}-cli-deps-{{ checksum "cli/package.json" }}
+          key: v7-{{ arch }}-{{ .Branch }}-cli-deps-{{ checksum "cli/package.json" }}
           paths:
             - cli/node_modules
       - save_cache:
@@ -234,6 +234,12 @@ jobs:
     steps:
       - attach_workspace:
           at: ~/
+      - run:
+          command: ls -la types
+          working_directory: cli
+      - run:
+          command: ls -la chai
+          working_directory: cli/types
       - run:
           command: npm run dtslint
           working_directory: cli
@@ -529,6 +535,9 @@ jobs:
           name: build NPM package
           working_directory: cli
           command: npm run build
+      - run:
+          command: ls -la types
+          working_directory: cli/build
       - run:
           name: list NPM package contents
           working_directory: cli/build
@@ -754,6 +763,7 @@ linux-workflow: &linux-workflow
           branches:
             only:
               - develop
+              - move-ts-types-to-dev-dependencies-3371
         requires:
           - build
     - build-binary:

cli/README.md

@@ -0,0 +1,26 @@
+# Cypress CLI source
+
+This folder is used to build Cypress NPM module.
+
+## Building
+
+See `scripts/build.js`. Note that the built NPM package will include [NPM_README.md](NPM_README.md) as its public README file.
+
+## Testing
+
+To build and test an NPM package:
+
+- `npm install`
+- `npm run build`
+
+This creates `build` folder.
+
+- `cd build; npm pack`
+
+This creates an archive, usually named `cypress-<version>.tgz`. You can install this archive from other projects, but because there is no corresponding binary yet (probably), skip binary download. For example from inside `cypress-example-kitchensink` folder
+
+```shell
+npm i ~/git/cypress/cli/build/cypress-3.1.5.tgz --ignore-scripts
+```
+
+Which installs the `tgz` file we have just built from folder `~/git/cypress/cli/build`.

cli/package.json

@@ -10,6 +10,7 @@
     "node": ">=4.0.0"
   },
   "scripts": {
+    "postinstall": "node ./scripts/post-install.js",
     "pretest": "npm run check-deps-pre",
     "test": "npm run test-unit",
     "pretest-unit": "npm run check-deps-pre",
@@ -40,16 +41,6 @@
   "dependencies": {
     "@cypress/listr-verbose-renderer": "0.4.1",
     "@cypress/xvfb": "1.2.4",
-    "@types/blob-util": "1.3.3",
-    "@types/bluebird": "3.5.18",
-    "@types/chai": "4.0.8",
-    "@types/chai-jquery": "1.1.38",
-    "@types/jquery": "3.3.6",
-    "@types/lodash": "4.14.121",
-    "@types/minimatch": "3.0.3",
-    "@types/mocha": "2.2.44",
-    "@types/sinon": "7.0.0",
-    "@types/sinon-chai": "3.2.2",
     "bluebird": "3.5.0",
     "cachedir": "1.3.0",
     "chalk": "2.4.2",
@@ -81,6 +72,16 @@
   },
   "devDependencies": {
     "@cypress/sinon-chai": "1.0.0",
+    "@types/blob-util": "1.3.3",
+    "@types/bluebird": "3.5.18",
+    "@types/chai": "4.0.8",
+    "@types/chai-jquery": "1.1.38",
+    "@types/jquery": "3.3.6",
+    "@types/lodash": "4.14.120",
+    "@types/minimatch": "3.0.3",
+    "@types/mocha": "2.2.44",
+    "@types/sinon": "7.0.0",
+    "@types/sinon-chai": "3.2.2",
     "babel-cli": "6.26.0",
     "babel-preset-es2015": "6.24.1",
     "bin-up": "1.1.0",
@@ -102,6 +103,6 @@
     "bin",
     "lib",
     "index.js",
-    "types/*.d.ts"
+    "types/**/*.d.ts"
   ]
 }

cli/scripts/build.js

@@ -25,6 +25,8 @@ function preparePackageForNpmRelease (json) {
   // to prepare it for releasing to npm
   delete json.devDependencies
   delete json['private']
+  // no need to include "nyc" code coverage settings
+  delete json.nyc
 
   _.extend(json, {
     version,

cli/scripts/post-install.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+
+const { includeTypes } = require('./utils')
+const shell = require('shelljs')
+const { join } = require('path')
+
+shell.set('-v') // verbose
+shell.set('-e') // any error is fatal
+
+// we include the TypeScript definitions for the bundled 3rd party tools
+// thus we need to copy them from "dev" dependencies into our types folder
+includeTypes.forEach((folder) => {
+  const source = join('node_modules', '@types', folder)
+
+  shell.cp('-R', source, 'types')
+})
+
+// fix paths to Chai, jQuery and other types to be relative
+shell.sed(
+  '-i',
+  '<reference types="chai" />',
+  '<reference path="../chai/index.d.ts" />',
+  join('types', 'chai-jquery', 'index.d.ts')
+)
+shell.sed(
+  '-i',
+  '<reference types="jquery" />',
+  '<reference path="../jquery/index.d.ts" />',
+  join('types', 'chai-jquery', 'index.d.ts')
+)
+shell.sed(
+  '-i',
+  '<reference types="chai" />',
+  '<reference path="../chai/index.d.ts" />',
+  join('types', 'sinon-chai', 'index.d.ts')
+)
+shell.sed(
+  '-i',
+  '<reference types="sinon" />',
+  '<reference types="../sinon" />',
+  join('types', 'sinon-chai', 'index.d.ts')
+)
+// also use relative import for sinon-chai
+shell.sed(
+  '-i',
+  'from \'sinon\';',
+  'from \'../sinon\';',
+  join('types', 'sinon-chai', 'index.d.ts')
+)

cli/scripts/start-build.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+const { includeTypes } = require('./utils')
+const { join } = require('path')
 const shell = require('shelljs')
 
 shell.set('-v') // verbose
@@ -11,7 +13,14 @@ 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')
+})
 
 shell.exec('babel lib -d build/lib')
 shell.exec('babel index.js -o build/index.js')

cli/scripts/utils.js

@@ -0,0 +1,19 @@
+/**
+ * Folder names in "node_modules/@types" that we should include
+ * 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 = [
+  'blob-util',
+  'bluebird',
+  'lodash',
+  'mocha',
+  'minimatch',
+  'sinon',
+  'sinon-chai',
+  'chai',
+  'chai-jquery',
+  'jquery',
+]
+
+module.exports = { includeTypes }

cli/types/blob-util.d.ts → cli/types/cy-blob-util.d.ts

@@ -3,7 +3,7 @@
 // so that Cypress can get and use the Blob type
 
 // tslint:disable-next-line:no-implicit-dependencies
-import * as blobUtil from 'blob-util'
+import * as blobUtil from './blob-util'
 
 export = BlobUtil
 export as namespace BlobUtil

cli/types/bluebird.d.ts → cli/types/cy-bluebird.d.ts

@@ -1,7 +1,7 @@
 // Shim definition to export a namespace. Cypress is actually a global module
 // so import/export isn't allowed there. We import here and define a global module
 // so that Cypress can get and use the Blob type
-import * as BluebirdStatic from 'bluebird'
+import * as BluebirdStatic from './bluebird'
 
 export = Bluebird
 export as namespace Bluebird

cli/types/chai.d.ts → cli/types/cy-chai.d.ts

@@ -1,7 +1,6 @@
 // Shim definition to export a namespace. Cypress is actually a global module
 // so import/export isn't allowed there. We import here and define a global module
-// tslint:disable-next-line:no-implicit-dependencies
-import * as chai from 'chai'
+/// <reference path="./chai/index.d.ts" />
 
 export = Chai
 export as namespace Chai

cli/types/cy-minimatch.d.ts

@@ -0,0 +1,96 @@
+// I was trying to avoid relying on "import" of actual module from "minimatch"
+// because it would not work in test project, and the only reliable way
+// to get around type errors finally was to copy the minimal minimatch function
+// definition from "minimatch/index.d.ts" here and just keep it in our code
+
+export = Minimatch
+export as namespace Minimatch
+
+interface MinimatchOptions {
+  /**
+   * Dump a ton of stuff to stderr.
+   *
+   * @default false
+   */
+  debug?: boolean
+
+  /**
+   * Do not expand {a,b} and {1..3} brace sets.
+   *
+   * @default false
+   */
+  nobrace?: boolean
+
+  /**
+   * Disable ** matching against multiple folder names.
+   *
+   * @default false
+   */
+  noglobstar?: boolean
+
+  /**
+   * Allow patterns to match filenames starting with a period,
+   * even if the pattern does not explicitly have a period in that spot.
+   *
+   * @default false
+   */
+  dot?: boolean
+
+  /**
+   * Disable "extglob" style patterns like +(a|b).
+   *
+   * @default false
+   */
+  noext?: boolean
+
+  /**
+   * Perform a case-insensitive match.
+   *
+   * @default false
+   */
+  nocase?: boolean
+
+  /**
+   * When a match is not found by minimatch.match,
+   * return a list containing the pattern itself if this option is set.
+   * Otherwise, an empty list is returned if there are no matches.
+   *
+   * @default false
+   */
+  nonull?: boolean
+
+  /**
+   * If set, then patterns without slashes will be matched against
+   * the basename of the path if it contains slashes.
+   *
+   * @default false
+   */
+  matchBase?: boolean
+
+  /**
+   * Suppress the behavior of treating #
+   * at the start of a pattern as a comment.
+   *
+   * @default false
+   */
+  nocomment?: boolean
+
+  /**
+   * Suppress the behavior of treating a leading ! character as negation.
+   *
+   * @default false
+   */
+  nonegate?: boolean
+
+  /**
+   * Returns from negate expressions the same as if they were not negated.
+   * (Ie, true on a hit, false on a miss.)
+   *
+   * @default false
+   */
+  flipNegate?: boolean
+}
+
+declare namespace Minimatch {
+  function minimatch(target: string, pattern: string, options?: MinimatchOptions): boolean
+}