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!

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

[Steinar Bang]

A short update 6 months after the previous posting on this thread.

I installed emacs 29.3 from debian backports on the current debian
stable (12.5 "bookworm").

29.3 has tree-sitter support built in, and in the debian package, linked
in (in the form of https://packages.debian.org/bookworm/libtree-sitter0 )

You can list the available built-in supported (or "potentially
supported") tree-sitter language modes with: 'C-h a ts-mode RET'

What you need in addition to emacs and the above library, are .so files
containing tree-sitter parsers for the various languages.

If you use the interactive commands in emacs, the parsers will be
downloaded and built and placed into ~/.emacs.d/tree-sitter/.

Here is my ~/.emacs.d/tree-sitter/ directory:
  /home/sb/.emacs.d/tree-sitter:
  drwxr-xr-x 2 sb sb    4096 Jun  8 20:25 .
  drwx------ 7 sb sb    4096 Jun 14 00:14 ..
  -rwxr-xr-x 1 sb sb   95512 Jun  8 20:25 libtree-sitter-css.so
  -rwxr-xr-x 1 sb sb  382736 Jun  4 22:54 libtree-sitter-javascript.so
  -rwxr-xr-x 1 sb sb  524000 Jun  4 22:53 libtree-sitter-java.so
  -rwxr-xr-x 1 sb sb 4113952 Jun  8 20:13 libtree-sitter-kotlin.so
  -rwxr-xr-x 1 sb sb 2286424 Jun  8 18:40 libtree-sitter-tsx.so
  -rwxr-xr-x 1 sb sb 2224840 Jun  8 18:40 libtree-sitter-typescript.so

The css, javascript, java and kotlin .so files, I compiled using the command:
'M-x treesit-install-language-grammar RET <language> RET'

The command will clone the .so repo to a temp directory, build the .so
and move it to ~/.emacs.d/tree-sitter/

However the treesit-install-language-grammar command failed on
the typescript repo, which actually contains two separate tree-sitter
parsers, the typescript parser and the tsx parser.  So for typescript
and tsx I had to clone the repo and build with make from the top and
then copy over the resulting .so files.

Activating the tree-sitter modes is done with the following addition to ~/.emacs:
 https://gist.github.com/steinarb/10f5bfb968295ccbef298c67b1f28e9a

Where there is an existing non-ts mode, I have used
major-mode-remap-alist to replace it (then the ts version of the mode
will replace all of the language extension triggerings of the original).

Where there is no existing non-ts mode (i.e. typescript and tsx) I use
auto-mode-alist in the time tested way.

The treesit-language-available-p will test true if the tree-sitter mode
for the language is available and has a tree-sitter .so available.

As for the current state of the tree-sitter based modes they currently
only seem to do syntax highlighting and indentation (but they do so very
fast and stable).

But what I read from this commit
 https://git.savannah.gnu.org/cgit/emacs.git/commit/?id=c79a509384d33dab6a964ef9a97cbc9a1f1b5bf7
is that perhaps the ts-modes are based on their non-ts alternatives, so
that, maybe, just maybe, everything available in the non-ts-mode will
also be available in the ts-mode...?

Turning back to typescript: please note that as the tree-sitter parsers
for typescript and tsx are separate, so are the language modes
(different modes bound to .ts and tsx files).

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

[Eli Zaretskii]

> From: Steinar Bang <sb@dod.no>
> Date: Fri, 14 Jun 2024 18:04:08 +0200
> 
> Turning back to typescript: please note that as the tree-sitter parsers
> for typescript and tsx are separate, so are the language modes
> (different modes bound to .ts and tsx files).

Yes.  Please submit a bug report about this, so we could see if we can
fix this in Emacs.

(There are a few more grammar libraries with similar issues, where
more than one grammar library is built from the same Git repository.
Examples include Markdown, PHP, and Ocaml.)

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

[Steinar Bang]

>>>>> Eli Zaretskii <eliz@gnu.org>:

> Yes.  Please submit a bug report about this, so we could see if we can
> fix this in Emacs.

https://debbugs.gnu.org/cgi/bugreport.cgi?bug=71562

> (There are a few more grammar libraries with similar issues, where
> more than one grammar library is built from the same Git repository.
> Examples include Markdown, PHP, and Ocaml.)