fix(js/ts): Fix JSX props with long string values causing compile error (fixes #3839)

src/Fable.Transforms/Fable2Babel.fs

@@ -2078,6 +2078,17 @@ module Util =
                     | value -> Some(props, [ value ])
                 else
                     Some((key, value) :: props, children)
+            // When the string value exceeds ~100 chars, Fable wraps it in a Let binding.
+            // The Let body still contains the tuple with the prop key and a reference to the bound var;
+            // we use the bound value (letValue) as the actual prop value.
+            | Some(props, children),
+              MaybeCasted(Fable.Let(_, letValue, MaybeCasted(Fable.Value(Fable.NewTuple([ StringConst key; _ ], _), _)))) ->
+                if key = "children" then
+                    match letValue with
+                    | Replacements.Util.ArrayOrListLiteral(children, _) -> Some(props, children)
+                    | _ -> Some(props, [ letValue ])
+                else
+                    Some((key, letValue) :: props, children)
             | Some _, e ->
                 addError com [] e.Range "Cannot detect JSX prop key at compile time"
 

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

@@ -162,3 +162,11 @@ let propsCanUseUnbox =
     Html.div [
         unbox<JSX_IReactProperty> ("id", "myid")
     ]
+
+// 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".
+let divWithLongClassName =
+    Html.div [
+        prop.className "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+    ]

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

@@ -110,3 +110,5 @@ export function divWithConditionalWithoutElseBranchWorks(show) {
 }
 
 export const propsCanUseUnbox = <div id="myid" />;
+
+export const divWithLongClassName = <div className="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />;