How to build FormattableString when building string?

[leolorenzoluis]

Given the following code, I would like to build the string on the fly.

let createBar index value =
    printfn "%A %A" index value
    let ratio = 240 / 10
    $"""<rect 
              fill="red"
              x={( 320 / 10 )  * index}
              y={240 - ( value * ratio )}
              width={320 / 10}
              height="{value * ratio}"/>
        """

[<HookComponent>]
let chart () =
    let a = seq { 1..11 } |> Seq.mapi(createBar) |> System.String.Concat
    html $"""<svg width="320" height="240">{a}</svg>"""

I just want it to output and concatenate the string that I built

[alfonsogarciacaro]

Unfortunately this is not possible. Lit 2 uses a WeakMap to cache the templates and identify which parts needs updating. The WeakMap needs static references that are only possible with JS template strings. If the strings are built at runtime Lit will update the full template every time for each tiny change creating performance issues. There's a discussion in #4

However, Lit accepts iterables in the template holes. So if your list is not expected to change (so you don't need Lit.mapUnique), you can just pass the templates iterable without concatenating the strings. In the code below I just add svg in createBar to return a LitTemplate and remove |> String.Concat below.

let createBar index value =
    printfn "%A %A" index value
    let ratio = 240 / 10
    svg $"""<rect 
              fill="red"
              x={( 320 / 10 )  * index}
              y={240 - ( value * ratio )}
              width={320 / 10}
              height="{value * ratio}"/>
        """

[<HookComponent>]
let chart () =
    let a = seq { 1..11 } |> Seq.mapi(createBar)
    html $"""<svg width="320" height="240">{a}</svg>"""