Out-of-the-box TypeScript Support #5906

sainthkh · 2019-12-07T01:22:29Z

Closes Proposal: add native built-in typescript support #1859

User facing changelog

You don't need to install TypeScript plugin to use Cypress. It works out-of-the-box.

Additional details

Why was this change necessary?

Many developers are now using TypeScript and want to use Cypress + TypeScript without any configuration.

What is affected by this change?

Bundle size will become a bit bigger because ts-node. (If it's a problem, we need to drop TypeScript support for plugins.)

Any implementation details to explain?

I've developed a small transform that transpiles the ts files.

How has the user experience changed?

Before: Install TypeScript plugin. You cannot use ts in plugins.
After: Just drop ts files. It works.

PR Tasks

Have tests been added/updated?
Has the original issue been tagged with a release in ZenHub?
Has a PR for user-facing changes been opened in cypress-documentation?
- TypeScript related documents should be changed.
[NA] Have API changes been updated in the type definitions?
[NA] Have new configuration options been added to the cypress.schema.json? -> No options added.

cypress-bot · 2019-12-07T01:22:31Z

Thanks for the contribution! Below are some guidelines Cypress uses when doing PR reviews.

Please write [WIP] in the title of your Pull Request if your PR is not ready for review - someone will review your PR as soon as the [WIP] is removed.
Please familiarize yourself with the PR Review Checklist and feel free to make updates on your PR based on these guidelines.

PR Review Checklist

If any of the following requirements can't be met, leave a comment in the review selecting 'Request changes', otherwise 'Approve'.

User Experience

The feature/bugfix is self-documenting from within the product.
The change provides the end user with a way to fix their problem (no dead ends).

Functionality

The code works and performs its intended function with the correct logic.
Performance has been factored in (for example, the code cleans up after itself to not cause memory leaks).
The code guards against edge cases and invalid input and has tests to cover it.

Maintainability

The code is readable (too many nested 'if's are a bad sign).
Names used for variables, methods, etc, clearly describe their function.
The code is easy to understood and there are relevant comments explaining.
New algorithms are documented in the code with link(s) to external docs (flowcharts, w3c, chrome, firefox).
There are comments containing link(s) to the addressed issue (in tests and code).

Quality

The change does not reimplement code.
There's not a module from the ecosystem that should be used instead.
There is no redundant or duplicate code.
There are no irrelevant comments left in the code.
Tests are testing the code’s intended functionality in the best way possible.

Internal

The original issue has been tagged with a release in ZenHub.

sainthkh · 2019-12-07T08:01:36Z

I don't know why but stack trace message structures are a bit changed. So, updated snapshots.

sainthkh · 2020-01-17T07:58:38Z

@jennifer-shehane It passed build this time.

packages/server/lib/plugins/resolve.js

bahmutov · 2020-02-03T17:34:37Z

I have tested this PR locally against a new project, this is pretty incredible.

Scaffold a new project (it outputs JavaScript) and rename a spec to .ts and it just works

Create new TS spec and it works

If you rename plugins or support file and restart the test runner, then it works, nice.

But if you rename the plugins file to plugins/index.ts or the support file to support/index.ts, then it fails (need to restart the test runner, but the error message does not say so)

I am fine with including ts-node as a dependency, I think increased size is worth the benefits - a lot of users love TypeScript and would love native support in Cypress

bahmutov

I love the functionality, I just think that if you rename plugins/index.js to plugins/index.ts while the test runner is running it should intelligently handle this.

Same for support file.

sainthkh · 2020-03-24T08:55:29Z

Rebased and fixed failures.
I didn't do anything but appveyor fails. What happened?

bahmutov · 2020-03-24T14:43:28Z

Nice @sainthkh I will fix the AppVeyor - one of my collaborators on print-env made a new v2 release, which has a breaking change https://github.com/bahmutov/print-env/releases so I need to update how it is used here

CypressJoseph · 2020-03-25T17:32:06Z

packages/server/lib/plugins/simple_tsify.js

+        this.push(text)
+      } else {
+        this.push(ts.transpileModule(text, {
+          compilerOptions: {


so this completely overrides specific configuration in tsconfig.json, if i understand?

(that seems reasonable honestly, just thinking about it)

Yes, it does. Because for the speed, it ignores the type check. If we do type check, it takes about 7-10 sec to load a test file.

CypressJoseph

this looks great!! i think i do wonder about: how users can extend the configuration we use to transpile, if they might need to.

this also makes me wonder whether we are emitting ts instead of js for examples on first install? if we're not maybe this unlocks a good opportunity to do that (we'd have to author examples in TS ofc)

They're tested in preprocessor.

sainthkh · 2020-04-13T08:21:38Z

Rebased and fixed all.
Flaky test.

chrisbreiding · 2020-04-13T14:29:15Z

This looks really good.

I think the only thing left to do is update the documentation and recipes regarding TypeScript.

The TypeScript doc should now make it clear TypeScript is supported out of the box. We don't really need to reference the recipes for setting up a preprocessor anymore. Instead, we should point out they need to have their own typescript package installed for it to work.
We should update the recipes that involve TypeScript. Maybe remove everything but their READMEs and point out that it's included out of the box now.

chrisbreiding · 2020-04-13T14:40:51Z

Gleb made a good point that users could be on an older version of Cypress, so we should keep the recipes around, just add a note that says if you're in version x.x.x or later, it's supported by default.

We don't need a similar note in the docs, since there's an underlying assumption with the docs that it relates to the latest version of Cypress.

bahmutov · 2020-04-13T14:47:37Z

In the docs we can also add this note under history widget

…

Sent from my iPhone

On Apr 13, 2020, at 10:41, Chris Breiding ***@***.***> wrote: Gleb made a good point that users could be on an older version of Cypress, so we should keep the recipes around, just add a note that says if you're in version x.x.x or later, it's supported by default. We don't need a similar note in the docs, since there's an underlying assumption with the docs that it relates to the latest version of Cypress. — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub, or unsubscribe.

jennifer-shehane · 2020-04-13T15:07:10Z

Need to update the docs with this, but going to merge this in to try to get it into our release today and see how our tests run against it in our example projects in develop. So I'll open a PR for the docs.

kpittman-securus · 2020-04-13T17:23:18Z

@jennifer-shehane Awesome! Do we know what version number this will be released with? Our team is looking at updating our version of Cypress and I'd love for this feature to be included.

Saibamen · 2020-04-13T23:00:00Z

@kpittman-securus Already released in 4.4.0: https://github.com/cypress-io/cypress/releases

brian-mann · 2020-04-22T16:42:48Z

packages/server/lib/project.js

@@ -99,6 +101,23 @@ class Project extends EE {

        return scaffold.plugins(path.dirname(cfg.pluginsFile), cfg)
      }
+    }).then((cfg) => {
+      try {
+        const tsPath = resolve.sync('typescript', {


this PR has already been merged, but it is a bad idea to ever use sync functions which read from the file system. this should use the async variant that does async fs calls under the hood. this avoids potential EMFILE errors.

brian-mann · 2020-04-22T16:43:00Z

packages/server/lib/plugins/child/run_plugins.js

@@ -173,9 +177,38 @@ module.exports = (ipc, pluginsFile) => {
    return false
  })

+  if (!tsRegistered) {
+    try {
+      const tsPath = resolve.sync('typescript', {


see other comment about EMFILE

brian-mann · 2020-04-22T16:43:03Z

packages/server/lib/plugins/resolve.js

+    }
+
+    try {
+      return resolve.sync('typescript', {


see other comment about EMFILE

sainthkh mentioned this pull request Dec 7, 2019

Proposal: add native built-in typescript support #1859

Closed

sainthkh marked this pull request as ready for review December 9, 2019 01:11

sainthkh changed the title ~~WIP Out-of-the-box TypeScript Support~~ Out-of-the-box TypeScript Support Dec 9, 2019

sainthkh force-pushed the issue-1859-part-1 branch 2 times, most recently from 25ee491 to aae6ce1 Compare December 18, 2019 02:50

sainthkh changed the title ~~Out-of-the-box TypeScript Support~~ WIP Out-of-the-box TypeScript Support Dec 18, 2019

yonigibbs mentioned this pull request Dec 23, 2019

Using add-typescript-to-cypress module, when TypeScript code not compiling, Cypress crashes #6032

Closed

sainthkh changed the title ~~WIP Out-of-the-box TypeScript Support~~ Out-of-the-box TypeScript Support Dec 26, 2019

jennifer-shehane requested a review from a team January 9, 2020 06:22

This comment has been minimized.

Sign in to view

jennifer-shehane requested review from bahmutov and kuceb January 22, 2020 07:03

bahmutov reviewed Feb 3, 2020

View reviewed changes

packages/server/lib/plugins/resolve.js Show resolved Hide resolved

bahmutov suggested changes Feb 3, 2020

View reviewed changes

sainthkh changed the title ~~Out-of-the-box TypeScript Support~~ [WIP] Out-of-the-box TypeScript Support Feb 21, 2020

sainthkh force-pushed the issue-1859-part-1 branch 3 times, most recently from f7ed97b to d486202 Compare March 24, 2020 08:07

sainthkh changed the title ~~[WIP] Out-of-the-box TypeScript Support~~ Out-of-the-box TypeScript Support Mar 24, 2020

sainthkh requested a review from bahmutov March 24, 2020 08:54

jennifer-shehane requested a review from CypressJoseph March 25, 2020 10:08

CypressJoseph reviewed Mar 25, 2020

View reviewed changes

CypressJoseph previously approved these changes Mar 25, 2020

View reviewed changes

CypressJoseph mentioned this pull request Mar 25, 2020

More Emphasis on Typescript #6847

Closed

sainthkh added 12 commits April 13, 2020 15:28

Fix type errors.

fa5a0e6

Add plugin support and e2e test.

d72a9fa

Fix server unit test failures.

2657b12

Update snapshots.

ebc2a46

Migrate typescript compilation code to browserify-preprocessor

718c8fa

Remove unnecessary files and test.

94d410a

They're tested in preprocessor.

Fix test failures.

c733ecc

Update @types/react.

9f1672f

Update yarn.lock.

a29ac72

Clear name: registerTS -> tsRegistered.

60dfe6a

Clarify why tsRegistered = true exists.

079e94e

Add working examples for support and plugins.

04d0ef9

sainthkh dismissed CypressJoseph’s stale review via 9ad54d6 April 13, 2020 07:24

sainthkh force-pushed the issue-1859-part-1 branch from 28e5a12 to 9ad54d6 Compare April 13, 2020 07:24

jennifer-shehane requested a review from chrisbreiding April 13, 2020 07:31

Move TypeScript tests to its own file.

3512f4d

sainthkh force-pushed the issue-1859-part-1 branch from 9ad54d6 to 3512f4d Compare April 13, 2020 07:43

jennifer-shehane merged commit e22b362 into cypress-io:develop Apr 13, 2020

jennifer-shehane mentioned this pull request Apr 13, 2020

Update docs for changes required for out of box TS support cypress-io/cypress-documentation#2710

Merged

cypress-io locked as resolved and limited conversation to collaborators Apr 14, 2020

brian-mann reviewed Apr 22, 2020

View reviewed changes

packages/server/lib/plugins/resolve.js

}

try {

return resolve.sync('typescript', {

Copy link

Member

brian-mann Apr 22, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see other comment about EMFILE

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Out-of-the-box TypeScript Support #5906

Out-of-the-box TypeScript Support #5906

sainthkh commented Dec 7, 2019 •

edited by chrisbreiding

Loading

cypress-bot bot commented Dec 7, 2019

sainthkh commented Dec 7, 2019

This comment has been minimized.

sainthkh commented Jan 17, 2020

bahmutov commented Feb 3, 2020

bahmutov left a comment

sainthkh commented Mar 24, 2020

bahmutov commented Mar 24, 2020

CypressJoseph Mar 25, 2020 •

edited

Loading

CypressJoseph Mar 25, 2020

sainthkh Mar 26, 2020 •

edited

Loading

CypressJoseph left a comment •

edited

Loading

sainthkh commented Apr 13, 2020

chrisbreiding commented Apr 13, 2020

chrisbreiding commented Apr 13, 2020

bahmutov commented Apr 13, 2020 via email

jennifer-shehane commented Apr 13, 2020

kpittman-securus commented Apr 13, 2020

Saibamen commented Apr 13, 2020

brian-mann Apr 22, 2020

brian-mann Apr 22, 2020

brian-mann Apr 22, 2020

Out-of-the-box TypeScript Support #5906

Out-of-the-box TypeScript Support #5906

Conversation

sainthkh commented Dec 7, 2019 • edited by chrisbreiding Loading

User facing changelog

Additional details

Why was this change necessary?

What is affected by this change?

Any implementation details to explain?

How has the user experience changed?

PR Tasks

cypress-bot bot commented Dec 7, 2019

PR Review Checklist

User Experience

Functionality

Maintainability

Quality

Internal

sainthkh commented Dec 7, 2019

This comment has been minimized.

sainthkh commented Jan 17, 2020

bahmutov commented Feb 3, 2020

bahmutov left a comment

Choose a reason for hiding this comment

sainthkh commented Mar 24, 2020

bahmutov commented Mar 24, 2020

CypressJoseph Mar 25, 2020 • edited Loading

Choose a reason for hiding this comment

CypressJoseph Mar 25, 2020

Choose a reason for hiding this comment

sainthkh Mar 26, 2020 • edited Loading

Choose a reason for hiding this comment

CypressJoseph left a comment • edited Loading

Choose a reason for hiding this comment

sainthkh commented Apr 13, 2020

chrisbreiding commented Apr 13, 2020

chrisbreiding commented Apr 13, 2020

bahmutov commented Apr 13, 2020 via email

jennifer-shehane commented Apr 13, 2020

kpittman-securus commented Apr 13, 2020

Saibamen commented Apr 13, 2020

brian-mann Apr 22, 2020

Choose a reason for hiding this comment

brian-mann Apr 22, 2020

Choose a reason for hiding this comment

brian-mann Apr 22, 2020

Choose a reason for hiding this comment

sainthkh commented Dec 7, 2019 •

edited by chrisbreiding

Loading

CypressJoseph Mar 25, 2020 •

edited

Loading

sainthkh Mar 26, 2020 •

edited

Loading

CypressJoseph left a comment •

edited

Loading