How does index.ts in plugins ever bootstrap?

[LesYeuxNoirz]

Hi everyone,

Been working with Cypress with Typescript for quite some time and I've always been sure that the index file in the plugins folder can be only of the .js extension due to its nature. As I understand it, the code in this file is used to bootstrap the main Node process for Cypress and only afterwards does this process start compiling the TS internally for the browser to execute tests. So, my question is, the default pre-processor doesn't compile index.ts from the plugins folder (I added debug logs and saw nothing until I ran a spec), what compiles it then? How come it's compiled properly if I never ran tsc?

Also, one more point that I both googled and search in the Issues section is the tsconfig.json file in the cypress folder. As far as I understood, that file is completely ignored by Cypress during compilation so there's no way for me as a developer to adjust the compilation process? Or does it read only specific properties from the file?

Thanks in advance for your explanations :)

[LesYeuxNoirz]

@bahmutov , sorry to disturb you, if you ever have time, please look into this as I think you're the only guy who can give us a hint here
We've tried everything, including looking through sources, but still haven't been able to find responses to these questions (also nothing in the official docs)

[bahmutov]

Not sure I understand the problem without a small reproducible example I can run

[LesYeuxNoirz]

First of all, thanks a lot for your response, I appreciate it very much :)

Secondly, actually the reproducible scenario is kinda simple, it's the mechanism behind it I'm eager to understand. So, the reproducible example for the first part of the question is just to rename your plugins/index.js into plugins/index.ts and add some types there. I don't quite get how it's compiled as I added DEBUG=cypress:* and saw preprocessor logs only after the plugins file was actually executed (test runner was opened and I clicked any spec). So I'm very eager to understand when and how the plugins/index.ts file is compiled as I never run tsc manually

Regarding my second question, the reproducible example would be to have something like this in your tsconfig.json:
"include": ["**/*.ts"], (this works, if I provide invalid inputs, this will failed when trying to run a spec) "noEmit": true, (for some reason, Cypress tests are still compiled properly) "outDir": "./anydir" (ignored, even when "noEmit" is "false"
I don't get which tsconfig options influence Cypress ts => js compilation process and which don't. As far as I know, any type checkings and strict rules are ignored when Cypress compiles ts

[bahmutov]

I would create a small public repo with code as a reproduction example

…

Sent from my iPhone

On Jul 30, 2021, at 13:01, Nick ***@***.***> wrote:  First of all, thanks a lot for your response, I appreciate it very much :) Secondly, actually the reproducible scenario is kinda simple, it's the mechanism behind it I'm eager to understand. So, the reproducible example for the first part of the question is just to rename your plugins/index.js into plugins/index.ts and add some types there. I don't quite get how it's compiled as I added DEBUG=cypress:* and saw preprocessor logs only after the plugins file was actually executed (test runner was opened and I clicked any spec). So I'm very eager to understand when and how the plugins/index.ts file is compiled as I never run tsc manually Regarding my second question, the reproducible example would be to have something like this in your tsconfig.json: "include": ["**/*.ts"] (this works, if I provide invalid inputs, this will failed when trying to run a spec) "noEmit": true (for some reason, Cypress tests are still compiled properly) "outDir": "./anydir" (ignored, even when "noEmit" is "false" I don't get which tsconfig options influence Cypress ts => js compilation process and which don't. As far as I know, any type checkings and strict rules are ignored when Cypress compiles ts — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[LesYeuxNoirz]

Please check this repo: https://github.com/nikolayeasygenerator/typescript-cypress-example
Asked my friend to create it and add some comments to plugins/index.ts and tsconfig.json, please check them as they contain my questions. We've been trying to run Cypress with both DEBUG=cypress:server:preprocessor and DEBUG=cypress:webpack as seen in package.json

Still unable to understand how plugins/index.ts is ever compiled to be run be Node

[LesYeuxNoirz]

Hi again Gleb, did you manage to have a look at the repo yet? Thanks in advance

[bahmutov]

No, I’m very pressed on time right now

…

Sent from my iPhone

On Aug 3, 2021, at 11:59, Nick ***@***.***> wrote:  Hi again, Hleb, did you manage to have a look at the repo yet? Thanks in advance — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[LesYeuxNoirz]

Got it, please have a look when you have time, we'd be very grateful as it's something we've been struggling to understand within the team for quite a long time

[LesYeuxNoirz]

@bahmutov , to being with, sorry for disturbing you again,
Unfortunately, none except you ever responded here so I guess nobody else can really explain what's going on
If you ever happen to have several free mins you can devote to helping out, please check the repo: https://github.com/nikolayeasygenerator/typescript-cypress-example
The comments with the points I cannot understand are in two files only: cypress/plugins/index.ts and in the tsconfig file in the root

[bahmutov]

I’m sorry but nowadays I only look at the things that I really need and not for support

…

Sent from my iPhone

On Aug 24, 2021, at 15:12, Nick ***@***.***> wrote:  @bahmutov , to being with, sorry for disturbing you again, Unfortunately, none except you ever responded here so I guess nobody else can really explain what's going on If you ever happen to have several free mins you can devote to helping out, please check the repo: https://github.com/nikolayeasygenerator/typescript-cypress-example The comments with the points I cannot understand are in two files only: cypress/plugins/index.ts and in the tsconfig file in the root — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[san-slysz]

Not sure if this is what you want but,
I was able to change my index.js into .ts adding that in my cypress.json file

"pluginsFile": "cypress/plugins/index.ts",
"supportFile": "cypress/support/index.ts",

This allow cypress to find the files even though its name or extension is not what it expected :).
Then everything that needs some customizations can be customized in your plugin/index.ts file in the module.export function.

If this helps, my code start with that
module.exports = async (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
// Technical context
const options = {
...browserify.defaultOptions,
typescript: resolve.sync('typescript', { baseDir: config.projectRoot })
}
(other cool stuff)
}

Be sure to send back the config at the end of this function.
I don't think I have the replies you're searching for, but hopefully this may still help :/