Description

There seem to be inputs of a certain size that trigger a transformation from a string like "a" to the expression let x = "a" in x. Since transformJsxProps is checking for a specific pattern of a tuple expression for the prop's key and value, the pattern match fails and the error Cannot detect JSX prop key at compile time is triggered. This can be worked around by moving the literal into a local variable, but some frontend patterns like long tailwind classes, hardcoded urls, and svg values are often longer than 100 characters, making it an inconvenient limitation.

Changing the pattern match to destructure the Let binding works, but I'm unsure there aren't cases where this would produce an incorrect result:

 | Some(props, children),
                (Fable.Value(Fable.NewTuple([ StringConst key; value ], _), _)
              | Fable.Let(_, value, Fable.Value(Fable.NewTuple([ StringConst key ; _], _), _))) ->

Repro code

main...joprice:Fable:jsxError

<JSX.Component>]
let classTest () =
    Html.div [
      Attr.className
        "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
    ]

Expected and actual results

Literals of any size should not cause compilation errors or require workarounds to use in JSX expressions.

Related information

• Fable version: 4.18.0
• Operating system: OSX