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-<.

2 files changed, 43 insertions, 4 deletions

diff --git a/lisp/progmodes/js.el b/lisp/progmodes/js.el
index 90f857c96fa..afdc28e53b9 100644
--- 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
index 00000000000..8eb1d6d718c
--- /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: