[JSX] Print Empty Elem - Self closing tags when elem has no children

src/Fable.Cli/CHANGELOG.md

@@ -18,6 +18,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * [JS/TS] - Fix anonymous record printing (#4029) (by @alfonsogarciacaro)
 * [Python] - Fix #3998: PhysicalEquality (by @alfonsogarciacaro)
 
+### Changed
+
+* [JS/TS] In `JSX`, generate self closing element when element has no children (#4037) (by @shayanhabibi)
+
 ## 5.0.0-alpha.9 - 2025-01-28
 
 ### Fixed

src/Fable.Compiler/CHANGELOG.md

@@ -18,6 +18,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * [JS/TS] - Fix anonymous record printing (#4029) (by @alfonsogarciacaro)
 * [Python] - Fix #3998: PhysicalEquality (by @alfonsogarciacaro)
 
+### Changed
+
+* [JS/TS] In `JSX`, generate self closing element when element has no children (#4037) (by @shayanhabibi)
+
 ## 5.0.0-alpha.9 - 2025-01-28
 
 ### Fixed

src/Fable.Transforms/BabelPrinter.fs

@@ -454,9 +454,14 @@ module PrinterExtensions =
 
                 printer.PopIndentation()
 
-            printer.Print(">")
-
-            if not (List.isEmpty children) then
+            if List.isEmpty children then
+                // Self closing tag if el has no children. Matches expected behaviour of JSX with React/Solid etc
+                // https://react-cn.github.io/react/tips/self-closing-tag.html
+                // Self closing tag is invalid in HTML5 spec
+                // https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5
+                printer.Print(" />")
+            else
+                printer.Print(">")
                 printer.PrintNewLine()
                 printer.PushIndentation()
 
@@ -482,9 +487,9 @@ module PrinterExtensions =
 
                 printer.PopIndentation()
 
-            printer.Print("</")
-            printTag componentOrTag
-            printer.Print(">")
+                printer.Print("</")
+                printTag componentOrTag
+                printer.Print(">")
 
         member printer.Print(expr: Expression) =
             match expr with

tests/React/__tests__/Tests.fs

@@ -46,6 +46,11 @@ Jest.describe("React tests", (fun () ->
         Jest.expect(header).toHaveTextContent("6")
     ))
 
+    Jest.test("JSX EmptyElem render self-closing tags", (fun () ->
+        let elem = Counter.CounterJSX(5)
+        Jest.expect(elem).toStrictEqual(Fable.Core.JSX.jsx "<CounterJSX init={5} />")
+    ))
+
     Jest.test("SpreadSheet renders correctly", (fun () ->
         let elem = RTL.render(SpreadSheet.SpreadSheet() |> unbox)
         Jest.expect(elem.container).toMatchSnapshot()
@@ -74,4 +79,4 @@ Jest.describe("React tests", (fun () ->
         let text = elem.getByTestId "text"
         Jest.expect(text).toHaveTextContent("3")
     ))
-))
+))