fix(js/ts): add support for match clauses in JSX.create

Author: MangelMaxime

src/Fable.Transforms/Fable2Babel.fs

@@ -2142,6 +2142,13 @@ but thanks to the optimisation done below we get
 
         ***)
 
+        // A sequence lambda can only be flattened away when its body is a single `return`
+        // (handled by the ArrowFunctionExpression cases of the Unroller below).
+        let isFlattenableSeqLambdaBody (body: Statement array) =
+            match body with
+            | [| ReturnStatement _ |] -> true
+            | _ -> false
+
         // Check if the provided expression is equal to the expected identiferText (as a string)
         let rec (|IdentifierIs|_|) (identifierText: string) expression =
             match expression with
@@ -2171,6 +2178,16 @@ but thanks to the optimisation done below we get
             | expr :: Unroller rest ->
                 match expr with
                 | CalledExpression "toList" exprs -> exprs @ rest
+                // A `delay(fun () -> ...)` whose lambda body cannot be flattened (e.g. a `match`
+                // arm that binds a value before a `for` loop) must not be stripped down to a bare
+                // lambda, which React rejects ("Functions are not valid as a React child"). The
+                // `delay` only adds laziness, which is pointless for a JSX child, so invoke the
+                // lambda directly and let React render the produced sequence.
+                | CallExpression(IdentifierIs "delay",
+                                 [| (ArrowFunctionExpression([||], BlockStatement body, _, _, _)) as lambda |],
+                                 _,
+                                 _) when not (isFlattenableSeqLambdaBody body) ->
+                    CallExpression(lambda, [||], [||], None) :: rest
                 | CalledExpression "delay" exprs -> exprs @ rest
                 | ArrowFunctionExpression([||],
                                           BlockStatement [| ReturnStatement(ArrayExpression(UnrollerFromArray exprs, _),

tests/Integration/Integration/data/jsxListOptimisation/Components.fs

@@ -163,6 +163,33 @@ let propsCanUseUnbox =
         unbox<JSX_IReactProperty> ("id", "myid")
     ]
 
+let divWithMatchContainingForLoop (counter: int) =
+    Html.div [
+        match counter with
+        | 0 -> Html.div "No items!"
+        | items ->
+            let total = items + 1
+            for i in 1..total do
+                Html.div [
+                    prop.key i
+                    prop.text (i + total)
+                ]
+    ]
+
+let divWithElementBeforeMatchContainingForLoop (counter: int) =
+    Html.div [
+        Html.div "Header"
+        match counter with
+        | 0 -> Html.div "No items!"
+        | items ->
+            let total = items + 1
+            for i in 1..total do
+                Html.div [
+                    prop.key i
+                    prop.text (i + total)
+                ]
+    ]
+
 // Regression test for https://github.com/fable-compiler/Fable/issues/3839
 // String values longer than ~100 chars were wrapped in a Let binding by Fable,
 // causing transformJsxProps to fail with "Cannot detect JSX prop key at compile time".

tests/Integration/Integration/data/jsxListOptimisation/Components.jsx.expected

@@ -111,4 +111,44 @@ export function divWithConditionalWithoutElseBranchWorks(show) {
 
 export const propsCanUseUnbox = <div id="myid" />;
 
+export function divWithMatchContainingForLoop(counter) {
+    return <div>
+        {(() => {
+            if (counter === 0) {
+                return singleton(<div>
+                    No items!
+                </div>);
+            }
+            else {
+                const total = (counter + 1) | 0;
+                return map((i) => <div key={int32ToString(i)}>
+                    {i + total}
+                </div>, rangeDouble(1, 1, total));
+            }
+        })()}
+    </div>;
+}
+
+export function divWithElementBeforeMatchContainingForLoop(counter) {
+    return <div>
+        <div>
+            Header
+        </div>
+        {(() => {
+            const matchValue = counter | 0;
+            if (matchValue === 0) {
+                return singleton(<div>
+                    No items!
+                </div>);
+            }
+            else {
+                const total = (matchValue + 1) | 0;
+                return map((i) => <div key={int32ToString(i)}>
+                    {i + total}
+                </div>, rangeDouble(1, 1, total));
+            }
+        })()}
+    </div>;
+}
+
 export const divWithLongClassName = <div className="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />;

tests/React/__tests__/JSX_API.fs

@@ -66,6 +66,14 @@ Jest.describe("JSX API tests (using React)", fun () ->
         matchSnapshot Components.divWithForLoop
     )
 
+    Jest.test("Element can have a match arm that binds a value before a for loop", fun () ->
+        matchSnapshot (Components.divWithMatchContainingForLoop 2)
+    )
+
+    Jest.test("Element can have a sibling before a match arm that binds a value before a for loop", fun () ->
+        matchSnapshot (Components.divWithElementBeforeMatchContainingForLoop 2)
+    )
+
     Jest.test("Fragments are supported", fun () ->
         matchSnapshot Components.divWithFragment
     )

tests/React/__tests__/__snapshots__/JSX_API.fs.js.snap

@@ -1,5 +1,40 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`JSX API tests (using React) Element can have a match arm that binds a value before a for loop 1`] = `
+<div>
+  <div>
+    <div>
+      4
+    </div>
+    <div>
+      5
+    </div>
+    <div>
+      6
+    </div>
+  </div>
+</div>
+`;
+
+exports[`JSX API tests (using React) Element can have a sibling before a match arm that binds a value before a for loop 1`] = `
+<div>
+  <div>
+    <div>
+      Header
+    </div>
+    <div>
+      4
+    </div>
+    <div>
+      5
+    </div>
+    <div>
+      6
+    </div>
+  </div>
+</div>
+`;
+
 exports[`JSX API tests (using React) Element can have for loops 1`] = `
 <div>
   <div>