move 3rd party types to dev dependencies in CLI NPM package

[bahmutov]

• closes Move all @types CLI dependencies from prod to dev list #3371
• move @types/lodash
• move @types/blob-util
• move @types/bluebird
• move @types/minimatch
• move @types/jquery
• move @types/chai
• move @types/chai-jquery
• move @types/mocha
• move @types/sinon
• move @types/sinon-chai

[bahmutov]

@tgriesser can you take a look at the typescript changes - read the issue for motivation, trying to prevent type clashes between our bundled types and users' (like Lodash)

@NicholasBoll if you can take a quick look, we would appreciate it. Chai and jQuery are weird types since they are global and I had to delete node_modules/@types/chai/index.d.ts and node_modules/@types/jquery/index.d.ts to get dtslint to pass

[tgriesser]

This makes sense that we'd want to avoid including types that would conflict with users' installed types.

I'm wondering if there's any tooling that exists already that will solve this problem more generally for us, by effectively bundling them inline when they're imported so we have one (or two) big d.ts files which handles the namespacing, etc.

https://github.com/timocov/dts-bundle-generator
https://github.com/SitePen/dts-generator
https://github.com/TypeStrong/dts-bundle

I might play around with this because I've been wanting to solve this problem for knex as well, as it currently has @types/bluebird as a dependency for similar reasons as Cypress.

But generally I think the approach here makes sense, without getting it running i'm not sure if there's any issues with it.

[bahmutov]

@tgriesser I have looked at the TS bundle generators, they would need to tested well, since all require extensive configuration, and I have never used them. For now I think copying dependencies would do, and I will open a separate issue to find and use TS bundler.

[NicholasBoll]

At first I thought this was a terrible idea, but now I like it. The problem is around global definitions (namespaces) that collide. I looked into jQuery type definitions and chai type definitions. It looks like jQuery breaks up namespacing into different files, but chai looks like its namespace is in the same file. Does deleting it cause type errors where the chai type is not found?

Do you want me to try out these changes to verify it will work externally?

[bahmutov]

ughh, typescript@next does not like this change at all

Installing to /root/.dts/typescript-installs/next...
Installed!
Error: /root/cypress/cli/types/cy-chai.d.ts:3:22
ERROR: 3:22      expect  TypeScript@next compile error: 
File '/root/cypress/cli/types/chai/index.d.ts' not found.
ERROR: 9:28      expect  TypeScript@next compile error: 
Cannot find name 'chai'.
ERROR: 10:30     expect  TypeScript@next compile error: 
Cannot find name 'chai'.
ERROR: 11:30     expect  TypeScript@next compile error: 
Cannot find name 'chai'.

/root/cypress/cli/types/index.d.ts:19:22
ERROR: 19:22     expect  TypeScript@next compile error: 
File '/root/cypress/cli/types/jquery/index.d.ts' not found.
ERROR: 82:8      expect  TypeScript@next compile error: 
Cannot find name 'JQueryStatic'.
ERROR: 274:25    expect  TypeScript@next compile error: 
Cannot find name 'JQuery'.

and so on in https://circleci.com/gh/cypress-io/cypress/75061

[bahmutov]

Testing build NPM package

$ npm i https://cdn.cypress.io/beta/npm/3.1.6/circle-move-ts-types-to-dev-dependencies-3371-02202412002cfd0541cae6096fc614863750795d-76512/cypress.tgz --ignore-scripts

against kitchensink still has a problem

$ npm run types

> cypress-example-kitchensink@0.0.0-development types /Users/gleb/git/cypress-example-kitchensink
> tsc --noEmit

node_modules/cypress/types/cy-minimatch.d.ts:5:28 - error TS7016: Could not find a declaration file for module 'minimatch'. '/Users/gleb/git/cypress-example-kitchensink/node_modules/minimatch/minimatch.js' implicitly has an 'any' type.
  Try `npm install @types/minimatch` if it exists or add a new declaration (.d.ts) file containing `declare module 'minimatch';`

5 import * as mimimatch from 'minimatch'
                             ~~~~~~~~~~~

node_modules/cypress/types/sinon-chai/index.d.ts:12:24 - error TS2307: Cannot find module 'sinon'.

12 import * as Sinon from 'sinon';

[bahmutov]

I think the TS problems have been solved, all 3rd party deps use relative paths, tested against types in Kitchensink and TodoMVC, both are happy with new types

[Saibamen]

This should be deleted

[avahe-kellenberger]

Is this supposed to solve cypress installed @types/ packages? It's still installing @types/chai-jquery for me, currently.

I also saw post-install.js which seemed like it would take care of it, but yarn install cypress -D is still installing chai-jquery under types.