[JS/TS] Optimise JSX output in order to avoid F# list CEs to surface in it (#4095)

Author: MangelMaxime

.gitignore

@@ -229,3 +229,6 @@ tests/**/*.actual
 # Rust
 target/
 Cargo.lock
+
+# This file is copied as part of the Restore task
+tests/React/Components.Copied.fs

.vscode/settings.json

@@ -32,5 +32,9 @@
         "temp"
     ],
     "python.testing.unittestEnabled": false,
-    "python.testing.pytestEnabled": true
+    "python.testing.pytestEnabled": true,
+    "files.associations": {
+        "*.jsx.actual": "javascript",
+        "*.jsx.expected": "javascript"
+    }
 }

src/Fable.Build/Test/JavaScript.fs

@@ -21,11 +21,23 @@ let private testReact (isWatch: bool) =
     if isWatch then
         Async.Parallel
             [
-                Command.WatchFableAsync(CmdLine.appendRaw "--noCache", workingDirectory = workingDirectory)
+                Command.WatchFableAsync(
+                    CmdLine.appendRaw "watch"
+                    >> CmdLine.appendRaw "--noCache"
+                    // There seems to be some strange console Log writting
+                    >> CmdLine.appendRaw "--verbose"
+                    >> CmdLine.appendRaw "--runWatch"
+                    >> CmdLine.appendRaw "npx jest",
+                    workingDirectory = workingDirectory
+                )
                 |> Async.AwaitTask
 
-                Command.RunAsync("npx", "jest --watch", workingDirectory = workingDirectory)
-                |> Async.AwaitTask
+            // Running both command in the same shell don't seems to be working as expected.
+
+            // For now, we expect the user to use `./build.sh test javascript --react-only --watch`
+            // and `npx jest --watch` in a second terminal
+            // Command.RunAsync("npx", "jest --watch", workingDirectory = workingDirectory)
+            // |> Async.AwaitTask
             ]
         |> Async.RunSynchronously
         |> ignore

src/Fable.Cli/CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * [Python] Fixed error when type contains multiple generic type parameters (#3986) (by @dbrattli)
 * [Python] Fixed import path handling for libraries (#4088) (by @dbrattli)
 * [Python] Reenable type aliasing for imports with name "*" (by @freymauer)
+* [JS/TS] Optimise JSX output in order to avoid F# list CEs to surface in it (by @MangelMaxime)
 
 ### Removed
 

src/Fable.Compiler/CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * [Python] Fixed import path handling for libraries (#4088) (by @dbrattli)
 * [Python] Reenable type aliasing for imports with name "*" (by @freymauer)
+* [JS/TS] Optimise JSX output in order to avoid F# list CEs to surface in it (by @MangelMaxime)
 
 ## 5.0.0-alpha.12 - 2025-03-14
 

src/Fable.Transforms/Fable2Babel.fs

@@ -2034,6 +2034,111 @@ module Util =
                 None
         )
 
+    module Jsx =
+
+        (***
+
+For JSX, we want to rewrite the default output in order to remove all the code coming from list CEs
+
+By default, this code
+
+```fs
+Html.div
+    [
+        yield! [
+            Html.div "Test 1"
+            Html.div "Test 2"
+        ]
+    ]
+```
+
+generates something like
+
+```jsx
+<div>
+    {toList(delay(() => [<div>
+        Test 1
+    </div>, <div>
+        Test 2
+    </div>]))}
+</div>;
+```
+
+but thanks to the optimisation done below we get
+
+```jsx
+<div>
+    <div>
+        Test 1
+    </div>
+    <div>
+        Test 2
+    </div>
+</div>
+```
+
+        Initial implementation of this optimiser comes from https://github.com/shayanhabibi/Partas.Solid/blob/master/Partas.Solid.FablePlugin/Plugin.fs
+
+        ***)
+
+        // Check if the provided expression is equal to the expected identiferText (as a string)
+        let rec (|IdentifierIs|_|) (identifierText: string) expression =
+            match expression with
+            | Expression.Identifier(Identifier(currentCallerText, _)) when identifierText = currentCallerText -> Some()
+            | _ -> None
+
+        // Make it easy to check if we are calling the expected function
+        and (|CalledExpression|_|) (callerText: string) value =
+            match value with
+            | CallExpression(IdentifierIs callerText, UnrollerFromArray exprs, _, _) -> Some exprs
+            | _ -> None
+
+        and (|UnrollerFromSingleton|) (expr: Expression) : Expression list =
+            [ expr ]
+            |> function
+                | Unroller exprs -> exprs
+
+        and (|UnrollerFromArray|) (arrayExpr: Expression array) : Expression list =
+            arrayExpr
+            |> Array.toList
+            |> function
+                | Unroller exprs -> exprs
+
+        and (|Unroller|): Expression list -> Expression list =
+            function
+            | [] -> []
+            | expr :: Unroller rest ->
+                match expr with
+                | CalledExpression "toList" exprs -> exprs @ rest
+                | CalledExpression "delay" exprs -> exprs @ rest
+                | ArrowFunctionExpression([||],
+                                          BlockStatement [| ReturnStatement(ArrayExpression(UnrollerFromArray exprs, _),
+                                                                            _) |],
+                                          _,
+                                          _,
+                                          _) -> exprs @ rest
+                | ArrowFunctionExpression([||],
+                                          BlockStatement [| ReturnStatement(UnrollerFromSingleton exprs, _) |],
+                                          _,
+                                          _,
+                                          _) -> exprs @ rest
+                | CalledExpression "append" exprs -> exprs @ rest
+                | CalledExpression "singleton" exprs -> exprs @ rest
+                // Note: Should we guard this unwrapper by checking that all the elements in the array are JsxElements?
+                | ArrayExpression(UnrollerFromArray exprs, _) -> exprs @ rest
+                | ConditionalExpression(testExpr, UnrollerFromSingleton thenExprs, UnrollerFromSingleton elseExprs, loc) ->
+                    ConditionalExpression(
+                        testExpr,
+                        SequenceExpression(thenExprs |> List.toArray, None),
+                        SequenceExpression(elseExprs |> List.toArray, None),
+                        loc
+                    )
+                    :: rest
+                | expr ->
+                    // Tips 💡
+                    // If a pattern is not optimized, you can put a debug point here to capture it
+                    expr :: rest
+
     let transformJsxEl (com: IBabelCompiler) ctx componentOrTag props =
         match transformJsxProps com props with
         | None -> Expression.nullLiteral ()
@@ -2047,6 +2152,12 @@ module Util =
                     // Because of call optimizations, it may happen a list has been transformed to an array in JS
                     | [ ArrayExpression(children, _) ] -> Array.toList children
                     | children -> children
+                // Optimize AST, removing F# CEs from the output (see documentation in the JSX module)
+                |> List.map (fun child ->
+                    match child with
+                    | Jsx.UnrollerFromSingleton expr -> expr
+                )
+                |> List.concat
 
             let props =
                 props |> List.rev |> List.map (fun (k, v) -> k, transformAsExpr com ctx v)

tests/Integration/Integration/CompilationTests.fs

@@ -20,7 +20,7 @@ let tests =
 
                 // Compile project
                 let exitCode =
-                    Fable.Cli.Entry.main [| project; "--cwd"; "$\"{testCaseDir}\""; "-e"; ".js.actual" |]
+                    Fable.Cli.Entry.main [| project; "--cwd"; "$\"{testCaseDir}\""; "-e"; ".jsx.actual" |]
 
                 Expect.equal exitCode 0 "Expected exit code to be 0"