Server component applying attributes to the wrong elements in a list of children

[JonasGruenwald]

Hello – I encountered this issue in my app with server components applying attributes to the wrong DOM elements in a list of children.

Steps

• Using the server components example as a basis: https://github.com/lustre-labs/lustre/tree/main/examples/99-server-components
• Replace the view function with this one:

/// The added part is:
/// * A div with a number of children that **changes dynamically based on the model** 
/// * The last child is always the same and has an attribute applied (just a simple style)
/// * The other children have no attributes applied
fn view(model: Model) -> Element(Msg) {
  let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")]
  let count = int.to_string(model)
  ui.centre(
    [attribute.style(styles)],
    ui.stack([], [
      ui.button([event.on_click(Incr)], [element.text("+")]),
      html.slot([]),
      html.p([attribute.style([#("text-align", "center")])], [
        element.text(count),
      ]),
      ui.button([event.on_click(Decr)], [element.text("-")]),

      // --- ADDDED THIS PART vvv
      html.div(
        [],
        list.range(0, model)
          |> list.map(fn(n) {
            html.div([], [
              html.text("Unstyled item number " <> int.to_string(n)),
            ])
          })
          |> list.append([
            html.div([attribute.attribute("style", "color:red")], [
              html.text("This item alone should be styled red"),
            ]),
          ]),
      ),
      // --- UNTIL HERE ------^^^
    ]),
  )
}

• Run the app, open it in the browser
• Start increasing the counter

What happens

• As the counter increases, more elements are added to the list of children
• The new elements incorrectly have the style attribute from the static last child applied to them

Additional Note / Workaround

In this particular case, if all children have the attribute present, the issue will not occur, so this:

// --- ADDDED THIS PART vvv
html.div(
  [],
  list.range(0, model)
    |> list.map(fn(n) {
      html.div([attribute.attribute("style", "color:black")], [
        html.text("Unstyled item number " <> int.to_string(n)),
      ])
    })
    |> list.append([
      html.div([attribute.attribute("style", "color:red")], [
        html.text("This item alone should be styled red"),
      ]),
    ]),
),
// --- UNTIL HERE ------^^^

Will make the dynamic children appear as they should.

[hayleigh-dot-dev]

Thank you, after a bit of digging this turned out to be a super simple fix. I was accidentally indexing into a string i thought was an array, so the patching logic was all off!