Commenting out some JSX code section with Emacs 27 js-mode

Question

When I comment out (M-x comment-dwim) some section of JSX code with the new js-mode in Emacs 27, it gives:

// <Grid rows={rows} columns={columns}>
//   <Table />
//   <TableHeaderRow />
// </Grid>

Is there any way to make js-mode behave like it does with rjsx-mode:

{/* <Grid rows={rows} columns={columns}> */}
{/*   <Table /> */}
{/*   <TableHeaderRow /> */}
{/* </Grid> */}

Supposing that this is not currently possible, and that js-mode is really the way to go forward for JS/JSX code (from the older rjsx-mode and js2-mode, as I vaguely understand), where would I go to study the code and possibly suggest a pull request to make it work?

Answer 1

It's fixed in emacs 28.
For emacs 27 you can copy function

(defun js-jsx--comment-region (beg end &optional arg)
  (if (or (js-jsx--context)
          (save-excursion
            (skip-chars-forward " \t")
            (js-jsx--looking-at-start-tag-p)))
      (let ((comment-start "{/* ")
            (comment-end " */}"))
        (comment-region-default beg end arg))
    (comment-region-default beg end arg)))

And use it like so

(add-hook 'js-mode-hook (lambda ()
                      (when (eq js-jsx-syntax t)
                        (setq-local comment-region-function #'js-jsx--comment-region))
                      ))

Answer 2

I have written the jtsx package which addresses this issue.

Commenting and uncommenting JSX code is fully supported and some additional features are provided.

Note that it is implemented on top of js-ts-mode and tsx-ts-mode, which use tree-sitter code parser and are only available starting Emacs 29.1.