Skip to content
This repository has been archived by the owner on Jan 31, 2023. It is now read-only.

fix: Only enable TypeScript jsx compiling for .js, .jsx, and .tsx files #45

Merged

Conversation

sainthkh
Copy link
Contributor

@sainthkh sainthkh commented May 5, 2020

Fixes #44.

@@ -32,7 +34,7 @@ module.exports = function (b, opts) {
this.push(ts.transpileModule(text, {
compilerOptions: {
esModuleInterop: true,
jsx: 'react',
jsx: ext === '.ts' ? undefined : 'react',
Copy link
Collaborator

Choose a reason for hiding this comment

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

This makes the default react and only turns it off if the extension is .ts. I think it should be flipped, so it's only set to react if the extension is .tsx (maybe .jsx too? not sure if that makes sense or is necessary). Seems more future-proof, so if some framework foo creates a TypeScript-compatible extension .tsf, it doesn't switch to react mode.

Choose a reason for hiding this comment

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

'react' isn't the only option, but probably the most common. Should there be a way to configure this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@chrisbreiding

Then, how about changing it to ext === '.js' || ext === '.jsx' || ext === '.tsx'? Many developers use JSX syntax with .js files. I think it's safer to include .js files to the list.

@NicholasBoll

There are 4 options: undefined, "react", "preserve", "react-native".

But "preserve" and "react-native" don't make sense here. Cypress transpiles the test code and sends it to the browser and runs it. When we select "preserve" or "react-native" option, the code cannot be executed on browsers. Because JSX is not compiled and they're still <X /> in the transpiled code.

Currently, developers use .js, .jsx, .tsx extensions to include JSX syntax. And .ts doesn't allow JSX syntax. AFAIK, there is no other scenario. So, I don't think providing option to allow other jsx TypeScript compile options is an over-spec.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Then, how about changing it to ext === '.js' || ext === '.jsx' || ext === '.tsx'

That sounds reasonable.

test/fixtures/typescript/math_spec.ts Show resolved Hide resolved
@chrisbreiding chrisbreiding self-requested a review May 8, 2020 13:31
@chrisbreiding chrisbreiding changed the title Ignore JSX syntax in ts files. fix: Only enable TypeScript jsx compiling for .js, .jsx, and .tsx files May 8, 2020
@chrisbreiding chrisbreiding merged commit 00e9be9 into cypress-io:master May 8, 2020
@chrisbreiding
Copy link
Collaborator

🎉 This PR is included in version 2.2.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Typescript compiler assumes JSX use
3 participants