From 12a91b2f9771114b1894ced6b12a98737b348b66 Mon Sep 17 00:00:00 2001 From: cabboose Date: Sat, 8 Feb 2025 09:22:24 +0800 Subject: [PATCH 1/5] Enhancement - EmptyElem JSX printer --- src/Fable.Transforms/BabelPrinter.fs | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/Fable.Transforms/BabelPrinter.fs b/src/Fable.Transforms/BabelPrinter.fs index b8503cf4b..edaa32e7a 100644 --- a/src/Fable.Transforms/BabelPrinter.fs +++ b/src/Fable.Transforms/BabelPrinter.fs @@ -453,10 +453,10 @@ module PrinterExtensions = ) printer.PopIndentation() - - printer.Print(">") - - if not (List.isEmpty children) then + if List.isEmpty children then + printer.Print("/>") + else + printer.Print(">") printer.PrintNewLine() printer.PushIndentation() @@ -482,9 +482,9 @@ module PrinterExtensions = printer.PopIndentation() - printer.Print("") + printer.Print("") member printer.Print(expr: Expression) = match expr with From 956f668d5bd9e959d2314e0aaeb639d6264580ad Mon Sep 17 00:00:00 2001 From: cabboose Date: Sat, 8 Feb 2025 13:16:57 +0800 Subject: [PATCH 2/5] Space before closing tag --- src/Fable.Transforms/BabelPrinter.fs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Fable.Transforms/BabelPrinter.fs b/src/Fable.Transforms/BabelPrinter.fs index edaa32e7a..6fc8587c0 100644 --- a/src/Fable.Transforms/BabelPrinter.fs +++ b/src/Fable.Transforms/BabelPrinter.fs @@ -453,8 +453,9 @@ module PrinterExtensions = ) printer.PopIndentation() + if List.isEmpty children then - printer.Print("/>") + printer.Print(" />") else printer.Print(">") printer.PrintNewLine() From cd4dfbc83cc82ab7c22d359879dd6a92c1016b28 Mon Sep 17 00:00:00 2001 From: cabboose Date: Sat, 8 Feb 2025 14:46:44 +0800 Subject: [PATCH 3/5] Documentation regarding possible consequences for self closing tag in JSX rendering --- src/Fable.Transforms/BabelPrinter.fs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Fable.Transforms/BabelPrinter.fs b/src/Fable.Transforms/BabelPrinter.fs index 6fc8587c0..b0c390a93 100644 --- a/src/Fable.Transforms/BabelPrinter.fs +++ b/src/Fable.Transforms/BabelPrinter.fs @@ -455,6 +455,10 @@ module PrinterExtensions = printer.PopIndentation() 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(">") From ba1fb404924d14698f02bdb7aa384678b024552c Mon Sep 17 00:00:00 2001 From: cabboose Date: Sun, 9 Feb 2025 20:22:12 +0800 Subject: [PATCH 4/5] Add test for self-closing tag --- tests/React/__tests__/Tests.fs | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/tests/React/__tests__/Tests.fs b/tests/React/__tests__/Tests.fs index 6e79c0748..e3a01ea06 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 +)) From 3a2569c004d36ff151f4752daf1f274155f5ade4 Mon Sep 17 00:00:00 2001 From: Maxime Mangel Date: Sun, 9 Feb 2025 17:45:13 +0100 Subject: [PATCH 5/5] update changelog --- src/Fable.Cli/CHANGELOG.md | 4 ++++ src/Fable.Compiler/CHANGELOG.md | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/Fable.Cli/CHANGELOG.md b/src/Fable.Cli/CHANGELOG.md index 2b67421db..062ed66ec 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 d6470b1a6..e1b32d744 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