bug#65470: 29.1.50; js-ts-mode: regex pattern can cause incorrect parenthesis matching

[Dmitry Gutov <dmitry@gutov.dev>]

[-- Attachment #1: Type: text/plain, Size: 1675 bytes --]

On 24/08/2023 22:47, Theodor Thornhill wrote:
> Eli Zaretskii<eliz@gnu.org>  writes:
> 
>>> Date: Wed, 23 Aug 2023 16:23:13 +0300
>>> From: Dmitry Gutov<dmitry@gutov.dev>
>>>
>>> On 23/08/2023 12:05, Augustin Chéneau (BTuin) wrote:
>>>> With the mode js-ts-mode, matching tokens (such as '()', '[]') can be
>>>> incorrectly paired by `show-paren-mode`. This is trivially reproducible
>>>> with this simple example:
>>>>
>>>> (/foobar)/)
>>>>
>>>> The first parenthesis is matched with the second one, which is inside a
>>>> regular expression pattern (between slashes), and the last one is not
>>>> paired.
>>>>
>>>> The behavior should be the same as for string, the content of the regex
>>>> pattern should have no influence on the structure of the code. The first
>>>> parenthesis should match with the third one. Here, the first parenthesis
>>>> is matched with the last one:
>>>>
>>>> ("foobar)")
>>>>
>>>> js-mode behaves correctly in both cases.
>>> Sounds like js-ts-mode also needs a syntax-propertize-function, similar
>>> to c-ts-mode, ruby-ts-mode and rust-ts-mode.
>>>
>>> Others (typescript-ts-mode?) probably need it as well, at least modes
>>> for those languages that have dedicated regexp or heredoc syntax.
>> Would someone please add syntax-propertize-function in modes that need
>> it?  I think this should be done on the emacs-29 branch.
>>
>> TIA
> I'll add it to my list, but if someone will grab it that's fine, as I'm
> a little short on time the next couple of weeks 🙁

This one seems to work for js-ts-mode.

typescript is a bit more fiddly (two separate modes, one with jsx and 
one without), but should be able to follow the similar pattern.

[-- Attachment #2: js-ts--syntax-propertize.diff --]
[-- Type: text/x-patch, Size: 1745 bytes --]

diff --git a/lisp/progmodes/js.el b/lisp/progmodes/js.el
index 9d2990e7bc9..23fdc57533d 100644
--- a/lisp/progmodes/js.el
+++ b/lisp/progmodes/js.el
@@ -3829,6 +3829,7 @@ js-ts-mode
                 (append "{}():;,<>/" electric-indent-chars)) ;FIXME: js2-mode adds "[]*".
     (setq-local electric-layout-rules
 	        '((?\; . after) (?\{ . after) (?\} . before)))
+    (setq-local syntax-propertize-function #'js-ts--syntax-propertize)
 
     ;; Tree-sitter setup.
     (treesit-parser-create 'javascript)
@@ -3864,6 +3865,26 @@ js-ts-mode
     (add-to-list 'auto-mode-alist
                  '("\\(\\.js[mx]\\|\\.har\\)\\'" . js-ts-mode))))
 
+(defvar js-ts--s-p-query
+  (when (treesit-available-p)
+    (treesit-query-compile 'javascript
+                           '(((regex pattern: (regex_pattern) @regexp))
+                             ((variable_declarator value: (jsx_element) @jsx))
+                             ((assignment_expression right: (jsx_element) @jsx))))))
+
+(defun js-ts--syntax-propertize (beg end)
+  (let ((captures (treesit-query-capture 'javascript js-ts--s-p-query beg end)))
+    (pcase-dolist (`(,name . ,node) captures)
+      (let ((syntax (pcase-exhaustive name
+                      ('regexp
+                       (string-to-syntax "\"/"))
+                      ('jsx
+                       (string-to-syntax "|")))))
+        (put-text-property (treesit-node-start node) (1+ (treesit-node-start node))
+                           'syntax-table syntax)
+        (put-text-property (1- (treesit-node-end node)) (treesit-node-end node)
+                           'syntax-table syntax)))))
+
 ;;;###autoload
 (define-derived-mode js-json-mode js-mode "JSON"
   (setq-local js-enabled-frameworks nil)