Add new defcustom js-jsx-align->-with-<

* lisp/progmodes/js.el (js-jsx-align->-with-<): New variable for users
to control one opinionated aspect of JSX indentation.  It defaults to
the style seen in the React docs, which many users expected as the
“correct” indentation.  Still, the old SGML-style of indentation could
be desirable too, especially since it was the old default.  This
ensures users have a way of getting back the old behavior.
(js-jsx--contextual-indentation): Respect js-jsx-align->-with-<.

* test/manual/indent/jsx-align-gt-with-lt.jsx: New test for
js-jsx-align->-with-<.

diff --git a/lisp/progmodes/js.el b/lisp/progmodes/js.el
index 90f857c96fa24aa12ed31ad116417435236f13e4..afdc28e53b98f1d63999e5ef85d9cee23fc2ff75 100644 (file)
--- a/lisp/progmodes/js.el
+++ b/lisp/progmodes/js.el
@@ -600,6 +600,31 @@ It is set to be buffer-local (and t) when in `js-jsx-mode'."
   :safe 'booleanp
   :group 'js)
 
+(defcustom js-jsx-align->-with-< t
+  "When non-nil, “>” will be indented to the opening “<” in JSX.
+
+When this is enabled, JSX indentation looks like this:
+
+  <element
+    attr=\"\"
+  >
+  </element>
+  <input
+  />
+
+When this is disabled, JSX indentation looks like this:
+
+  <element
+    attr=\"\"
+    >
+  </element>
+  <input
+    />"
+  :version "27.1"
+  :type 'boolean
+  :safe 'booleanp
+  :group 'js)
+
 (defcustom js-jsx-indent-level nil
   "When non-nil, indent JSX by this value, instead of like JS.
 
@@ -2725,10 +2750,12 @@ The column calculation is based off of `sgml-calculate-indent'."
      ;; bracket on its own line is indented at the same level as the
      ;; opening angle bracket of the JSXElement.  Otherwise, indent
      ;; JSXAttribute space like SGML.
-     (if (progn
-           (goto-char (nth 2 context))
-           (and (= line (line-number-at-pos))
-                (looking-back "^\\s-*/?>" (line-beginning-position))))
+     (if (and
+          js-jsx-align->-with-<
+          (progn
+            (goto-char (nth 2 context))
+            (and (= line (line-number-at-pos))
+                 (looking-back "^\\s-*/?>" (line-beginning-position)))))
          (progn
            (goto-char (nth 1 context))
            (current-column))

diff --git a/test/manual/indent/jsx-align-gt-with-lt.jsx b/test/manual/indent/jsx-align-gt-with-lt.jsx
new file mode 100644 (file)
index 0000000..8eb1d6d
--- /dev/null
+++ b/test/manual/indent/jsx-align-gt-with-lt.jsx
@@ -0,0 +1,12 @@
+<element
+  attr=""
+  >
+</element>
+<input
+  />
+
+// Local Variables:
+// indent-tabs-mode: nil
+// js-indent-level: 2
+// js-jsx-align->-with-<: nil
+// End: