fix(jsx): add missing indent end mark to elements

6 files changed, 98 insertions, 1 deletions

diff --git a/queries/ecma/indents.scm b/queries/ecma/indents.scm
index 0f99e0469..1a5520e52 100644
--- a/queries/ecma/indents.scm
+++ b/queries/ecma/indents.scm
@@ -46,6 +46,7 @@
 ] @branch
 (statement_block "{" @branch)
 
+(parenthesized_expression ("(" (_) ")" @indent_end))
 ["}" "]"] @indent_end
 
 [
diff --git a/queries/jsx/indents.scm b/queries/jsx/indents.scm
index d1a12be9c..81ef8b238 100644
--- a/queries/jsx/indents.scm
+++ b/queries/jsx/indents.scm
@@ -2,11 +2,20 @@
   (jsx_fragment)
   (jsx_element)
   (jsx_self_closing_element)
+  (jsx_expression)
 ] @indent
 
-(parenthesized_expression) @indent
+(jsx_fragment
+  ("<" ">" (_) "<" @branch "/" ">" @indent_end)
+)
+
+(jsx_closing_element (">" @indent_end))
+(jsx_self_closing_element ">" @indent_end)
 
 [
   (jsx_closing_element)
   ">"
 ] @branch
+; <button
+; />
+(jsx_self_closing_element "/" @branch)
diff --git a/tests/indent/jsx/element_attributes.jsx b/tests/indent/jsx/element_attributes.jsx
new file mode 100644
index 000000000..45aeeacca
--- /dev/null
+++ b/tests/indent/jsx/element_attributes.jsx
@@ -0,0 +1,18 @@
+export default function Home() {
+  return (
+    <>
+      <Button
+        style={{ 
+          color: 'blue', 
+        }}
+        disabled
+      >
+      </Button>
+      <Button
+        style={{
+          color: 'blue',
+        }}
+      />
+    </>
+  )
+}
diff --git a/tests/indent/jsx/issue-3986.jsx b/tests/indent/jsx/issue-3986.jsx
new file mode 100644
index 000000000..8306e394e
--- /dev/null
+++ b/tests/indent/jsx/issue-3986.jsx
@@ -0,0 +1,10 @@
+export default function Home() {
+  return (
+    <>
+      <div>
+        <p>This is a test</p>
+      </div>
+      <Button/>
+    </>
+  )
+}
diff --git a/tests/indent/jsx/jsx_expression.jsx b/tests/indent/jsx/jsx_expression.jsx
new file mode 100644
index 000000000..a45896ce2
--- /dev/null
+++ b/tests/indent/jsx/jsx_expression.jsx
@@ -0,0 +1,16 @@
+export default function Home() {
+  return (
+    <>
+      <Button
+        style={
+        }
+      >
+      </Button>
+      <Button
+        style={{
+          color: 'blue',
+        }}
+      />
+    </>
+  )
+}
diff --git a/tests/indent/jsx_spec.lua b/tests/indent/jsx_spec.lua
new file mode 100644
index 000000000..e75b21f4f
--- /dev/null
+++ b/tests/indent/jsx_spec.lua
@@ -0,0 +1,43 @@
+local Runner = require("tests.indent.common").Runner
+local runner = Runner:new(it, "tests/indent/jsx", {
+  tabstop = 2,
+  shiftwidth = 2,
+  expandtab = true,
+  filetype = "jsx",
+})
+
+describe("indent JSX Elements:", function()
+  describe("whole file:", function()
+    runner:whole_file(".", {
+      expected_failures = {},
+    })
+  end)
+
+  describe("new line:", function()
+    for _, info in ipairs {
+      { 5, 8 },
+      { 6, 6 },
+      { 7, 6 },
+      { 8, 4 },
+      { 9, 2 },
+    } do
+      runner:new_line("issue-3986.jsx", { on_line = info[1], text = "text", indent = info[2] })
+    end
+    for _, info in ipairs {
+      { 4, 8 },
+      { 6, 10 },
+      { 9, 8 },
+      { 11, 8 },
+    } do
+      runner:new_line("element_attributes.jsx", { on_line = info[1], text = "disabled", indent = info[2] })
+    end
+
+    for _, info in ipairs {
+      { 5, 10 },
+      { 7, 8 },
+      { 11, 10 },
+    } do
+      runner:new_line("jsx_expression.jsx", { on_line = info[1], text = "{disabled}", indent = info[2] })
+    end
+  end)
+end)