List items

[rbiggs]

Nice framework. I've used straight template literals a lot. I love them. I've also used Yo-yo/Choo, Hyperx with Virtual Dom and Hyperapp. I'm not quite sure how to handle rendering repeating items from an array. I tried creating an example of composable parts, but can't seem to get the list items to render. They come back as strings, not what I was expecting. With normal template literals that would work. What am I doing wrong?

const render = hyperHTML.bind(document.body)
const wire = hyperHTML.wire()

const fruits = ['Apples', 'Oranges', 'Bananas']

const header = render => render`
  <nav>
    <h1>The Title</h1>
  </nav>`;

const footer = render => render`
  <footer>
    <h3>The footer</h13>
  </footer>`

const main = render => render`
  <section>
    <h2>Fruits</h2>
    <ul>
      ${fruits.map(fruit => `<li>${fruit}</li>`).join('')}
    </ul>
  </section>`

const update = render => render`${[header(wire), main(wire), footer(wire)]}`
update(render)

[WebReflection]

You're putting spaces around. There are only 3 rules to remember, please read them.

[rbiggs]

Ah, you mean on the ul. 🤦‍♂️

[WebReflection]

Yes, and if you want safe text inside

put at least a space around. HTML and wires are opt in and the best compromise is to have no spaces around. It'd be impossible to have this behavior swapped but it worked for all simple-to-complex examples and demos.

[WebReflection]

Put a space around < li >

[WebReflection]

Sorry I can't answer through my phone any better at this time

[rbiggs]

No probs. Thanx a lot. Appreciate the quick response ;-)