Support JSX/TSX

[evmar]

TypeScript added support for JSX:
microsoft/TypeScript#3203

Briefly, this adds support for HTML-like literals in code:

var foo = <div style="foo">blah</div>;

typescript-mode currently doesn't indent such literals properly, in contexts like this:

var foo = <div style="foo"
  attr2="bar">      <- should indent matching "style"
  <div>
    <div>              <- should indent due to opening tag above
      ...

Currently I use web-mode (which understands JSX) for typescript files, but that doesn't work with tide (which wants to work with typescript-mode, not web-mode).

[evmar]

See the linked web-mode bug for an alternative solution approach.

[ananthakumaran]

PR welcome to add support for indent

[yqrashawn]

Is it possible to use rjsx-delete-creates-full-tag in typescript-mode? Is it easy to implement? rjsx-mode has a function to get the rjsx-class at cursor point which needs to parse whole file in advance.

felipeochoa/rjsx-mode#65 (comment)

[felipeochoa]

@yqrashawn (rjsx author here) No, the rjsx-class attribute is added while parsing the buffer, and rjsx cannot parse typescript, only javascript

[felipeochoa]

Separate comment -- what would it take to get JSX support in typescript mode? Would be interested to hear if anyone has given any thoughts in regards to the following features:

• Fontification
• Indentation
• Editing facilities (comment-dwim, rjsx-delete-creates-full-tag, etc.)

It looks like this mode does some sort parsing into "p-items" but not sure if that could be extended to handle JSX. I'm guessing some of the editing facilities are more likely to exist in tide than here, so happy to ignore that point for now.

[josteink]

Quite recently, emacs-devel has had some discussions about how to handle JSX better in core Emacs, and I've provided some minimal feedback w.r.t. JSX/React-syntax being used by other languages, not just JavaScript.

How it's solved in core may be relevant to how it's best solved in typescript-mode.

Thread for those interested: https://lists.gnu.org/archive/html/emacs-devel/2019-02/msg00430.html

[gaudecker]

Emacs 27 now supports JSX in js-mode, maybe this can be leveraged?

[lddubeau]

I'm sure js-mode's JSX support can be helpful in some way.

However, the main obstacle to getting TSX support is that nobody who needs it is stepping up to implement it. I'm going to quote @josteink:

Until we have a "regular" TSX-user onboard who is willing to test and review TSX-related changes, I doubt typescript-mode will be able to support this.

[gaudecker]

@lddubeau there are 3 (including me) Emacs users at our company who can help with the testing. I have some experience with elisp, but have never implemented a major mode.

I will take a look at the code and see I can can help.