JavaScript/TypeScript: What do people in 2024, on emacs 29, use for .js, .jsx, .ts and .tsx?

JavaScript/TypeScript: What do people in 2024, on emacs 29, use for .js, .jsx, .ts and .tsx?

[Steinar Bang]

I'm in the process of setting up a new windows laptop, and have
installed Emacs 29.

I have been using rjsx-mode for react.js JSX files since 2018, so I
routinely started installing that from melpa.

But then I noticed that it was kinda old: The version on melpa is from
February 24 2020.

And looking at rjsx-mode's github page the last commit was October 28 2020:
 https://github.com/felipeochoa/rjsx-mode

So I decided to see what came up as default on emacs 29.

What I get according to 'C-h m', is:
 The major mode is JavaScript[JSX] mode defined in js.el:

JSX tag syntax seems to be highlighted correctly and indentations seems
to be correct (I'm using https://github.com/editorconfig/editorconfig-emacs ).

But there doesn't seem to be the same electric tag splitting behaviour I
have on JSX mode...? Though that may be a configuration possibility...?

What do others use?

And what about typescript?

I don't like typescript so I don't use that in any of my private
projects, but when working with frontends I have to adapt.

Last time I worked with typescript (2021-2022) I think I ended up with
something called tide and web-mode for the .ts and .tsx files, while
staying with rjsx-mode for .js and .jsx files.

I don't know if that's still the way to go for typescript or if the
built-in javascript mode now handles typescript?

What do others use?

Thanks!


- Steinar

Re: JavaScript/TypeScript: What do people in 2024, on emacs 29, use for .js, .jsx, .ts and .tsx?

[Dmitry Gutov]

On 09/01/2024 14:12, Steinar Bang wrote:
> So I decided to see what came up as default on emacs 29.
> 
> What I get according to 'C-h m', is:
>   The major mode is JavaScript[JSX] mode defined in js.el:
> 
> JSX tag syntax seems to be highlighted correctly and indentations seems
> to be correct (I'm usinghttps://github.com/editorconfig/editorconfig-emacs  ).
> 
> But there doesn't seem to be the same electric tag splitting behaviour I
> have on JSX mode...? Though that may be a configuration possibility...?
> 
> What do others use?
> 
> And what about typescript?
> 
> I don't like typescript so I don't use that in any of my private
> projects, but when working with frontends I have to adapt.
> 
> Last time I worked with typescript (2021-2022) I think I ended up with
> something called tide and web-mode for the .ts and .tsx files, while
> staying with rjsx-mode for .js and .jsx files.
> 
> I don't know if that's still the way to go for typescript or if the
> built-in javascript mode now handles typescript?

js-mode handles JSX indeed, but it's inevitaby limited in what it 
understands about its syntax (it uses sgml-mode under the covers to do 
highlighting, but I'm sure there would be odd edge cases).

The latest new option in 29.1 is js-ts-mode (which uses tree-sitter 
parser and supports JSX too). It should provide the most accurate 
highlighting and reliable indentation, but some features (like tag 
splitting?) might have to be reimplemented anew. Should be easier to do 
that using tree-sitter parse tree than with sgml-mode. Perhaps if 
rjsx-mode has an implementation, it wouldn't be too hard to port it.

Re: JavaScript/TypeScript: What do people in 2024, on emacs 29, use for .js, .jsx, .ts and .tsx?

[Steinar Bang]

>>>>> Dmitry Gutov <dmitry@gutov.dev>:

> js-mode handles JSX indeed, but it's inevitaby limited in what it
> understands about its syntax (it uses sgml-mode under the covers to do
> highlighting, but I'm sure there would be odd edge cases).

Ah, ok. Thanks for the update!

> The latest new option in 29.1 is js-ts-mode (which uses tree-sitter
> parser and supports JSX too). It should provide the most accurate
> highlighting and reliable indentation,

Hm... interesting! I ran into the tree-sitter thing, yesterday, while
looking for documentation for the the js-mode of emacs 29.

> but some features (like tag splitting?) might have to be reimplemented
> anew. Should be easier to do that using tree-sitter parse tree than
> with sgml-mode. Perhaps if rjsx-mode has an implementation, it
> wouldn't be too hard to port it.

I'll do a dive into the rjsx code and see if I can identify where it
does tag splitting and post back on the thread here.

Re: JavaScript/TypeScript: What do people in 2024, on emacs 29, use for .js, .jsx, .ts and .tsx?

[Steinar Bang]

>>>>> Steinar Bang <sb@dod.no>:
>>>>> Dmitry Gutov <dmitry@gutov.dev>:

>> but some features (like tag splitting?) might have to be reimplemented
>> anew. Should be easier to do that using tree-sitter parse tree than
>> with sgml-mode. Perhaps if rjsx-mode has an implementation, it
>> wouldn't be too hard to port it.

> I'll do a dive into the rjsx code and see if I can identify where it
> does tag splitting and post back on the thread here.

Harder than I thought... parsing and manipulation of the buffer seems
interweaved, but perhaps here:
 https://github.com/felipeochoa/rjsx-mode/blob/master/rjsx-mode.el#L452

If you have something like
 <Home/>
and you type a ">" after "Home", i.e.
 <Home></>
then the "</>" is immediately expanded to "</Home>"
 <Home></Home>

And it, sort of, kind of, looks like the above code is the one doing it, maybe...?

(Couldn't figure out where js2-DIV and friends were defined so I don't
know what it matches)

Re: JavaScript/TypeScript: What do people in 2024, on emacs 29, use for .js, .jsx, .ts and .tsx?

[Dmitry Gutov]

On 13/01/2024 09:30, Steinar Bang wrote:
>>>>>> Steinar Bang <sb@dod.no>:
>>>>>> Dmitry Gutov <dmitry@gutov.dev>:
> 
>>> but some features (like tag splitting?) might have to be reimplemented
>>> anew. Should be easier to do that using tree-sitter parse tree than
>>> with sgml-mode. Perhaps if rjsx-mode has an implementation, it
>>> wouldn't be too hard to port it.
> 
>> I'll do a dive into the rjsx code and see if I can identify where it
>> does tag splitting and post back on the thread here.
> 
> Harder than I thought... parsing and manipulation of the buffer seems
> interweaved, but perhaps here:
>   https://github.com/felipeochoa/rjsx-mode/blob/master/rjsx-mode.el#L452

Doesn't look like that: rjsx-parse-xml seems like a routine to parse and 
return an xml parse node.

> If you have something like
>   <Home/>
> and you type a ">" after "Home", i.e.
>   <Home></>
> then the "</>" is immediately expanded to "</Home>"
>   <Home></Home>

Seems like it's the command called 'rjsx-electric-gt' defined here: 
https://github.com/felipeochoa/rjsx-mode/blob/b697fe4d92cc84fa99a7bcb476f815935ea0d919/rjsx-mode.el#L916

> And it, sort of, kind of, looks like the above code is the one doing it, maybe...?
> 
> (Couldn't figure out where js2-DIV and friends were defined so I don't
> know what it matches)

js2-DIV is defined in js2-mode.el (which is a dependency). The value is 
a number which denoted the node type. But might be unnecessary, given 
the above.

Re: JavaScript/TypeScript: What do people in 2024, on emacs 29, use for .js, .jsx, .ts and .tsx?

[Steinar Bang]

>>>>> Dmitry Gutov <dmitry@gutov.dev>:

> Seems like it's the command called 'rjsx-electric-gt' defined here:
> https://github.com/felipeochoa/rjsx-mode/blob/b697fe4d92cc84fa99a7bcb476f815935ea0d919/rjsx-mode.el#L916

Yeah! Should have found that one with that obvious name. My bad!