diff --git a/src/Fable.Cli/CHANGELOG.md b/src/Fable.Cli/CHANGELOG.md index 2b67421db8..062ed66ece 100644 --- a/src/Fable.Cli/CHANGELOG.md +++ b/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 diff --git a/src/Fable.Compiler/CHANGELOG.md b/src/Fable.Compiler/CHANGELOG.md index d6470b1a67..e1b32d744e 100644 --- a/src/Fable.Compiler/CHANGELOG.md +++ b/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 diff --git a/src/Fable.Transforms/BabelPrinter.fs b/src/Fable.Transforms/BabelPrinter.fs index b8503cf4b4..b0c390a939 100644 --- 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("") + printer.Print("") member printer.Print(expr: Expression) = match expr with diff --git a/tests/React/__tests__/Tests.fs b/tests/React/__tests__/Tests.fs index 6e79c0748c..e3a01ea061 100644 --- 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 "") + )) + 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") )) -)) \ No newline at end of file +))