diff --git a/src/Fable.Transforms/Fable2Babel.fs b/src/Fable.Transforms/Fable2Babel.fs index 00cbbf0b31..690136a760 100644 --- a/src/Fable.Transforms/Fable2Babel.fs +++ b/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" diff --git a/tests/Integration/Integration/data/jsxListOptimisation/Components.fs b/tests/Integration/Integration/data/jsxListOptimisation/Components.fs index 938064405f..f9b5881434 100644 --- a/tests/Integration/Integration/data/jsxListOptimisation/Components.fs +++ b/tests/Integration/Integration/data/jsxListOptimisation/Components.fs @@ -162,3 +162,11 @@ let propsCanUseUnbox = Html.div [ unbox ("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" + ] diff --git a/tests/Integration/Integration/data/jsxListOptimisation/Components.jsx.expected b/tests/Integration/Integration/data/jsxListOptimisation/Components.jsx.expected index 7371329c93..d46f30308b 100644 --- a/tests/Integration/Integration/data/jsxListOptimisation/Components.jsx.expected +++ b/tests/Integration/Integration/data/jsxListOptimisation/Components.jsx.expected @@ -110,3 +110,5 @@ export function divWithConditionalWithoutElseBranchWorks(show) { } export const propsCanUseUnbox =
; + +export const divWithLongClassName =
;