Fail to parse typescript type assertion syntax

[gregoryzh]

Hi, i think the parser fails at angular bracket type assertion syntax, is this an known issue?

[ehaynes99]

The error thrown is SyntaxError: Unterminated JSX contents during @babel/parser here:

https://github.com/jest-community/jest-editor-support/blob/4b34a1850adb8f880aefb5cb31377ac32e3025da/src/parsers/babel_parser.js#L25

[connectdotz]

yes, this is a known issue, fix is not hard: we are enabling "jsx" babel plugin for all file types, what we should do is only enable "jsx" for react file types.

It's a relatively simple change if anybody is interested. You can start from here

[gregoryzh]

yes, this is a known issue, fix is not hard: we are enabling "jsx" babel plugin for all file types, what we should do is only enable "jsx" for react file types.

It's a relatively simple change if anybody is interested. You can start from here

hi, created PR

72

[ehaynes99]

JSX is not specific to React; it's used by many different libraries.

[connectdotz]

@ehaynes99 the current thinking is to only remove 'jsx' babel plugin from .ts files. All the other file extensions will continue to be able to use 'jsx' syntax/plugin. Does that address your concern? If not, please elaborate.

Based on these discussions (Microsoft/TypeScript#26489 and Microsoft/TypeScript#30503), typescript standard is to allow 'jsx' syntax only for .tsx files. Even though many users have asked for 'jsx' in .ts files, the request did not seem to be approved so far. So I think removing 'jsx' plugin from .ts file would be all right as it is aligned with the typescript standard.

[ehaynes99]

I think it's safe to consider bracket-style type assertions and .tsx files to be mutually exclusive, as typescript itself was unable to solve for both in the same file, leading to the introduction of the as keyword. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-1-6.html#new-tsx-file-extension-and-as-operator

It's NOT safe to remove the jsx plugin for .js files. create-react-app started recommending against using the .jsx extension in 2016, and the overwhelming majority of React files are simply .js: https://github.com/facebook/create-react-app/releases/tag/v0.4.1

Finally, it's a misnomer to equate React and JSX. It's the most popular library using it, but certainly not the only one.

• https://vuejs.org/v2/guide/render-function.html
• https://github.com/ionic-team/stencil
• https://github.com/preactjs/preact

[ehaynes99]

Here is a PR that allows for distinct handling of the 3 types. I also did a bit of cleanup on the parser test. https://github.com/jest-community/jest-editor-support/pull/75