Complete automatic synchronization of jsx element tags feature.

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ## 0.3.4 (2024-02-08)
 
+* Add automatic name synchronization of JSX element tags.
 * Add unwrap and delete features.
 * Fix jsx electric newline having side effects in none jtsx buffers.
 

README.md

@@ -68,6 +68,7 @@ Here an example of configuration using [use-package](https://github.com/jwiegley
   ;; (jtsx-jsx-element-move-allow-step-out t)
   ;; (jtsx-enable-jsx-electric-closing-element t)
   ;; (jtsx-enable-electric-open-newline-between-jsx-element-tags t)
+  ;; (jtsx-enable-jsx-element-tags-auto-sync nil)
   ;; (jtsx-enable-all-syntax-highlighting-features t)
   :config
   (defun jtsx-bind-keys-to-mode-map (mode-map)
@@ -112,6 +113,10 @@ Here an example of configuration using [use-package](https://github.com/jwiegley
 
 ![Rename element](./examples/rename-element.gif)
 
+As an alternative, you can turn `jtsx-enable-jsx-element-tags-auto-sync` to `t` to enable automatic name synchronization of `JSX` element tags. As soon as the name of an opening or a closing tag is edited, its paired tag is immediately synchronized.
+
+![Auto sync element tags](./examples/auto-sync-tags.gif)
+
 ### Moving JSX elements
 
 `jtsx` implements some commands to move a `JSX` tag or node through the `JSX` structure, re-indenting automatically the modified part of code. `JSX` nodes can be an element (self-closing or not), an expression or a text line.
@@ -199,6 +204,7 @@ Please refer to [Hideshow documentation](https://www.gnu.org/software/emacs/manu
 | `jtsx-jsx-element-move-allow-step-out`                       | `t`     | Allow to step out when moving a jsx element.                                                                                                                                                                                                            |
 | `jtsx-enable-jsx-electric-closing-element`                   | `t`     | Enable electric JSX closing element feature.                                                                                                                                                                                                            |
 | `jtsx-enable-electric-open-newline-between-jsx-element-tags` | `t`     | Enable electric new line between jsx element tags                                                                                                                                                                                                       |
+| `jtsx-enable-jsx-element-tags-auto-sync`                     | `nil`   | Enable automatic name synchronization of jsx element opening and closing tags.                                                                                                                                                                          |
 | `jtsx-enable-all-syntax-highlighting-features`               | `t`     | Enable all available syntax highlighting features.                                                                                                                                                                                                      |
 
 ## FAQ

jtsx.el

@@ -6,7 +6,7 @@
 ;; Maintainer: Loïc Lemaître <[email protected]>
 ;; URL: https://github.com/llemaitre19/jtsx
 ;; Package-Requires: ((emacs "29.1"))
-;; Version: 0.3.4
+;; Version: 0.4.0
 ;; Keywords: languages
 
 ;; This file is NOT part of GNU Emacs.
@@ -94,7 +94,7 @@ continuated expression."
   :group 'jtsx)
 
 (defcustom jtsx-enable-jsx-element-tags-auto-sync nil
-  "Enable jsx element tags automatic synchronization."
+  "Enable jsx automatic synchronization of element opening and closing tag name."
   :type 'boolean
   :safe 'booleanp
   :group 'jtsx)
@@ -384,15 +384,19 @@ Point can be in the opening or closing."
                   (1- (treesit-node-start identifier-node)))))))
 
 (defun jtsx-synchronize-jsx-element-tags ()
-  "Synchronize jsx element tags depending on the cursor position."
+  "Synchronize jsx element tags depending on the cursor position.
+
+Under some circumtances, the synchronization can fail.  Right after editing a
+ tag name and before synchronization, the code is syntactically wrong, thus the
+ tree-sitter parser can be lost.  For example in that situation, where `A' has
+ just been erased form the opening tag: < attribute=\"text\"></A>."
   (when (and jtsx-enable-jsx-element-tags-auto-sync (jtsx-command-modified-buffer-p))
     (let* ((node (treesit-node-at (point)))
            (parent-node (treesit-node-parent node))
            (parent-node-type (treesit-node-type parent-node)))
       (when (and (member (treesit-node-type node) '("identifier" ">" "<"))
-                 (member parent-node-type jtsx-jsx-ts-element-tag-keys)
-                 ;; Downstream syntax must be clean to prevent unexpected behaviours.
-                 ;; e.g.
+                 (member parent-node-type `(,@jtsx-jsx-ts-element-tag-keys "ERROR"))
+                 ;; Syntax must be clean to prevent unexpected behaviours.
                  (not (jtsx-treesit-syntax-error-in-descendants-p parent-node))
                  (not (jtsx-treesit-syntax-error-in-ancestors-p parent-node)))
         (let* ((element-node (treesit-node-parent parent-node))

tests/jtsx-tests.el

@@ -551,6 +551,19 @@ Turn this buffer in MODE mode if supplied or defaults to jtsx-tsx-mode."
     (should (equal (synchronize-jsx-element-tags-into-buffer content move-point #'jtsx-tsx-mode)
                    result))))
 
+(ert-deftest jtsx-test-synchronize-jsx-element-tags-from-empty-opening-with-string-attribute ()
+  "Known bug.
+In that situation, Tree-sitter parser is very confused with this syntax.  No workaround for now."
+  :expected-result :failed
+  (let ((jtsx-enable-jsx-element-tags-auto-sync t)
+        (move-point #'(lambda () (goto-char 3)))
+        (content "(< label=\"Name\">Hello</ABC>);")
+        (result "(< label=\"Name\">Hello</>);"))
+    (should (equal (synchronize-jsx-element-tags-into-buffer content move-point #'jtsx-jsx-mode)
+                   result))
+    (should (equal (synchronize-jsx-element-tags-into-buffer content move-point #'jtsx-tsx-mode)
+                   result))))
+
 (ert-deftest jtsx-test-synchronize-jsx-element-tags-from-empty-closing-with-attribute ()
   (let ((jtsx-enable-jsx-element-tags-auto-sync t)
         (move-point #'(lambda () (goto-char 18)))