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

…4037) * Enhancement - EmptyElem JSX printer * Space before closing tag * Documentation regarding possible consequences for self closing tag in JSX rendering * Add test for self-closing tag * update changelog --------- Co-authored-by: Maxime Mangel <[email protected]>
fable-compiler · Feb 9, 2025 · 5c95930 · 5c95930
1 parent 151db12
commit 5c95930
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/src/Fable.Cli/CHANGELOG.md b/src/Fable.Cli/CHANGELOG.md
@@ -21,6 +21,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * [Python] `importSideEffects` shouldn't generate identifier (#3965) (by @alfonsogarciacaro)
 * [JS/TS] Fix #4031: Hoist vars locally in for and while loops (@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

diff --git a/src/Fable.Compiler/CHANGELOG.md b/src/Fable.Compiler/CHANGELOG.md
@@ -21,6 +21,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * [Python] `importSideEffects` shouldn't generate identifier (#3965) (by @alfonsogarciacaro)
 * [JS/TS] Fix #4031: Hoist vars locally in for and while loops (@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

diff --git a/src/Fable.Transforms/BabelPrinter.fs b/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

diff --git a/tests/React/__tests__/Tests.fs b/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")
     ))
-))
+))