Show HN: Moon – 3kb JavaScript UI compiler

Re:Show HN: Moon – 3kb JavaScript UI compiler by kbr on Saturday July 28, 2018 @01:08PM (#17633974)

It's definitely based on preference, but I designed MVL to be as simple and consistent as possible. For example, there are two ways to create a for loop (one on the ul and one on the li).

  <For={item in items}>
    <!-- multiple elements -->
  </For>

  <p For={item in items}><!-- single element --></p>

This syntax works for every component ("For" is just another component).

[ Parent | on HN ]

Re:Show HN: Moon – 3kb JavaScript UI compiler by sbjs on Saturday July 28, 2018 @01:41PM (#17634134)

That is awesome that you have <For>! That's one of my biggest pet peeves with Vue.js, where it has to be an attribute on an element, and it's not intuitive whether it goes on the parent or the child. (I think Vue makes it go on the parent but I think it makes more sense for it to go on the child.)

[ Parent | on HN ]

Re:Show HN: Moon – 3kb JavaScript UI compiler by ppseafield on Saturday July 28, 2018 @05:49PM (#17635235)

IIRC for Vue.js it goes on the child, i.e.

    <ul>
      <li v-for="item in items">[...]</li>
    </ul>

It is something you do have to remember. I believe you can use a template tag too if you like.

[ Parent | on HN ]

Re:Show HN: Moon – 3kb JavaScript UI compiler by sbjs on Saturday July 28, 2018 @10:17PM (#17636144)

Ah right, thanks. Yes this always looks backwards to me. The body of a loop should be inside of it. But here it is the body of the loop. That is very strange.

[ Parent | on HN ]